原生JS实现韩雪冬轮播图
原生JS实现韩雪冬轮播图
越陌度阡
发布于 2020-11-26 15:35:17
发布于 2020-11-26 15:35:17
分享一个用原生JS实现的韩雪冬轮播图，效果如下：
实现代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原生JS实现韩雪冬轮播图</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li>
<a href="#">
<img src="images/0.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="" />
</a>
</li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
<script src="js/index.js"></script>
<script>
// 标注了每个图片要运动到的位置
// config其实就是一个配置单 规定了每张图片的大小位置层级透明度
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
},
];
// 1.获取元素
var wrap = document.getElementById("wrap");
var slide = wrap.children[0];
var list = slide.children[0];
// 所有要进行运动的li
var lis = list.children;
var arrow = slide.children[1];
// 箭头的父容器
var arrLeft = arrow.children[0];
var arrRight = arrow.children[1];
// 2.让每一个li运动到指定位置（根据config的内容）
changePic();
// 3.移入移出box的时候，设置箭头的渐变效果
wrap.onmouseover = function () {
animate(arrow, { opacity: 1 });
};
wrap.onmouseout = function () {
animate(arrow, { opacity: 0 });
};
var flag = true;
arrRight.onclick = function () {
// 如果flag 值为true，这时可以执行代码
if (flag) {
// 设置flag为false，这时无法再次点击
flag = false;
// 修改config中对象的位置，将第一个对象添加到最后
config.push(config.shift());
// 让每个li运动到对应的位置上
changePic();
}
};
arrLeft.onclick = function () {
if (flag) {
flag = false;
// 将config中的最后一个对象移动到最前面
config.unshift(config.pop());
// 让每个li运动到对应的位置上
changePic();
}
};
function changePic() {
for (var i = 0; i < config.length; i++) {
animate(lis[i], config[i], function () {
// 这个位置的代码会在运动完毕后执行
// 这个位置书写的代码无法保证所有的图片均运动完毕
// 只要有一个图片运动完，设置flag为true
flag = true;
});
}
};
function animate(tag, obj, fn) {
clearInterval(tag.timer);
tag.timer = setInterval(function () {
// 假设当前这一次定时器代码执行可以设置清除（每个样式都到达了指定位置）
var flag = true;
// 先遍历obj
for (var k in obj) {
// 由于obj中有一些属性可能是zIndex或者opacity，这时需要单独处理
if (k == "opacity") {
// 将透明度当前值和目标值都设置为扩大后的倍数，设置时除以相应倍数即可
var target = obj[k] * 100;
var leader = getStyle(tag, k) * 100 || 0;
var step = (target - leader) / 10;
// 给step设置取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
// 透明度的设置需要去掉单位
tag.style[k] = leader / 100;
} else if (k == "zIndex") {
// zIndex不需要渐变，直接设置即可
tag.style.zIndex = obj[k];
} else {
var target = obj[k];
var leader = parseInt(getStyle(tag, k)) || 0;
var step = (target - leader) / 10;
// 给step设置取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style[k] = leader + "px";
}
// 提取出每种条件都需要的代码
if (leader != target) {
flag = false;
}
}
if (flag) {
clearInterval(tag.timer);
fn && fn();
}
}, 20);
};
function getStyle(tag, attr) {
if (tag.currentStyle) {
return tag.currentStyle[attr];
} else {
return getComputedStyle(tag, null)[attr];
}
}
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/07/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号