作者:广东快乐笨人 | 来源:互联网 | 2023-06-30 19:57
原标题:案例效果:原生JS-实现pc端轮播图效果
案例:轮播图需求
- 布局:ul下有很多li标签;浮动在一行;
- 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden;
- 功能需求:
- 序号轮播
- 左右按钮的轮播
- 自动轮播
- 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播
实现效果:
html部分
<div class="box" id="box">
<div class="inner" id="inner">
<ul id="imglist">
<li>
<a href="#"><img src="images/1.jpg" alt="">a>
li>
<li>
<a href="#"><img src="ima文章来源地址36145.htmlges/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>
<li>
<a href="#"><img src="images/5.jpg" alt="">a>
li>
<li>
<a href="#"><img src="images/6.jpg" alt="">a>
li>
ul>
<div class="list">
<i class="current">1i>
<i>2i>
<i>3i>
<i>4i>
<i>5i>
<i>6i>
div>
<div class="arrow">
<span class="arrow-left"><span>
<span class="arrow-right">>span>
div>
div>
div>
css部分
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 730px;
height: 454px;
padding: 8px;
border: 1px solid green;
margin: 100px auto;
}
.inner {
position: relative;
overflow: hidden;
height: 454px;
}
#imglist {
width: 700%;
position: absolute;
left: 0;
transition: left 300ms linear;
}
li {
float: left;
}
.list {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -85px;
}
.list i {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
color: #333;
float: left;
font-style: normal;
line-height: 20px;
font-size: 14px;
text-align: center;
margin-right: 10px;
cursor: pointer;
}
.list i:last-child {
margin-right: 0;
}
.list i.current {
background-color: skyblue;
color: #fff;
}
.arrow {
position: absolute;
width: 100%;
top: 50%;
margin-top: -30px;
}
.arrow-left,
.arrow-right {
width: 30px;
height: 60px;
position: absolute;
font: 20px/60px "consolas";
color: #fff;
background-color: rgba(0, 0, 0, .3);
text-align: center;
cursor: pointer;
}
.arrow-right {
right: 0;
}
js部分:
var yuan = document.querySelectorAll("i");
var li = document.querySelector("ul li");
var ul = document.querySelector("ul");
var imgs = document.querySelector("#imglist");
var right = document.querySelector(".arrow-right");
var left = document.querySelector(".arrow-left");
var box = document.querySelector(".box");
window.onload = function() {
for (var i = 0; i < yuan.length; i++) {
yua文章来源站点https://www.yii666.com/n[i].num = i;
yuan[i].onmouseover = function() {
for (var j = 0; j < yuan.length; j++) {
yuan[j].classList.remove("current");
}
this.classList.add("current");
var num = this.num;
var left = num * li.offsetWidth;
imgs.style.left = `-${left}px`;
for (var p = 0; p < yuan.length; p++) {
yuan[p].classList.remove("current");
}
yuan[nwww.yii666.comum].classList.add("current");
index = this.num;
}
}
var index = 0;
right.onclick = function() {
index++;
if (index == ul.children.length) {
index = 0;
}
var left = index * li.offsetWidth;
imgs.style.left = `-${left}px`;
for (var n = 0; n < yuan.length; n++) {
文章来源地址36145.html yuan[n].classList.remove("current");
}
yuan[index].classList.add("current");
};
left.onclick = function() {
index--;
console.log(index);
if (index == -1) {
index = ul.children.length - 1;
}
var left = index * li.offsetWidth;
imgs.style.left = `-${left}px`;
for (var m = 0; m < yuan.length; m++) {
yuan[m].classList.remove("current");
}
yuan[index].classList.add("current");
};
var timer = setInterval(function() {
right.onclick();
}, 1000);
box.onmouseover = function() {
clearInterval(timer);
};
box.onmouseout = function() {
timer = setInterval(function() {
right.onclick();
}, 1000);
};
}
未完待续,本篇文章做的PC端的处理,目前从6页-1页,1页到6页还有点小瑕疵,会及时更新上的,其他功能一切正常,欢迎大家评论
来源于:案例效果:原生JS-实现pc端轮播图效果