js实现轮播图功能

最新推荐文章于 2024-04-13 17:28:35 发布

QQ:3083155908

最新推荐文章于 2024-04-13 17:28:35 发布

阅读量435

点赞数

分类专栏：前端文章标签： js实现轮播图

本文链接：https://blog.csdn.net/xiao297328/article/details/100099652

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>路人女主无缝轮播图片</title>
</head>

<body>
<div class="box" id="box">
<ul>
<li><img src="images/xia1.png"></li>
<li><img src="images/xia2.png"></li>
<li><img src="images/xia3.png"></li>
<li><img src="images/xia4.png"></li>
<li><img src="images/xia5.png"></li>
<li><img src="images/xia6.png"></li>
<li><img src="images/xia7.png"></li>
<li><img src="images/xia8.png"></li>
</ul>
<ol>
</ol>
</div>
<div class="content">
<p>1.鼠标离开图片开始自动轮播，鼠标放在图片上停止自动轮播。</p>
<p>2.通过小圆圈可以控制要显示的图片</p>
</div>
</body>

</html>

.box {
width: 1280px;
height: 720px;
margin: 50px auto;
position: relative;
overflow: hidden;
}

.box ul {
width: 900%;
position: absolute;
top: 0;
left: 0;
}

.box li {
list-style: none;
vertical-align: top;
float: left;
}

.box ol {
list-style: none;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: 0;
}

.box ol li {
width: 30px;
height: 30px;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #fff;
line-height: 30px;
text-align: center;
margin-left: 10px;
cursor: pointer;
}

.box ol li.current {
background-color: #ff0;
}
.content {
   width: 1280px;
   margin: 0 auto;
   text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById("box");
var ul = box.children[0];
var ol = box.children[1];
var ulLis = ul.children;
//1.封装轮播函数
function animate(obj, target) { // 第一个参数要运动的盒子第二个参数要位移的距离
clearInterval(obj.timer); //运行计时器先停止计时器
var speed = obj.offsetLeft > target ? -1280 : 1280; //计算步长与位移方向
obj.timer = setInterval(function() { // obj.timer 为全局变量
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + speed + "px";
}
}, 30)
}
//封装轮播函数

//2.复制第一张图做无缝轮播克隆节点 lis[0].cloneNode(true); true 深克隆
ul.appendChild(ulLis[0].cloneNode(true)); // 向父节点追加子节点复制完成
//3.动态生成ol里的li
for (i = 0; i < ulLis.length-1; i++) { //利用for循环来添加li 因为之前克隆了一个节点所以长度减一
var li = document.createElement("li"); //创建节点 li
li.innerHTML = i + 1; //创建节点li 的内容
ol.appendChild(li); // ol 插入 li
}
ol.style.marginLeft = -ol.offsetWidth/2 + "px"; //ol动态居中
//4.ol li的动画部分
var olLis = ol.children;
olLis[0].className = "current";
for (var i = 0; i < olLis.length; i++) {
   olLis[i].index = i; // 赋予索引号
   olLis[i].onmouseover = function () {
       for (var j = 0; j < olLis.length; j++) { //清除所以li的class
           olLis[j].className = "";
       }
       this.className = "current"; //利用this 修改调用函数的li的类名
       animate(ul,-this.index*box.offsetWidth);//利用this.index调用索引号
       key = square = this.index; //鼠标经过ol li时统一控制轮播的值
   }
}
//5.自动轮播部分 autoplay 图片和ol li一起自动轮播
var timer = null; //全局定义计时器
var key = 0; // 利用key值控制自动轮播 key=位移了几张图片
var square = 0; //利用square控制ol li自动轮播
timer = setInterval(autoplay,2000); //定义autoplay函数方便调用
//5.1图片自动轮播部分
function autoplay () {
   key++; //key=ulLis.length-1时，已经轮播到最后一张图即为第一张图此时square = 0
   if (key>=ulLis.length) { //key=ulLis.length时，
       key = 1; //应该从第一张图轮播到第二张图所以令 key = 1
       ul.style.left = 0; //图片从最右拉到最左
   }
   animate(ul,-key*box.offsetWidth);
//5.2ol li自动轮播部分
   square++;
   square = square >= olLis.length ? 0:square;
   for (var i = 0; i < olLis.length; i++) {
       olLis[i].className = ""
   }
   olLis[square].className = "current";
}
//6.鼠标经过box盒子时，停止自动轮班。鼠标离开时开启自动轮播
box.onmouseover = function () {
   clearInterval(timer);
}
box.onmouseout = function () {
   timer = setInterval(autoplay,2000); //调用autoplay函数
}
}
</script>

运行效果：

QQ:3083155908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现轮播图功能

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路人女主无缝轮播图片</title></head><body> <div class="box" id="box"&...
复制链接

扫一扫