亲宝软件园·资讯

展开

js实现从右往左匀速显示图片(无缝轮播)

dongsdh 人气:2

本文着重为大家仔细讲解了js实现从右往左匀速显示图片,无缝轮播,文中代码实例讲解的非常细致,希望能够帮助到您,欢迎大家阅读和收藏

前言:

匀速显示图片,一般用于重复显示公司活动系列图片

背景图片:

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8" />
 <style type="text/css">
 *{
  margin: 0;
  padding: 0;
 }
   .sider{
    height: 300px;
   background: url(zbg.png)no-repeat;
   background-size: 100% 100%;
   box-sizing: border-box;
   position: relative;
   overflow: hidden;
   }
   .box{
    position: absolute;
    top: 48px;
    left: 0;
    height: 300px;
    width: 10000px;
   }
   .uls,.uls2{
    display: inline-block;
   }
   .uls li,.uls2 li{
    display: inline-block;
    width: 320px;
    height: 206px;
    margin-right: 10px;
    background: red;
   }
   .uls li img,.uls2 li img{
    width: 100%;
    height: 100%;
   }
 </style>
</head>
<body>
 <div class="sider">
 <div class="box">
  <ul class="uls">
  <li>这是图片1</li><li>
  这是图片2</li><li>
  这是图片3</li><li>
  这是图片4</li><li>
  这是图片5</li><li>
  这是图片6</li>
  </ul><ul class="uls2"><ul>
 </div>
 </div>
  <script src="jquery.min.js"></script>
  <script>
   $(function(){
   var i=0;
   var sizess = $(".uls li").length;
   var sizesspx = sizess*330;
   var clone = $(".uls").html();
   $(".uls2").html(clone);
   var t=setInterval(moveL,30);
   
//  封装的动画函数
   function moveL(){
    i++;
    var sizess = $(".uls li").length;
    if(i>sizesspx){
    $(".box").css({left:0});
    i=0
    }
    $(".box").css({left:-i+'px'});
   }
   })
  </script>
</body>
</html>

运行效果:

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家学习Jquery程序设计有所帮助。

加载全部内容

相关教程
猜你喜欢
用户评论