亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

JQ輪播圖記錄

標簽:
JQuery
  1. “+=”+offset,原基础上加offset,可以多次点击累加

  2. $().is(":animated")是判断元素是否处于动画状态


<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{margin:0;padding:0;}

#menu{width:600px;

      height:400px;

      border:2px solid red;

      margin:0 auto;

      position:relative;}

#list{width:4200px;

      height:400px;

      position:absolute;}

#list li{float:left;

         list-style-type:none;}

.btm{z-index:2;

     width:50px;

     height:70px;

     line-height:70px;

     color:white;

     font-size:50px;

     text-align:center;

     background:RGBA(0,0,0,.3);

     position:absolute;

     top:150px;

     }    

#prev{left:20px;}   

#next{right:20px;}

#buttom{width:100px;

        height:10px;

        margin:0 auto;

        position:absolute;

        bottom:20px;

        left:250px;

        z-index:2;}

#buttom li{width:10px;

           height:10px;

           border:1px solid red;

           border-radius:5px;

           margin-left:7px;

           float:left;

           list-style-type:none;

           }

.oli{background:red;}

</style>

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.1.10.2.js"></script>

<script>

$(function(){

   var menu=$("#menu"),

       menus=$("#menu li"),

       list=$("#list"),

       prev=$("#prev"),

       next=$("#next"),

       buttoms=$("#buttom li"),

       timed,

       index=0;

             


  prev.click(function(){

                         if(list.is(":animated"))

                          {

                            return;

                          }

                         animate(600);

                          if(index==0)

                           {

                             index=4;

                            }

                            else

                            {

                             index-=1;

                             }

                           Buttom();

                        });

  next.click(function(){

                           if(list.is(":animated"))

                          {

                            return;

                          }

                          if(index==4)

                           {

                             index=0;

                            }

                            else

                            {

                             index+=1;

                             }

                           Buttom();

                          animate(-600);

                       });


//图片的移动和动画移动

   function animate(offset)

    {  flag=false;

         var newleft=parseInt(list.css("left"))+offset;

             //在JQ中"+="表示通过不断和自身相加,offset="+=offset"

             //这里的offset就是可以变化的,每次都会相加自身的本来的值

           list.animate({"left":"+="+offset},300,function(){

                                                         if(newleft>-600)

                                                               {

                                                                    list.css("left",-3000);

                                                                }

                                                          if(newleft<-3000)

                                                                {

                                                                    list.css("left",-600);

                                                                 }

                                                       });

      }


//小圆点的移动

    function Buttom()

        {

           buttoms.eq(index).addClass("oli").siblings().removeClass("oli");   

         }


//小圆点的点击移动

  buttoms.click(function(){

        var newindex=$(this).index();  //寻找点击圆点的下标

        var speed=-600*(newindex-index);

         index=newindex;  

           animate(speed);

           Buttom();

                          });


//图片的自动移动

      function play()

        {

          timed=setInterval(function(){next.click()},2000);  //JQ中和JS的用法一致

        }

     play();  


  //图片的暂停

      menus.mouseover(function(){

            clearInterval(timed);

                                });

      menus.mouseout(function(){

            play();

                               });

})           

</script>

</head>

<body>

<div id="menu">

    <ul id="list" style="left:-600px">

      <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="5.jpg"/></li>

      <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"/></li>

      <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="2.jpg"/></li>

      <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="3.jpg"/></li>

      <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="4.jpg"/></li>

      <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="5.jpg"/></li>

      <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"/></li>

    </ul>

 <div id="prev" class="btm"><</div>

 <div id="next" class="btm">></div>

    <ul id="buttom">

      <li class="oli"></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

    </ul>

</div>

</body>

</html>


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 1
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消