JS如何实现图片滑动？

 我来答

5个回答

匿名用户
2013-04-01

展开全部

已赞过 已踩过<

评论收起

番豆穷游
2018-04-02 · 实在不行，重启一下！

番豆穷游

采纳数：78 获赞数：178

向TA提问私信TA

关注

展开全部

<!doctype html>
<html>
<head>
<meta charset=utf-8" />
<title>js图片滑动案例</title>
<style type="text/css">
*{ padding:0; margin:0; list-style:none; border:0;}
.all{
  width:500px;
  height:200px;
  padding:7px;
  border:1px solid #ccc;
  margin:100px auto;
  position:relative;
}
.screen{
	width:500px;
	height:200px;
	 overflow:hidden; 
	position:relative;
}

.screen li{ width:500px; height:200px; overflow:hidden; float:left;}
.screen ul{ position:absolute; left:0; top:0px; width:3000px;}
.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
.all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}
.all ol li.current{ background:yellow;}

</style>
<script type="text/javascript">
    function animate(obj,target){
        clearInterval(obj.timer);  // 先清除定时器
        var speed = obj.offsetLeft < target ? 15 : -15;  // 用来判断 应该 +  还是 -
        obj.timer = setInterval(function() {
            var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
            obj.style.left = obj.offsetLeft + speed + "px";
            if(Math.abs(result)<=15)  // 如果差值不小于 5 说明到位置了
            {
                clearInterval(obj.timer);
                obj.style.left = target + "px";  // 有5像素差距   我们直接跳转目标位置
            }
        },10)
    }
    window.onload = function() {
       // 获取元素
        var box = document.getElementById("all");  // 大盒子
        var ul = document.getElementById("ul");
        var ulLis = ul.children;

       // 操作元素

       // 因为我们要做无缝滚动  ，所以要克隆第一张，放到最后一张后面去
       // a.appendchild(b)   把 b 放到 a 的最后面
        // 1. 克隆完毕
        ul.appendChild(ul.children[0].cloneNode(true));

        // 2. 创建 ol  和  小 li
        console.log(ulLis.length);
        var ol = document.createElement("ol");  // 生成的是ol
        box.appendChild(ol); // 把ol 追加到  box 里面
        for(var i=0;i<ulLis.length-1;i++)
        {
            var li = document.createElement("li");
            li.innerHTML = i + 1;  //  给里面小的li 文字  1 2 3 4 5
            ol.appendChild(li);  // 添加到 ol 里面
        }
        ol.children[0].className = "current";

        //3. 开始动画部分
        var olLis = ol.children;
         for(var i=0; i<olLis.length;i++)
         {
             olLis[i].index = i;  // 获得当前第几个小li 的索引号
             olLis[i].onmouseover = function() {
                 for(var j=0;j<olLis.length;j++)
                 {
                     olLis[j].className = "";  // 所有的都要清空
                 }
                 this.className = "current";
                 animate(ul,-this.index*500)
                 // 调用动画函数  第一个参数  谁动画     第二个  走多少
                 square = key = this.index;  // 当前的索引号为主
             }
         }
         //  4. 添加定时器
        var timer = null;   // 轮播图的定时器
        var key = 0;  //控制播放张数
        var square = 0; // 控制小方块
          timer = setInterval(autoplay,1000);  // 开始轮播图定时器
          function autoplay() {
              key++;  // 先 ++
              if(key>ulLis.length - 1)  // 后判断
              {
                  ul.style.left = 0;  // 迅速调回
                  key = 1;  // 因为第6张就是第一张  第6张播放 下次播放第2张
              }
              animate(ul,-key*500);  // 再执行
              // 小方块
              square++;
              if(square > olLis.length -1)
              {
                  square = 0;
              }
              for(var i=0;i<olLis.length;i++)   // 先清除所有的
              {
                  olLis[i].className = "";
              }
              olLis[square].className = "current";  // 留下当前的
          }
          //last最后  鼠标经过大盒子要停止定时器
         box.onmouseover = function() {
             clearInterval(timer);
         }
         box.onmouseout = function() {
             timer = setInterval(autoplay,1000);  // 开始轮播图定时器
         }
    }
</script>

</head>

<body>
<div class="all" id='all'>
	<div class="screen">
        <ul id="ul">
            <li><img src="images/1.jpg" width="500" height="200" /></li>
            <li><img src="images/2.jpg" width="500" height="200" /></li>
            <li><img src="images/3.jpg" width="500" height="200" /></li>
            <li><img src="images/4.jpg" width="500" height="200" /></li>
            <li><img src="images/5.jpg" width="500" height="200" /></li>
        </ul>
    </div>

</div>
</body>
</html>

以上是刚刚用原生js写的，希望对你有所帮助，用插件（如jquery等）写的话更简单

如果还有不懂的地方，可加我，直接联系我

要马上看一下效果的话，直接替换代码最下面的那些图片路径即可！

望采纳！

已赞过 已踩过<

评论收起

yugi111
2014-11-21 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

已赞过 已踩过<

评论收起

瑕不掩瑜XXY
2013-04-03 · TA获得超过110个赞

知道答主

回答量：140

采纳率：100%

帮助的人：47.1万

我也去答题访问个人页

关注

展开全部

懒人图库也许有

已赞过 已踩过<

评论收起

tongue14
2018-03-30 · TA获得超过393个赞

知道小有建树答主

回答量：508

采纳率：30%

帮助的人：139万

我也去答题访问个人页

关注

展开全部

完成心愿后，褚生转世投胎，成为吕老先生之子，以身报师，以魂报友。

已赞过 已踩过<

评论收起

2条折叠回答

更多回答（3）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS如何实现图片滑动？

其他类似问题

为你推荐：