JavaScript-jquery图片滚动，3张图展示完以后，再次轮番展示的时候，第一张图不能像其他图一样从右往左走。

发布于 2016-12-10 22:31:52 字数 3314 浏览 1530 评论 1

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title></title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
  *{padding: 0;margin: 0}
  ul{ list-style: none;}
.out{min-width:960px;height:395px;position:relative;
-width:expression(document.documentElemen.clientWidth<960?960:document.documentElement.clientWidth);
overflow: hidden;}
  .box{width:10000px;height: 395px;position: absolute;}
  .box .img{float: left;width: 1600px;height: 395px}
  .box .img a{display: block;width: 100%;height: 100%; float: left;
   }
  .img1{background: url(http://cca.mbaobao.com/mkts/201305/07/new/1600-395.jpg) no-repeat}
  .img2{background: url(http://cca.mbaobao.com/mkts/201305/07/new/1600-395.jpg) no-repeat}
  .img3{background: url(http://cca.mbaobao.com/mkts/201305/07/new/1600-395.jpg) no-repeat}
  
.btn{width: 250px;height:30px;
  position: absolute;top:350px; left: 50px}
  .btn li{float: left;width: 25px;height: 25px;line-height: 25px; background: #aaa;
    color: #fff; text-align: center;}
    .btn li.on{background: red}
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 </head>

 <body>
         <div class="out">
          <ul class="box">
            <li class="img"><a href="" class="img1"></a></li>

            <li class="img"><a href="" class="img2"></a></li>

            <li class="img"><a href="" class="img3"></a></li>
          </ul>
          <ul class="btn">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
          </ul>
         </div>

         <script type="text/javascript">
          $(function(){

          function reset(){
            //ÉèÖÃÍ¼Æ¬¿í¶È
            $('.img').css('width',function(){
              return $(window).width();
            })

            $('.box').css('width',function(){
              return $(window).width()*$('.img').length
            })

            $('.img a').css('background-position',function(){
             return -(1600-$(window).width())/2
            })

          };
            reset();

            $(window).resize(function(){
              if($(window).width()>960){
                resets();
              }
                
            })
             // 重点区域部分开始
            var num=0;
            var t=setInterval(function(){
              num++;
              if (num==$('.img').length) {
                num=0;
              };
              $('.box').animate(
                {left: -num*$('.img').outerWidth()},1000)
            },2000)

          })
         </script>
 </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

想挽留 2017-05-30 10:27:56

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{padding: 0;margin: 0}
ul{ list-style: none;}
.out{min-width:960px;height:395px;position:relative;
-width:expression(document.documentElemen.clientWidth<960?960:document.documentElement.clientWidth);
overflow: hidden;}
.box{width:10000px;height: 395px;position: absolute;}
.box .img{float: left;width: 1600px;height: 395px}
.box .img a{display: block;width: 100%;height: 100%; float: left;
}
.img1{background: url(http://cca.mbaobao.com/mkts/201305/07/new/1600-395.jpg) no-repeat}
.img2{background: url(http://cca.mbaobao.com/mkts/201212/10/shuangjianbao.jpg) no-repeat}
.img3{background: url(http://cca.mbaobao.com/mkts/201305/13/1600-395-bing.jpg) no-repeat}

.btn{width: 250px;height:30px;
position: absolute;top:350px; left: 50px}
.btn li{float: left;width: 25px;height: 25px;line-height: 25px; background: #aaa;
color: #fff; text-align: center;}
.btn li.on{background: red}
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>

function reset(){
//
$('.img').css('width',function(){
return $(window).width();
})

$('.box').css('width',function(){
return $(window).width()*$('.img').length
})

$('.img a').css('background-position',function(){
return -(1600-$(window).width())/2
})

};
reset();

$(window).resize(function(){
if($(window).width()>960){
resets();
}

})
// 重点区域部分开始
// var num=0;
// var t=setInterval(function(){
// num++;
// if (num==$('.img').length) {
// num=0;
// };
// $('.box').animate(
// {left: -num*$('.img').outerWidth()},1000)
// },2000)
var box = $('.box');
var num = 0;
$('body').delegate('.box', 'box-animate', function () {
box.animate(
{left: -1*$('.img').outerWidth()},
1000,
'linear',
function() {
num = ++num % $('.img').length;
$('.btn li').removeClass('on');
$('.btn li').eq(num).addClass('on');
box.find('.img:first').appendTo(box);
box.css({left: 0})
setTimeout(function(){box.trigger('box-animate')}, 2000);
}
)
});
box.trigger('box-animate');
})
</script>
</body>
</html>