Melaksanakan kesan karusel imej seperti JD.com berdasarkan kemahiran JavaScript

Melaksanakan kesan karusel imej seperti JD.com berdasarkan kemahiran JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 15:33:19

asal

1296 orang telah melayarinya

js melaksanakan kesan karusel gambar tiruan JD.com Apabila tetikus digerakkan ke atas tetingkap, pemasa dihentikan Apabila tetikus meninggalkan tetingkap, pemasa dimulakan apabila tetikus digerakkan pada tab dihentikan dan pensuisan manual dilakukan Dengan mentakrifkan fungsi enkapsulasi pemasa dijalankan, merangkumkan fungsi changeOption untuk mencapai kesan ini. Rakan yang memerlukannya hanya boleh menyalin dan memindahkannya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    *{margin:0;padding:0;list-style:none;}
    a{text-decoration: none;color: #fff;}
    #flash{width: 730px;height: 454px;margin: 100px auto;position: relative;cursor: pointer;}
    #pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;}
    #num{position: absolute;left: 40%;bottom: 10px;z-index: 2;cursor:default;}
    #num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;}
    #num li.active{background: #f00;}
    .arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;z-index: 3;display: none;}
    .arrow:hover{background: rgba(0,0,0,0.7);}
    #flash:hover .arrow{display: block;}
    #left{left: 2%;}
    #right{right: 2%;}
  </style>
  <script type="text/javascript">
    function $(id) {
      return typeof id==='string'&#63;document.getElementById(id):id;
    }
    window.onload=function(){
      var index=0;
      var timer=null;
      var pic=$("pic").getElementsByTagName("li");
      var num=$("num").getElementsByTagName("li");
      var flash=$("flash");
      var left=$("left");
      var right=$("right");
      //单击左箭头
      left.onclick=function(){
        index--;
        if (index<0) {index=num.length-1};
        changeOption(index);
      }
      //单击右箭头
      right.onclick=function(){
        index++;
        if (index>=num.length) {index=0};
        changeOption(index);
      }      
      //鼠标划在窗口上面，停止计时器
      flash.onmouseover=function(){
        clearInterval(timer);
      }
      //鼠标离开窗口，开启计时器
      flash.onmouseout=function(){
        timer=setInterval(run,2000)
      }
      //鼠标划在页签上面，停止计时器，手动切换
      for(var i=0;i<num.length;i++){
        num[i].id=i;
        num[i].onmouseover=function(){
          clearInterval(timer);
          changeOption(this.id);
        }
      }    
      //定义计时器
      timer=setInterval(run,2000)
      //封装函数run
      function run(){
        index++;
        if (index>=num.length) {index=0};
        changeOption(index);
      }
      //封装函数changeOption
      function changeOption(curindex){
        console.log(index)
        for(var j=0;j<num.length;j++){
          pic[j].style.display="none";
          num[j].className="";
        }
        pic[curindex].style.display="block";
        num[curindex].className="active";
        index=curindex;
      }
    }
  </script>
</head>
<body>
  <div id="flash">
    <ul id="pic">
      <li style="display:block"><img src="http://img13.360buyimg.com/da/jfs/t2242/262/578407619/87636/4ffe0c5/56187ed2Nfed9a5b3.jpg" alt=""></li>
      <li><img src="http://img13.360buyimg.com/da/jfs/t2143/111/577347825/96150/e27180bd/561889b3N42ee62b5.jpg" alt=""></li>
      <li><img src="http://img20.360buyimg.com/da/jfs/t1825/234/1750370913/97529/b9229832/560b5ad3N054605f7.jpg" alt=""></li>
      <li><img src="http://img10.360buyimg.com/da/jfs/t2026/215/573306345/95654/a0211937/5618a735N1b3d8423.jpg" alt=""></li>
      <li><img src="http://img20.360buyimg.com/da/jfs/t2065/362/579832759/78899/6f349917/5618c680N3752bacc.jpg" alt=""></li>
      <li><img src="http://img10.360buyimg.com/da/jfs/t2023/45/384256123/101565/9b6e5daf/5604bdceN8c7d2ccf.jpg" alt=""></li>
    </ul>
    <ol id="num">
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ol>
    <a href="javascript:;" class="arrow" id="left"><</a>
    <a href="javascript:;" class="arrow" id="right">></a> 
  </div>
</body>
</html>

Salin selepas log masuk

Bukankah kod di atas sangat mudah berdasarkan javascript, kesan karusel gambar Jindong tiruan telah berjaya dibuat Atas sebab masa, saya tidak menunjukkan renderingnya, jadi harap maafkan saya.