版权声明：转载声明原作者及链接 https://blog.csdn.net/ICY___/article/details/86601523
前面已经介绍了两种常见的图片轮播样式，今天将介绍一种更为常见的图片轮播形式，和淘宝的功能样式类似，这三种轮播基本上涵盖了常见网站图片轮播的所有类型，难度的话，个人认为淡入淡出是比较难的，但只要用心，仔细的体会核心思想，一步步来，相信还是可以很好地掌握的！
<!DOCTYPE html>
<html lang="en">
<!-- 主要思想 结合无缝轮播，使得图片可以完成循环，利用计时器，切换页面，其中，切换的核心思想为margin值
的固定变化来实现图片的张张切换 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片轮播</title>
<!-- 利用margin-left的值的操作来实现图片的滚动 而不是之前的滚动条移动左边距 -->
<style>
.all {
width: 700px;
height: 400px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.block {
width: 700px;
height: 400px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.block>div:nth-child(1) {
width: 4900px;
height: 400px;
margin-left: 0px;
}
.block>div>img {
float: left;
width: 700px;
height: 400px;
}
.nowpage {
transition: margin-left 0.5s ease-in-out;
}
.point {
position: absolute;
width: 108px;
height: 15px;
bottom: 20px;
left: 296px;
}
.point>div {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: white;
float: left;
margin: 0 2px;
border: 2px solid black;
box-sizing: border-box;
}
.btn_left {
width: 20px;
height: 40px;
background-color: rgba(158, 155, 155, 0.301);
position: absolute;
z-index: 9999;
left: 0;
top: 155px;
text-align: center;
line-height: 40px;
color: rgba(250, 235, 215, 0.452);
cursor: pointer;
}
.btn_left:hover {
background-color: rgb(109, 101, 101);
}
.btn_right {
width: 20px;
height: 40px;
background-color: rgba(158, 155, 155, 0.301);
position: absolute;
z-index: 9999;
right: 0px;
top: 155px;
text-align: center;
line-height: 40px;
color: rgba(250, 235, 215, 0.452);
cursor: pointer;
}
.btn_right:hover {
background-color: rgb(109, 101, 101);
}
</style>
</head>
<body>
<div class="all">
<div class="block">
<div>
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/6.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<div class="point">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="btn_left">
<</div> <div class="btn_right">>
</div>
</div>
<script>
var block = document.getElementsByClassName('block')[0];
var block_child = block.children[0];
var point = document.getElementsByClassName('point')[0].children;
var btn_left = document.getElementsByClassName('btn_left')[0];
var btn_right = document.getElementsByClassName('btn_right')[0];
var count = 0;
var time;
point[0].style.backgroundColor = 'black';
window.onload = showpage();
// 总函数，在页面加载完成后执行，由于位置已经在页面内容之下，所以可以直接调用
function showpage() {
time = setInterval(function () {
page_onice();
}, 2500)
}
// 将所有的函数都封装，方便调用
// 执行一次的函数
function page_onice() {
block_child.className = 'nowpage';
point[count].style.backgroundColor = 'white';
count++;
var index = count >= block_child.children.length - 1 ? 0 : count;
// index为当前的索引
point[index].style.backgroundColor = 'black';
block_child.style.marginLeft = (-700 * count) + 'px';
// 显示当前的图片
setTimeout(function () {
if (count >= block_child.children.length - 1) {
count = 0;
block_child.className = '';
block_child.style.marginLeft = '0px';
}
}, 500)
// 重点，动画完成执行以消除动画不执行bug
}
// 点击事件 功能优化
block_child.onmouseenter = function () {
clearInterval(time);
}
// 当鼠标进入时，停止计时器
block_child.onmouseleave = function () {
showpage();
// 鼠标离开，开始计时器
}
btn_left.onclick = function () {
point[count].style.backgroundColor = 'white';
count--;
if (count < 0) {
block_child.className = '';
count = 5;// 由于共有7张图，但是最后一张与第一张相同，所有只需从0~5
block_child.style.marginLeft = '-4200px';
// 重点，count=5时，最后一张图切完，现在显示为第七张图，然后切到第一张图，实现循环
setTimeout(function () {
block_child.className = 'nowpage';
block_child.style.marginLeft = (-700 * count) + 'px';
}, 1)//动画完成 1ms可以忽略不计
} else {
block_child.className = 'nowpage';
block_child.style.marginLeft = (-700 * count) + 'px';
// 因为是margin值，所以不分方向，只需要移动到相应的位置即可
// 好像在哪说过这些话
}
point[count].style.backgroundColor = 'black';
当前的图片对应点变色
}
btn_left.onmouseenter = function () {
clearInterval(time);
}
btn_left.onmouseleave = function () {
showpage();
}
// 当鼠标进入btn时，停止计时器
// 出去时，开始计时器 下同
// 老实说，右比左简单多了！
btn_right.onclick = function () {
page_onice();
}
btn_right.onmouseenter = function () {
clearInterval(time);
}
btn_right.onmouseleave = function () {
showpage();
}
// 由于是用margin值来移动图片的，所以不用考虑左右的区别，只是移动距离的关系
// 这个比之前用层实现轮播简单多了
for (var i = 0; i < point.length; i++) {
point[i].index = i;
point[i].onmouseenter = function () {
// console.log(1);
block_child.className = 'nowpage';
block_child.style.marginLeft = (-700 * this.index) + 'px';
point[count].style.backgroundColor = 'white';
this.style.backgroundColor = 'black';
count = this.index;
}
}
// 消除切换页面bug
// 页面可见性事件
document.addEventListener('visibilitychange', function () {
if (!document['hidden']) {
showpage();
} else {
clearInterval(time);
}
});
document.onselectstart = function () {
return false;
}//阻止用户复制
</script>
</body>
</html>这真的是心最累的一次注释，下一篇立体轮播图希望能活着写完！（皮一下很头疼）