手写无缝滚动轮播图

最新推荐文章于 2024-04-30 16:42:28 发布

web加加

最新推荐文章于 2024-04-30 16:42:28 发布

阅读量880

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38892819/article/details/72712875

版权

javascript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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;
}

#arr {
display: none;
}

#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}

#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<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>
<ol></ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
var timer = null;
//找人
var box = document.getElementById("box");
var arr = document.getElementById("arr");
var left = document.getElementById("left");
var right = document.getElementById("right");
var screen = box.children[0];
var ul = screen.children[0];
var ulLis = ul.children;//所有广告
var ol = screen.children[1];
var imgWidth = screen.offsetWidth;//图片的宽度
//1.动态生成结构
//1.1动态生成按钮
for (var i = 0; i < ulLis.length; i++) {
var li = document.createElement("li");
li.innerHTML = i + 1;
ol.appendChild(li);
}
var olLis = ol.children;//所有按钮
olLis[0].className = "current";//给第一个按钮加高亮
//1.2动态添加假的第一张
var firstImg = ulLis[0].cloneNode(true);//克隆最开始的广告
ul.appendChild(firstImg);
//2.鼠标经过按钮
//鼠标经过按钮把ul移动到指定位置（动画效果）
//2.1给每一个按钮注册鼠标经过事件鼠标经过当前按钮当前按钮高亮
for (var i = 0; i < olLis.length; i++) {
olLis[i].index = i;
olLis[i].onmouseover = function () {

//排他
//干掉所有人
for (var j = 0; j < olLis.length; j++) {
olLis[j].className = "";
}
//留下我自己
this.className = "current";
//2.2用动画效果把ul移动到指定位置
//目标和当前按钮的索引有关和图片的宽度有关而且是负数
var target = -this.index * imgWidth;
animate(ul, target);
//pic = this.index;//把记录当前显示的图片的索引的pic 变为当前经过的按钮的索引
//square = this.index;//把记录当前高亮的按钮的索引的square 变为当前经过的按钮的索引
pic = square = this.index;
};
}
//3.鼠标点击箭头
//3.1鼠标经过box显示箭头鼠标离开隐藏
box.onmouseover = function () {
//鼠标经过盒子后除了要显示箭头还要清除自动播放的定时器
arr.style.display = "block";
clearInterval(timer);
};
box.onmouseout = function () {
arr.style.display = "none";
//离开后还要继续自动播放
timer = setInterval(function () {
right.onclick();//自己去调用右箭头点击的方法
}, 1000);
};
//鼠标点击右箭头播放下一张图片
var pic = 0;//记录当前显示图片的索引
var square = 0;//记录当前亮起的按钮的索引
right.onclick = function () {
//先判断如果是最后一张图片的索引
//就要瞬间从假的第一张跳到真的第一张然后从真的第一张渐渐地移动到第二张
if (pic === ulLis.length - 1) {
ul.style.left = 0 + "px";//瞬间跳回真的第一张
pic = 0;//让记录当前显示的图片的索引也归零
}
pic++;//计算出接下来要显示的图片的索引
//目标和pic有关和图片宽度有关而且是负数
var target = -pic * imgWidth;
animate(ul, target);
//按钮也要跟着亮起
if (square < olLis.length - 1) {//如果当前亮起的按钮的索引在最后一个按钮之前就可以加
square++;//计算出接下来要亮起的按钮的索引
} else {
square = 0;//到了最后就要回到0
}
//排他
//干掉所有人
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
//留下对应的
olLis[square].className = "current";
};
left.onclick = function () {
//先判断如果是最开始的图片的索引
//就要瞬间从真的第一张跳到假的第一张然后从假的第一张渐渐地移动前面的图片
if (pic === 0) {
ul.style.left = -(ulLis.length - 1) * imgWidth + "px";//瞬间跳到假的第一张
pic = ulLis.length - 1;//让记录当前显示的图片的索引跳到最后
}
pic--;//计算出接下来要显示的图片的索引
//目标和pic有关和图片宽度有关而且是负数
var target = -pic * imgWidth;
animate(ul, target);
//按钮也要跟着亮起
if (square > 0) {//如果当前亮起的按钮的索引比0大就可以减
square--;//计算出接下来要亮起的按钮的索引
} else {
square = olLis.length - 1;//到了最开始就要跑到最后一个按钮的索引
}
//排他
//干掉所有人
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
//留下对应的
olLis[square].className = "current";
};
//4.添加自动滚动
//每个一秒钟播放下一张
timer = setInterval(function () {
right.onclick();//自己去调用右箭头点击的方法
}, 1000);

function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var leader = obj.offsetLeft;
var step = 30;
step = target > leader ? step : -step;
if (Math.abs(leader - target) >= Math.abs(step)) {
leader = leader + step;
obj.style.left = leader + "px";
} else {
clearInterval(obj.timer);
obj.style.left = target + "px";
}
}, 15);
}

</script>
</body>
</html>