jQuery实现轮播图

最新推荐文章于 2023-09-14 18:36:20 发布

sanliu1432

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量410

点赞数

本文链接：https://blog.csdn.net/sanliu1432/article/details/123239285

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #d1{
               width: 1000px;
               height: 500px;
               position: relative;
               border: 1px white solid;
               left: 300px;
               top: 10px;
           }
           #d2{
               width: 300px;
               height: 200px;
               border: 1px black solid;
               position: absolute;
               left: 600px;
               top: 100px;
               overflow: hidden;
           }
           #d3{
               position: absolute;
               display: flex;
           }
           #d3>div{
               width: 300px;
               height: 200px;
           }
           #b4,#b5{
               position: relative;
               top: 300px;
               left: 600px;
           }
           #d4{
               border: 1px white none;
               width: 100px;
               height: 20px;
               position: relative;
               top: 250px;
               left: 715px;
           }
           #d4>button{
               width: 15px;
               height: 15px;
               position: relative;
               left: 1px;
               border-radius: 50% 50% 50% 50%;
           }
       </style>
   </head>
   <body>
       <div id="d1">
           <div id="d2">
               <div id="d3">
                   <div style="background-color: red;">
                       <img src="img/1.jpg"/>
                   </div>
                   <div style="background-color: blue;">
                       <img src="img/2.jpg"/>
                   </div>
                   <div style="background-color: green;">
                       <img src="img/3.jpg"/>
                   </div>
                   <div style="background-color: yellow;">
                       <img src="img/4.png"/>
                   </div>
                   <div style="background-color: red;">
                       <img src="img/1.jpg"/>
                   </div>
               </div>
           </div>
           <button id="b4">上一页</button>
           <button id="b5">下一页</button>
           <div id="d4">
               <button></button>
               <button></button>
               <button></button>
               <button></button>
           </div>
       </div>
   </body>
   <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
   <script type="text/javascript">
       function changeColor(){
           $("#d4>button").css("background-color","white");
           $("#d4>button").eq(count-1).css("background-color","yellow");
       }
       function changeTime(){
           tim= 50;
           fCt();
           tim= 1000;
           myTime= setInterval(fCt,2000);
       }
       var fCt=function def(){
           $("#d3").animate({"left": -300*count+ "px"},tim);
           if(count== 4){
               $("#d3").animate({"left": 0+ "px"},0);
               count= 1;
           }
           else{
               count++;
           }
           changeColor();
       }
       var count= 1;
       var tim= 1000;
       $("#d4>button").eq(count-1).css("background-color","yellow");
       var myTime= setInterval(fCt,2000);
       $("#b4").bind("click",function (){
           clearInterval(myTime);
           if(count>1){
               count= count- 2;
           }
           else{
               count= 3;
           }
           changeTime();
           changeColor();
       });
       $("#b5").bind("click",function (){
           clearInterval(myTime);
           changeTime();
           changeColor();
       });
       $("#d4>button").bind("click",function (){
           clearInterval(myTime);
           count= $(this).index();
           console.log(count);
           changeTime();
           changeColor();
       });
   </script>
</html>