依賴jQuery的無縫切換

時間 2019-12-25

原文原文鏈接

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           *{
               padding: 0;
               margin: 0;
               list-style: none;
           }
           .box{
               width: 300px;
               height: 200px;
               margin: 100px auto;
               overflow: hidden;
               position: relative;
           }
           .box .list{
               height: 200px;
               width: 2100px;
               position: absolute;
           }
           .box .list img{
               width: 300px;
               height: 200px;
               border: none;
               float: left;
           }
           .btn{
               position: absolute;
               bottom: 10px;
               left: 50%;
               margin-left: -75px;
               height: 15px;
               width: 150px;

           }
           .btn li{
               font: 12px/15px "微軟雅黑";
               color: #fff;
               float: left;
               width: 15px;
               height: 15px;
               text-align: center;
               margin-left: 10px;
               border-radius: 50%;
               background: rgba(0,0,0,0.6);
               cursor: pointer;
           }
           .btn .on{
               background: orange;
           }
           a{
               display: block;
               width: 30px;
               height: 30px;
               position: absolute;
               top: 50%;
               margin-top: -15px;
               font: 14px/30px "微軟雅黑";
               color: #fff;
               text-align: center;
               text-decoration: none;
           }
           .box .prve{
               left: 0;
           }
           .box .next{
               right: 0;
           }
       </style>
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   </head>
   <body>
       <div class="box">
           <div class="list" style="left: 0px;">
               <img src="images/4.jpg" alt="" />
               <img src="images/0.jpg" alt="" />
               <img src="images/1.jpg" alt="" />
               <img src="images/2.jpg" alt="" />
               <img src="images/3.jpg" alt="" />
               <img src="images/4.jpg" alt="" />
               <img src="images/0.jpg" alt="" />
           </div>
           <ul class="btn">
               <li class="on">1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
           </ul>
           <a class="prve" href="javascript:;">上</a>
           <a class="next" href="javascript:;">下</a>
       </div>
   </body>
   <script type="text/javascript">
       var list = $('.list');
       var box = $('.box');
       var btn = $('.btn');
       var bs = btn.find('li');
       var n = 0;
       var prve = $('.prve');
       var next = $('.next');
       //上一頁
       prve.click(function(){
           n--;
           if(n<1){
               n=5;
               bs.eq(5).addClass('on').siblings().removeClass('on');
               list.css({
                   marginLeft: -1800
               },200);
           }
           main(n,n);
       });
       //下一頁，用於改變圖片和顯示按鈕
       next.click(function(){
           move();
       });
       //主函數
       function main(e,x){
           list.stop().animate({
               marginLeft:-e*300
           },200);
           bs.eq(x-1).addClass('on').siblings().removeClass('on');
       }
       timer = setInterval(move,2000);
       //鼠標移入移出關閉定時器,開啓定時器
       box.hover(function(){
           clearInterval(timer);
       },function(){
           timer = setInterval(move,2000);
       });
       //點擊按鈕
       btn.on('click','li',function(){
           var index = $(this).index();
           if(index==5){
               bs.eq(6).addClass('on').siblings().removeClass('on');
           }else{
               bs.eq(index).addClass('on').siblings().removeClass('on');
           }
           main(index+1);
           n = index;
       });
       //計算
       function move(){
           n++;
           if(n == 6){
               bs.eq(0).addClass('on').siblings().removeClass('on');
           }
           if(n>6){
               n =2;
               list.css({
                   marginLeft: -300
               },200);
               bs.eq(1).addClass('on').siblings().removeClass('on');
           }
           main(n,n);
       }
   </script>
</html>
javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。