jQuery实现轮播图效果

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_33827590

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量86

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/1067377855/blog/411274

版权

2019独角兽企业重金招聘Python工程师标准>>>

html部分

<div class="div1">
 <ul class="ul1">
     <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
        <li>4444444444</li>
        <li>5555555555</li>
    </ul>
</div>
<div>
 <input id="btn1" type="button" value="←">
 <input id="btn2" type="button" value="→">
</div>

css部分

* { margin:0; padding:0;}
body { text-align:center;}
.div1 { overflow:hidden; width:350px; height:160px; margin:0 auto; border:3px solid #f00; position:relative;}
.ul1 { position:absolute; left:0; top:0;}
.ul1 li { width:100px; height:150px; float:left; list-style:none;}

jQuery部分

$(function(){
 //复制ul里面的li
 $('.ul1 li').clone().appendTo('.ul1');
 
 var iNum = 0;
 var liWidth = $('.ul1 li').width();
 var liLength = $('.ul1 li').length;
 
 $('.ul1').width(liWidth*liLength);
 
 $('#btn1').click(function(){
  if(iNum==liLength/2){
   iNum = 0;
   $('.ul1').css('left','0');
  };
  iNum++;
  $('.ul1').animate({left:-iNum*liWidth});
 });
 
 $('#btn2').click(function(){
  if(iNum==0){
   iNum = liLength/2;
   $('.ul1').css('left',-iNum*liWidth);
  }
  iNum--;
  $('.ul1').animate({left:-iNum*liWidth});
 });
});

转载于:https://my.oschina.net/1067377855/blog/411274