常见网页特效案例：网页轮播图
轮播图也称为焦点图，是网页中比较常见的网页特效。
功能需求：
1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
3.图片播放的同时，下面小圆圈模块跟随一起变化。
4.点击小圆圈，可以播放相应图片。
5.鼠标不经过轮播图，轮播图也会自动播放图片。
6.鼠标经过，轮播图模块， 自动播放停止。
效果：
代码：
- js部分
document.addEventListener('DOMContentLoaded', function() {
// 封装的动画函数 动画对象obj（obj要有定位） 移动的目标举例target ，返回函数callback;
function animation(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
//简写利用&& 的短路
callback && callback();
}
var flag = (target - obj.offsetLeft) / 10;
var step = flag > 0 ? Math.ceil(flag) : Math.floor(flag);
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
//获取节点
var focus = document.querySelector('.focus');
var focus_l = focus.querySelector('.focus_l');
var focus_r = focus.querySelector('.focus_r');
var pic_ul = focus.querySelector('.pic_ul');
var pic_ol = document.querySelector('.focus_ol');
//焦点图的第一张的最后一张图是一样的，直接克隆节点
var pic_li = pic_ul.children[0].cloneNode(true);
pic_ul.appendChild(pic_li);
var circle = 0;
for (var i = 0; i < pic_ul.children.length - 1; i++) {
var ol_li = document.createElement('li');
pic_ol.appendChild(ol_li);
pic_ol.children[i].setAttribute('index', i);
// 点击小圆圈，可以播放相应图片。
pic_ol.children[i].addEventListener('click', function() {
for (var i = 0; i < pic_ol.children.length; i++) {
pic_ol.children[i].className = '';
}
this.className = 'current';
num = this.getAttribute('index')
circle = this.getAttribute('index');
animation(pic_ul, -this.getAttribute('index') * focus.offsetWidth);
})
}
// 鼠标不经过轮播图，轮播图也会自动播放图片
var time = setInterval(function() {
focus_r.click();
}, 4000);
// 未点击小圆圈 ，默认选择给第一个加样式
pic_ol.firstElementChild.className = 'current';
//1.鼠标经过轮播图模块，左右按钮显示
focus.addEventListener('mouseenter', function() {
focus_l.style.display = 'block';
focus_r.style.display = 'block';
clearInterval(time); //鼠标经过，轮播图模块， 自动播放停止。
time = null;
});
//1.鼠标经过轮播图模块，离开隐藏左右按钮。
focus.addEventListener('mouseleave', function() {
focus_l.style.display = 'none';
focus_r.style.display = 'none';
time = setInterval(function() {
focus_r.click();
}, 4000);
});
var num = 0;
var flags = true; //节流阀 防止连续点击，造成轮播速度过快
//.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
focus_r.addEventListener('click', function() {
if (flags) {
flags = false;
if (num == pic_ul.children.length - 1) {
num = 0;
pic_ul.style.left = '0px';
};
num++;
animation(pic_ul, -num * focus.offsetWidth, function() {
flags = true;
});
circle++;
if (circle == pic_ol.children.length) {
circle = 0;
}
for (var i = 0; i < pic_ol.children.length; i++) {
pic_ol.children[i].className = '';
}
pic_ol.children[circle].className = 'current';
}
});
focus_l.addEventListener('click', function() {
if (flags) {
flags = false;
if (num == 0) {
num = pic_ul.children.length - 1;
pic_ul.style.left = -num * focus.offsetWidth + 'px';
}
num--;
animation(pic_ul, -num * focus.offsetWidth, function() {
flags = true;
});
circle--;
if (circle < 0) {
circle = pic_ol.children.length - 1;
}
for (var i = 0; i < pic_ol.children.length; i++) {
pic_ol.children[i].className = '';
}
pic_ol.children[circle].className = 'current';
}
});
})
-
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页轮播图---焦点图</title> <!-- 引入css文件 --> <link rel="stylesheet" href="css/demo.css"> <!-- 引入js文件 --> <script src="js/demo.js"></script> </head> <body style="background-color: #CCC;"> <h1>网页轮播图---焦点图</h1> <div class="focus"> <a href="javascript:;" class="focus_l"> < </a> <a href="javascript:;" class="focus_r"> ></a> <ul class="pic_ul"> <li> <a href="#"><img src="upload/pic1.webp" alt=""></a> </li> <li> <a href="#"><img src="upload/pic2.webp" alt=""></a> </li> <li> <a href="#"><img src="upload/pic3.webp" alt=""></a> </li> <li> <a href="#"><img src="upload/pic4.jpg" alt=""></a> </li> <li> <a href="#"><img src="upload/pic5.jpg" alt=""></a> </li> <li> <a href="#"><img src="upload/pic6.webp" alt=""></a> </li> </ul> <ol class="focus_ol"> </ol> </div> </body> </html> -
css部分
a { text-decoration: none; } h1 { text-align: center; } ul, ol { margin: 0; padding: 0; list-style: none; } .focus { position: relative; width: 590px; height: 470px; margin: 50px auto; background-color: pink; overflow: hidden; } .focus_l, .focus_r { display: none; position: absolute; top: 50%; width: 40px; height: 40px; color: white; background-color: rgba(0, 0, 0, .3); font-size: 20px; z-index: 1; line-height: 40px; text-align: center; transform: translateY(-50%); } .focus_l { left: 0; border-radius: 0 50% 50% 0; } .focus_r { right: 0; border-radius: 50% 0 0 50%; } .focus_ol { position: absolute; bottom: 20px; left: 100px; } .focus_ol li { float: left; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; cursor: pointer; border: 3px solid #fff; } .pic_ul { position: relative; height: 100%; width: 20000px; } .pic_ul li { height: 100%; float: left; } .pic_ul img { height: 100%; } .current { background-color: #FFF; }