Rumah > Artikel > hujung hadapan web > Melaksanakan kesan karusel imej seperti JD.com berdasarkan kemahiran JavaScript_javascript

Melaksanakan kesan karusel imej seperti JD.com berdasarkan kemahiran JavaScript_javascript

WBOYasal: 2016-05-16 15:33:191297semak imbas

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>

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ringkasan kesan topeng log masuk yang dilaksanakan dalam kemahiran javascript_javascriptArtikel seterusnya：Ringkasan kesan topeng log masuk yang dilaksanakan dalam kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi