轮播图

您所在的位置：网站首页 › js轮播效果 › 轮播图

轮播图

2023-04-05 10:16| 来源: 网络整理| 查看: 265

纯js实现：

要求：算了，还是先看图吧

01.gif

实现效果：图片自动轮播，鼠标移入停止，移出继续轮播点击左右按钮实现切换点击下标焦点实现切换

1、首先实现无缝滚动：效果：

02.gif

原理：让ul里的第一个 li 和最后一个 li 内容相同；通过改变left值，让ul在box中移动；当移动到最后一个的时候，在让ul回到其实位置；

屏幕快照 2016-11-30 下午4.49.26.png

代码实现：

无缝滚动 *{ margin: 0; padding: 0; } .box{ background: red; width: 600px; height: 300px; overflow: hidden; margin:100px auto; position: relative; } img{ width: 600px; height: 300px; vertical-align: top;/*取消底边的3px */ } ul{ width: 500%; height: 300px; list-style: none; position: absolute; left: 0; top: 0; } li{ float: left; } 1 2 3 4 5 var oBox = document.getElementById("box"); var oUl = document.getElementById("inner-box"); var a = 0; //定义一个变量用于设置left值 var timer = null; //定义一个计时器 var target = 500; timer = setInterval(autoPlay,10);// 定义计时器每25毫秒执行一次 function autoPlay() { //执行每次执行函数，left值减1 a--; a

【本文地址】

轮播图

轮播图

今日新闻

推荐新闻