轮播图方法一

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
   <title>o</title>
   <link rel="stylesheet" type="text/css" href="my.css">
   <style>
       * {
           margin:0;
           padding:0
       }
       #container {
           width:450px;
           height:300px;
           margin-left:535px;
           overflow: hidden;
       }
       .banner-img-ul {
           list-style-type: none;
           width:1800px;

       }
       .banner-img-li {
           float:left;
       }
       img {
           width:450px;
           height:300px;
       }
       #yuan {
           width:160px;
           height:20px;
           background-color:rgb(99,3,18);
           border-radius: 10px;
           text-align: center;
           position:relative;
           left:680px;
           top:-20px;
           opacity:0.4;
       }
       .circle {
           width:16px;
           height:16px;
           background-color:grey;
           border-radius: 8px;
           display:inline-block;
           position: relative;
           top:1px;
       }
       .color {
           background-color: white;
       }
       .btn {
           border:0px;
           width:30px;
           height:30px;
           border-radius:15px;
           color:white;
           font-size:20px;
       }
       .btn1 {
           position:relative;
           left:550px;
           top:-190px;
           opacity:0.6;
       }
       .btn2 {
           position:relative;
           left:900px;
           top:-190px;
           opacity:0.6;
       }
   </style>
   </head>
   <body>
       <div id="container">
           <ul class="banner-img-ul">
               <li class="banner-img-li"><img src="1.jpg"></li>
               <li class="banner-img-li"><img src="2.jpg"></li>
               <li class="banner-img-li"><img src="3.jpg"></li>
               <li class="banner-img-li"><img src="4.jpg"></li>
           </ul>
       </div>
       <div id="yuan">
           <div class="circle color"></div>
           <div class="circle"></div>
           <div class="circle"></div>
           <div class="circle"></div>
       </div>
       <input type="button" value=">" class="btn btn1">
       <input type="button" value="<" class="btn btn2">
   <script src="tools/jquery-2.1.1.min.js" type="text/javascript"></script>
   <script>
           var timer=null;
           //鼠标移入。
           $(".banner-img-ul").on("mouseover",function(){
               window.clearInterval(timer);
           })
           //鼠标移出。
           $(".banner-img-ul").on("mouseout",function(){
               timer=setInterval(function(){
               var l = $(".banner-img-ul").offset().left;
               if(l <= -815 ){
                   $(".banner-img-ul").offset({left:535});
                   circleRun();
               }else{
                   $(".banner-img-ul").offset({left:l-450});
                   circleRun();
               }
       },1000)
           })
           //轮播。
           $(".banner-img-ul").mouseout();
       //右滑动。
           $(".btn2").on("click",function(){
           window.clearInterval(timer);
           var l = $(".banner-img-ul").offset().left;
           if(l < 535 ){
                   $(".banner-img-ul").offset({left:l+450});
                   circleRun();
               }else{
                   $(".banner-img-ul").offset({left:-815});
                   circleRun();
               }
           $(".banner-img-ul").mouseout();
       })
       //左滑动。
       $(".btn1").on("click",function(){
           window.clearInterval(timer);
           var l = $(".banner-img-ul").offset().left;
           if(l <= -815 ){
                   $(".banner-img-ul").offset({left:535});
                   circleRun();
               }else{
                   $(".banner-img-ul").offset({left:l-450});
                   circleRun();
               }
           $(".banner-img-ul").mouseout();
       })
       //小圆点运动起来。
       function circleRun(){
       var l = $(".banner-img-ul").offset().left
       if(l==535){
           $(".circle").eq(0).addClass("color");
           $(".circle").eq(1).removeClass("color");
           $(".circle").eq(2).removeClass("color");
           $(".circle").eq(3).removeClass("color");
       }
       if(l==85){
           $(".circle").eq(1).addClass("color");
           $(".circle").eq(0).removeClass("color");
           $(".circle").eq(2).removeClass("color");
           $(".circle").eq(3).removeClass("color");
       }
       if(l== -365){
           $(".circle").eq(2).addClass("color");
           $(".circle").eq(0).removeClass("color");
           $(".circle").eq(1).removeClass("color");
           $(".circle").eq(3).removeClass("color");
       }
       if(l== -815){
           $(".circle").eq(3).addClass("color");
           $(".circle").eq(0).removeClass("color");
           $(".circle").eq(1).removeClass("color");
           $(".circle").eq(2).removeClass("color");
       }
   }


       // 点击小圆点，对应相对的图。
       $(".circle").on("click",function(){
           window.clearInterval(timer);
           qs();
           $(this).addClass("color");
           for(var j = 0;j < $(".circle").length;j++){
               if($(".circle").eq(j).hasClass("color")){
                   $(".banner-img-ul").offset({left:535-450*j});
               }
           }
           $(".banner-img-ul").mouseout();
           })
       //小圆点全变会灰。
       function qs(){
               $(".circle").eq(0).removeClass("color")
               $(".circle").eq(1).removeClass("color")
               $(".circle").eq(2).removeClass("color")
               $(".circle").eq(3).removeClass("color")
       }

</script>
</body>
</html>

猜你喜欢