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

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

开通本站Svip会员,全站资源免费下
<!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>


全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部