为了账号安全,请及时绑定邮箱和手机立即绑定

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下载
官方微信

举报

0/150
提交
取消