当前位置：Gxlcms > JavaScript > JS实现旋转木马式图片轮播效果

JS实现旋转木马式图片轮播效果

时间：2021-07-01 10:21:17 帮助过：10人阅读

本文实例为大家分享了js图片轮播的具体代码，供大家参考，具体内容如下

主要html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <link rel="stylesheet" type="text/css" href="css/css.css">
  7.   <script type="text/javascript" src="js/animate.js"></script>
  8. </head>
  9. <body>
  10.   <div class="w-wrap" id="js_wrap">
  11.     <div class="wrap-slide" id="wrap_slide">
  12.       <ul>
  13.         <li><a href="#"><img src="images/slidepic1.jpg" alt=""></a></li>
  14.         <li><a href="#"><img src="images/slidepic2.jpg" alt=""></a></li>
  15.         <li><a href="#"><img src="images/slidepic3.jpg" alt=""></a></li>
  16.         <li><a href="#"><img src="images/slidepic4.jpg" alt=""></a></li>
  17.         <li><a href="#"><img src="images/slidepic5.jpg" alt=""></a></li>
  18.         <!-- <li><a href="#"><img src="images/slidepic6.jpg" alt=""></a></li> -->
  19.       </ul>
  20.       <div class="wrap-slide-arrow" id="wrap_slide_arrow">
  21.         <a href="javascript:;" class="prev"></a>
  22.         <a href="javascript:;" class="next"></a>
  23.       </div>
  24.     </div>
  25.   </div>
  26.   <script>
  27.     function $(id){ return document.getElementById(id);}
  28.     var js_wrap = $("js_wrap"); 
  29.     var wrap_slide = $("wrap_slide"); 
  30.     var wrap_slide_arrow = $("wrap_slide_arrow");
  31.     var lis = wrap_slide.children[0].children;
  32.     var json = [
  33.       {
  34.         //1
  35.         width: 400,
  36.         top: 20,
  37.         left: 50,
  38.         opacity: 20,
  39.         z: 2
  40.       },
  41.       {
  42.         //2
  43.         width: 600,
  44.         top: 70,
  45.         left: 0,
  46.         opacity: 80,
  47.         z: 3
  48.       },
  49.       {
  50.         //3
  51.         width: 800,
  52.         top: 100,
  53.         left: 200,
  54.         opacity: 100,
  55.         z: 4
  56.       },
  57.       {
  58.         //4
  59.         width: 600,
  60.         top: 70,
  61.         left: 600,
  62.         opacity: 80,
  63.         z: 3
  64.       },
  65.       {
  66.         //5
  67.         width: 400,
  68.         top: 20,
  69.         left: 750,
  70.         opacity: 20,
  71.         z: 2
  72.       }/*,
  73.       {
  74.         //6
  75.         width: 300,
  76.         top: 10,
  77.         left: 400,
  78.         opacity: 10,
  79.         z: 1
  80.       }*/
  81.     ]
  82.     change(); //将各个图片按照json铺开层次
  83.     var jieliu = true;
  84.     //两个按钮点击事件
  85.     var as = wrap_slide_arrow.children;
  86.     for(var k in as){
  87.       as[k].onclick = function(){
  88.         if(this.className == "prev"){
  89.           /*alert("左侧按钮");*/
  90.           //所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个
  91.           if(jieliu == true){
  92.             change(false);
  93.             jieliu = false;
  94.           }
  95.         }else if(this.className == "next"){
  96.           /*alert("右侧按钮");*/
  97.           //所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个
  98.           if(jieliu == true){
  99.             change(true);
  100.             jieliu = false;
  101.           }
  102.         }
  103.       }
  104.     }
  105.     function change(flag){
  106.       if(flag){
  107.         //所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个      
  108.         json.unshift(json.pop());
  109.       }else{
  110.         //所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个
  111.         json.push(json.shift());
  112.       }
  113.       for(var k in json){
  114.         animate(lis[k],{
  115.           width: json[k].width,
  116.           top: json[k].top,
  117.           left: json[k].left,
  118.           opacity: json[k].opacity,
  119.           zIndex: json[k].z
  120.         },function(){ jieliu = true;}); //当动画执行完，执行回调函数，此时置节流为true
  121.       }
  122.     }
  123.     var timer = null;
  124.     timer = setInterval(autoPlay,2000);
  125.     function autoPlay(){
  126.       if(jieliu == true){
  127.         change(true);
  128.         jieliu = false;
  129.       }
  130.     }
  131.     js_wrap.onmouseover = function(){
  132.       clearInterval(timer);
  133.       animate(wrap_slide_arrow,{opacity:100});
  134.     }
  135.     js_wrap.onmouseout = function(){
  136.       clearInterval(timer);
  137.       timer = setInterval(autoPlay,2000);
  138.       animate(wrap_slide_arrow,{opacity:0});
  139.     }
  140.     /*js_wrap.onmouseover = function(){
  141.       animate(wrap_slide_arrow,{opacity:100});
  142.     }
  143.     js_wrap.onmouseout = function(){
  144.       animate(wrap_slide_arrow,{opacity:0});
  145.     }*/
  146.   </script>
  147. </body>
  148. </html>

主要css代码：

  1. /*初始化 reset*/
  2. blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
  3. body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
  4. ol,ul{list-style:none}
  5. a{text-decoration:none}
  6. fieldset,img{border:0;vertical-align:top;}
  7. a,input,button,select,textarea{outline:none;}
  8. a,button{cursor:pointer;}
  9. .w-wrap{
  10.   width: 1200px;
  11.   margin: 100px auto;
  12. }
  13. .wrap-slide{
  14.   position: relative;
  15. }
  16. .wrap-slide li{
  17.   position: absolute;
  18.   left: 200px;
  19.   top: 0;
  20. }
  21. .wrap-slide li img{
  22.   width: 100%;
  23. }
  24. .wrap-slide-arrow{
  25.   opacity: 0;
  26.   position: relative;
  27. }
  28. .prev,.next{
  29.   width: 76px;
  30.   height: 112px;
  31.   position: absolute;
  32.   top: 50%;
  33.   margin-top: -56px;
  34.   background: url(../images/prev.png) no-repeat;
  35. }
  36. .next{
  37.   right: 0;
  38.   background: url(../images/next.png) no-repeat;
  39. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！