练习demo
作者：互联网
轮播图demo
编辑器制作效果展示：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {margin: 0;padding: 0;list-style: none;overflow: hidden;transition: all 0.5s}
#ul {width: 500%;height: 100%;background-color:#eee;position: absolute;left: 0}
#ul li {width: 20%;height: 100%;float: left}
#ul li img {width: 100%;height: 100%}
#d {width: 100%;height: 50%;position: absolute}
.bt {font-size: 20px;position: absolute;bottom: 10px;bottom: 39%;border: 0;outline: 0;width: 4%;height: 20%;background-color: #ca9dee;border-radius: 20%}
.bt:hover {color: white;background-color: #a474be;transform: scaleX(1.2) scaleY(1.1)}
.bt1 {left: 1%}
.bt2 {right: 1%}
#ul1 {opacity: 0.7;width: 25%;height: 10%;background-color: #c3f2fc;position: absolute;bottom: 5%;border-radius: 25px;left: 36%}
#ul1 li {cursor: pointer;width: 10%;height: 100%;border-radius: 30%;background-color: #d5e7c2;float: left;text-align: center;margin-left: 8.5%;line-height: 30px}
#ul1 li:hover {background-color: black;color: white;transform: scale(0.95);border-radius: 50%}
#ul1 li:active {transform: scale(0.7)}
.act {background-color: black !important;color: white}
</style>
</head>
<body>
<div id="d">
<ul id="ul">
<li><img src="img/slide1.jpg" alt="图片"></li>
<li><img src="img/slide2.jpg" alt="图片"></li>
<li><img src="img/slide3.jpg" alt="图片"></li>
<li><img src="img/slide4.jpg" alt="图片"></li>
<li><img src="img/slide5.jpg" alt="图片"></li>
</ul>
<ul id="ul1">
<li class="act">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button class="bt bt1">←</button>
<button class="bt bt2">→</button>
</div>
<script>
var timer;
var obt = document.querySelectorAll(".bt");
var oli = document.querySelector("#ul1").querySelectorAll("li");
var oul = document.querySelector("#ul");
var od = document.querySelector("#d");
var speed = oul.offsetWidth / 5;
obt[0].addEventListener("click", run);
obt[1].addEventListener("click", run);
// 设置轮播切换
for (var i = 0; i < oli.length; i++) {
oli[i].addEventListener("click", run);
function run() {
var num = parseInt(this.innerText);
oul.style.left = -speed * (num - 1) + "px";
n = num - 1;
runli(n);
}
}
// 给轮播图添加定时器
function cr() {
timer = setInterval(function () {
var n = Math.abs(oul.offsetLeft) / speed;
if (n > 3) {
n = -1;
}
var v = n + 1;
runli(v);
if (oul.offsetLeft < -speed * 3) {
oul.style.left = 0 + "px";
} else {
oul.style.left = oul.offsetLeft - speed + "px";
}
}, 1000)
}
cr();
od.addEventListener("mouseover", () => {
clearInterval(timer)
});
od.addEventListener("mouseout", () => {
cr()
});
// od.addEventListener("mouseover",function () {
// clearInterval(timer);
// });
// od.addEventListener("mouseout",function () {
// cr();
// });
// 利用window.onresize来响应式布局
window.onresize = function () {
oul.style.left = "0px";
speed = oul.offsetWidth / 5;
runli(0);
}
// 判断触发的按钮
function run(e) {
var e = e || event;
var ov = e.srcElement;
obt[0].disabled = true;
obt[1].disabled = true;
setTimeout(function () {
obt[0].disabled = false;
obt[1].disabled = false;
}, 500)
ov.innerText == "←" ? (run1()) : (run2());
// 按钮组的切换
function run1() {
oul.offsetLeft > -10 ? (oul.style.left = -oul.offsetWidth / 5 * 4 + "px") : (oul.style.left = oul.offsetLeft + speed + "px");
var n = Math.abs(oul.offsetLeft) / speed;
if (n < 1) {
n = 5;
}
var v = n - 1;
runli(v);
}
// 按钮组的切换
function run2() {
oul.offsetLeft < -oul.offsetWidth / 5 * 3 ? (oul.style.left = 0 + "px") : (oul.style.left = oul.offsetLeft - speed + "px");
var n = Math.abs(oul.offsetLeft) / speed;
if (n > 3) {
n = -1;
}
var v = n + 1;
runli(v);
}
}
// 样式的更替
function runli(n) {
for (var j = 0; j < oli.length; j++) {
oli[j].className = "";
}
oli[n].className = "act";
}
// var s=window.location.search;
// var h=window.location.hostname;
// var p=window.location.pathname;
// var po=window.location.port;
// var str=h+":"+po+p+s;
// window.open(str,"脚本1314520","width=400,height=400");
</script>
</body>
</html>
整理笔记时发现自己做的小demo,传上来了，么么哒！
标签：function,oul,color,demo,练习,var,speed,left 来源： https://blog.csdn.net/jiepp/article/details/101150952