jquery图片滑动

最新推荐文章于 2022-11-06 22:04:49 发布

youcelebwill

最新推荐文章于 2022-11-06 22:04:49 发布

阅读量272

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/youcelebwill/article/details/39997687

版权

<html>
   <header>
       <title>JQUERY图片滑动</title>
       <script src="jquery.min.js"></script>
   <header>
   <body>
       <style>
           ul{
               list-style:none;
               margin:0px;
               padding:0px;
           }
           ul li{
               list-style:none;
               float:left;
           }

           .imgSilder{
               overflow:hidden;
           }
       </style>
       <div class="imgSilder" style="margin:0 auto; position:relative; ">
           <ul style="position:relative; width:2000px">
               <li>
                   <img src="image/1.jpg"/>
               </li>
               <li>
                   <img src="image/2.jpg"/>
               </li>
               <li>
                   <img src="image/3.jpg"/>
               </li>
               <li>
                   <img src="image/5.jpg"/>
               </li>
           </ul>

       </div>

       <div id="scrollNum" style="text-align:center">

       </div>

       <script>
           var imgWidth = 332;
           var diaplayNum = 2;
           var imgNum = 4;
           var imgMargin = 2;
           var imgHeight = 221;
           var i = 0;
           var speed = 5000

           $(document).ready(function(){
               var boxWidth = imgWidth*diaplayNum + (diaplayNum-1)*imgMargin;//宽度
               var boxHeight = imgHeight;//高度
               var ulWidth = imgNum*imgWidth+imgNum*imgMargin;//UL宽度
               $(".imgSilder").css({width:boxWidth,height:boxHeight,margin:"0 auto"});
               $(".imgSilder li").css("margin-right",imgMargin);
               $(".imgSilder ul li").css("float","left");
               $(".imgSilder ul").css("width",ulWidth);
               var t = setInterval("scrollLeft()",speed);

               $(".imgSilder ul li").mouseover(function(){
                   clearInterval(t);
               });

               $(".imgSilder ul li").mouseout(function(){
                   t = setInterval("scrollLeft()",speed);
               });
               var numLi = '';
               for(var i=1;i<=imgNum-diaplayNum+1;i++){
                   numLi += '<a style="padding:5px 8px;background:#a0aed5;margin:3px">'+i+'</a>';
               }
               $("#scrollNum").css({width:boxWidth,margin:"0 auto",padding:"18px"});

               $("#scrollNum").html(numLi);

               $("#scrollNum a:eq(0)").css("background","#e1d68e");

               $("#scrollNum a").mouseover(function(){

                   var a = parseInt($(this).html())-1;

                   console.log(a);

                   scrollLeft(a);

                   clearInterval(t);

                   $(this).css("background","#e1d68e").siblings().css("background","#a0aed5");

                   i = a;

               });

               $("#scrollNum a").mouseout(function(){
                   t = setInterval("scrollLeft()",speed);
               });
           });

           function scrollLeft(a){
               i++;

               if(a || a == 0){
                   i = a;
               }

               console.log(a);

               var left = i*(imgWidth+imgMargin);

               $("#scrollNum a:eq("+i+")").css("background","#e1d68e").siblings().css("background","#a0aed5");

               if(i>imgNum-diaplayNum){
                   $(".imgSilder ul").animate({left:0});
                   $("#scrollNum a:eq("+0+")").css("background","#e1d68e").siblings().css("background","#a0aed5");
                   i=0;
               }else{
                   $("#scrollNum a:eq("+i+")").css("background","#e1d68e").siblings().css("background","#a0aed5");
                   $(".imgSilder ul").animate({left:-left});
               }
           }
       </script>

   </body>
</html>