原生js自动轮播展示产品图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生js自动轮播展示产品图片</title>
<meta name="keywords" content="原生js,自动轮播,展示,产品图片" />
<meta name="description" content="原生js自动轮播展示产品图片" />
<link rel="stylesheet" type="text/CSS" href="css/style.css">
</head>

<body>
<div class="user_callback">
      <div class="user_pic" id="user_pic">
               <span class="prev"></span> <span class="next"></span>
               <ul id="user_call">
                        <li class="user_pic1">
                                 <a href="#"> <img src="images/57f8c4ccN6a433b82.png" alt="1" width="248" height="285" /></a>
                        </li>
                        <li class="user_pic2">
                                 <a href="#"> <img src="images/57f8c4d6Nd425f6a3.png" alt="2" width="247" height="285" /></a>
                        </li>
                        <li class="user_pic3">
                                 <a href="#"> <img src="images/57f8c4e1Nbd6f109e.png" alt="3" width="248" height="285" /></a>
                        </li>
                        <li class="user_pic4">
                                 <a href="#"> <img src="images/57f8c4ecN92c22efc.png" alt="4" width="247" height="285" /></a>
                        </li>
                        <li class="user_pic5">
                                 <a href="#"> <img src="images/583691e7Na26009a0.png" alt="5" width="247" height="285" /></a>
                        </li>
                        <li class="user_pic6">
                                 <a href="#"> <img src="images/583691e7Ne2adc3c4.png" alt="6" width="247" height="285" /></a>
                        </li>
                        <li class="user_pic7">
                                 <a href="#"> <img src="images/583691e7N058f6f5a.png" alt="7" width="247" height="285" /></a>
                        </li>
                        <li class="user_pic8">
                                 <a href="#"> <img src="images/583691e7N36b67a44.png" alt="8" width="247" height="285" /></a>
                        </li>
               </ul>
      </div>
</div>
<script type="text/javascript">function arcSlip()
  {
      var oPic=document.getElementById('user_pic');
      var oPrev=getByClass(oPic,'prev')[0];
      var oNext=getByClass(oPic,'next')[0];

      var aLi=oPic.getElementsByTagName('li');

      var arr=[];

      for(var i=0;i<aLi.length;i++)
      {
         var oImg=aLi.getElementsByTagName('img')[0];

               arr.push([parseInt(getStyle(aLi,'left')),parseInt(getStyle(aLi,'top')),
                           getStyle(aLi,'zIndex'),oImg.width,parseFloat(getStyle(aLi,'opacity')*100)]);
      }


      oPrev.onclick=function moveTP()
      {
            arr.push(arr[0]);
                  arr.shift();
                     for(var i=0;i<aLi.length;i++)
               {
                              var oImg=aLi.getElementsByTagName('img')[0];

                                             aLi.style.zIndex=arr[2];
                                             startMove(aLi,{left:arr[0],top:arr[1],opacity:arr[4]});
                                             startMove(oImg,{width:arr[3]});
                           }

      }

      oNext.onclick=function moveTN()
      {
            arr.unshift(arr[arr.length-1]);
                  arr.pop();
                     for(var i=0;i<aLi.length;i++)
               {
                              var oImg=aLi.getElementsByTagName('img')[0];

                                             aLi.style.zIndex=arr[2];
                                             startMove(aLi,{left:arr[0],top:arr[1],opacity:arr[4]});
                                             startMove(oImg,{width:arr[3]});
                           }
      }
var moveTime = setInterval (function(){

               oNext.click();

               },1000);
      $('#user_pic').hover(function(){
               ;;
      clearInterval(moveTime);
         },function(){
      moveTime=setInterval(function(){
               oNext.click();
               },1000);
         });

function getStyle(obj,name)
      {
            if(obj.currentStyle){ return obj.currentStyle[name]; }
                  else{ return getComputedStyle(obj,false)[name]; }
      }
  }
function getByClass(oParent,sClass)
  {
   var aResult=[];
         var aEle=oParent.getElementsByTagName('*');

                  for(var i=0;i<aEle.length;i++)
                  {
                           if(aEle.className==sClass)
                           {
                                 aResult.push(aEle);
                           }
                  }
         return aResult;
  }
function getStyle(obj,name)
  {
   if(obj.currentStyle)
         {
            return obj.currentStyle[name];
         }

         else
         {
            return getComputedStyle(obj,false)[name];
         }
  }
function startMove(obj,json,fnEnd)
  {
   clearInterval(obj.timer);
   obj.timer=setInterval(function()
         {
                  var bStop=true;
                  for(var attr in json)
            {
                           var cur=0;

                           if(attr=='opacity')
                           {
                                             cur=Math.round(parseFloat(getStyle(obj,attr))*100);
                           }
                           else
                           {
                                             cur=parseInt(getStyle(obj,attr));
                           }

                           var  speed=(json[attr]-cur)/6;
                           speed=speed>0?Math.ceil(speed):Math.floor(speed);

                           if(cur!=json[attr]) bStop=false;

                           if(attr=='opacity')
                           {
                                    obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                                    obj.style.opacity=(cur+speed)/100;
                           }
                           else
                           {
                                    obj.style[attr]=cur+speed+'px';
                           }
                  }

                  if(bStop)
                  {
                     clearInterval(obj.timer);
                           if(fnEnd) fnEnd();
                  }

         },30)


  }
  arcSlip();
</script>
</body>
</html>

		自动登录	找回密码
密码			立即注册

原生js自动轮播展示产品图片-Discuz教程下载

原生js自动轮播展示产品图片

相关帖子

全部评论 0

最佳新人

管理/版主

土豪装逼

教程 / CSS+DIV素材

【原创】discuz论坛分类信息中，帖子发布页有多个图片上传功能，74人阅读

【原创】修改discuz门户文章发布时间，将默认时间yyyy-mm-dd修改76人阅读

【实测】Discuz修改论坛列表页排序，实现主题帖子按最新发表时间137人阅读

Discuz! X3.2 - X3.4 升级至 Discuz! X3.5 详细教程178人阅读

【原创】根据论坛发帖时间或门户文章发布时间，判断时间是否为当154人阅读

【原创】分享一款html5+css3的浮窗多图DIY模块（百分百有效）88人阅读

【原创】分享一款html5+css3的浮窗单图DIY模块（百分百有效）100人阅读

【原创】分享一款html5+css3的横排导航列表DIY模块（百分百有效173人阅读

【原创】分享一款html5+css3的四排图文资讯列表DIY模块（百分百307人阅读

【转载】垂直时光轴HTML单页+CSS+js模块983人阅读

所属版块