轮播图
html基本代码
<div class="scroll">
<div class="scroll_img">
<img src="../img/1.jpg" alt="" class="active">
<img src="../img/2.jpg" alt="">
<img src="../img/3.jpg" alt="">
</div>
//防止div高度塌陷
<img src="../img/1.jpg" alt="">
<button>></button>
<button>< </button>
<ul>
<li class="active" bd="0"></li>
<li bd="1"></li>
<li bd="2"></li>
</ul>
</div>
css样式
<style>
* {
margin: 0;
padding: 0;
}
.scroll {
position: relative;
}
img {
width: 100%;
opacity: 0;
}
.scroll>.scroll_img>img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.scroll>.scroll_img>img.active {
opacity: 1;
}
.scroll>button {
width: 50px;
height: 50px;
border-radius: 50%;
outline: none;
background: rgba(255, 0, 0, .5);
border: none;
position: absolute;
color: white;
top: 50%;
margin-top: -25px;
cursor: pointer;
}
.scroll>button:hover {
background: rgba(255, 0, 0, .6);
}
.scroll>button:active {
background: rgba(255, 0, 0, .8);
}
.scroll>:nth-of-type(2) {
left: 50px;
}
.scroll>:nth-of-type(1) {
right: 50px;
}
.scroll>ul {
list-style: none;
display: flex;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -30px;
}
.scroll>ul>li {
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
margin-left: 10px;
cursor: pointer;
}
.scroll>ul>li.active {
background: rgba(255, 0, 0, .7);
}
</style>
js代码未封装版
<script>
//先找到需要用到的元素
var btns = document.getElementsByTagName("button"),
imgs = document.getElementsByTagName("img"),
lis = document.getElementsByTagName("li"),
div=document.getElementsByClassName("scroll")[0]
//设置一个计数器
j = 0
//给按钮绑定事件
for (i = 0
btns[i].onclick = function () {
if (this.innerText == ">") {
//点击一次计数器+1
j++
//如果j==最大值,则j=0
j == lis.length && (j = 0)
//清除img和li的class
for (i = 0
imgs[i].className = ""
lis[i].className = ''
}
imgs[j].className = "active"
lis[j].className = "active"
} else {
//点击一次计数器-1
j--
//如果j==-1则j=lis.length-1最大值为2
j == -1 && (j = lis.length - 1)
//清除img和li的class
for (i = 0
imgs[i].className = ""
lis[i].className = ''
}
imgs[j].className = "active"
lis[j].className = "active"
}
console.log(j)
}
}
//给圆点绑定事件
for (i = 0
lis[i].onclick = function () {
//bd属性为span绑定的自定义属性
j = parseInt(this.getAttribute("bd"))
//清除img和li的class
for (i = 0
imgs[i].className = ""
lis[i].className = ''
}
imgs[j].className = "active"
lis[j].className = "active"
}
}
//设置周期性自动轮播
timer = setInterval(function () {
j++
//如果j==最大值j=0
j == lis.length && (j = 0)
//清除img和li的class
for (i = 0
imgs[i].className = ""
lis[i].className = ''
}
imgs[j].className = "active"
lis[j].className = "active"
}, 1000)
//鼠标移入时
div.onmouseover=function(){
clearInterval(timer)
}
//鼠标移出时
div.onmouseout=function(){
timer = setInterval(function () {
j++
//如果j==最大值j=0
j == lis.length && (j = 0)
//清除img和li的class
for (i = 0
imgs[i].className = ""
lis[i].className = ''
}
imgs[j].className = "active"
lis[j].className = "active"
}, 1000)
}
</script>
js代码封装版
<script>
var btns = document.getElementsByTagName("button"),
imgs = document.getElementsByTagName("img"),
lis = document.getElementsByTagName("li"),
div = document.getElementsByClassName("scroll")[0]
//设置一个计数器
j = 0
//给按钮绑定事件
for (i = 0
btns[i].onclick = function () {
if (this.innerText == ">") {
fn(1)
} else {
fn(-1)
}
}
}
//给圆点绑定事件
for (i = 0
lis[i].onclick = function () {
fn(0, this)
}
}
timer = setInterval(function () {
fn(1)
}, 1000)
div.onmouseover = function () {
clearInterval(timer)
}
div.onmouseout = function () {
timer = setInterval(function () {
fn(1)
}, 1000)
}
function fn(num, li) {
if (num) {
if (num == 1) {
j += num
if (j == lis.length) { j = 0 }
//清除img和li的class
qc()
} else if (num == -1) {
j += num
if (j == -1) {
j = lis.length - 1
}
//清除img和li的class
qc()
}
} else {
j = parseInt(li.getAttribute("bd"))
qc()
}
}
function qc() {
for (i = 0
imgs[i].className = ""
lis[i].className = ''
}
imgs[j].className = "active"
lis[j].className = "active"
}
</script>
