<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图左右</title>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bannerBox {
width: 520px;
height: 320px;
margin: 50px auto;
background: greenyellow;
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imglist {
height: 320px;
position: absolute;
}
#imglist img {
width: 500px;
height: 320px;
}
#imglist li {
width: 500px;
height: 320px;
float: left;
margin: 0 10px;
list-style: none;
}
#btns span {
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
background: #000000;
opacity: .3;
font-size: 40px;
text-align: center;
line-height: 50px;
cursor: pointer;
color: #fff;
}
#btns .prev {
left: 20px;
}
#btns .next {
right: 20px;
}
#navbtn {
position: absolute;
bottom: 20px;
}
#navbtn a {
width: 10px;
height: 10px;
background: #f00;
float: left;
margin: 0 5px;
filter: alpha(opacity=60);
opacity: .6;
border-radius: 50%;
}
#navbtn a:hover,#navbtn a.hover{
background: #000;
}
</style>
</head>
<body>
<div id="bannerBox">
<ul id="imglist">
<li><img src="img/01.jpg" /></li>
<li><img src="img/02.jpg" /></li>
<li><img src="img/03.jpg" /></li>
<li><img src="img/04.jpg" /></li>
<li><img src="img/01.jpg" /></li>
</ul>
<div id="btns">
<span class="prev"><</span>
<span class="next">></span>
</div>
<div id="navbtn">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<script type="text/javascript">
var oBannerBox = document.getElementById("bannerBox");
var oImglist = document.getElementById("imglist");
var aList = oImglist.children;
var oImg = document.getElementsByTagName("img");
var oBtns = document.getElementById("btns");
var oPrev = oBtns.children[0];
var oNext = oBtns.children[1];
var oNavbtn = document.getElementById("navbtn");
var aAll = oNavbtn.children;
aAll[0].className = "hover";
oNavbtn.style.left = (oBannerBox.offsetWidth - oNavbtn.offsetWidth) / 2 + "px";
oImglist.style.width = 520 * oImg.length + "px";
var i = 0;
var timer = setInterval(function() {
startMove();
}, 3000);
function startMove() {
i++;
//123123
if(i == aList.length) {
oImglist.style.left = 0;
i = 0;
}
//321321
if(i == -1) {
oImglist.style.left = -520 * (aList.length - 1) + "px";
i = aList.length - 2;
}
for(var j = 0; j < aAll.length; j++) {
aAll[j].className= "";
}
if(i==aAll.length){
aAll[0].className= "hover";
}else{
aAll[i].className="hover";
console.log(i)
}
move(oImglist, {
"left": -520 * i
});
}
//鼠标移入轮播区域 清除定时器
oBannerBox.onmouseover = function() {
clearInterval(timer);
}
//移出开启
oBannerBox.onmouseout = function() {
timer = setInterval(function() {
startMove();
}, 3000);
}
//点击按钮
oNext.onclick = function() {
startMove();
}
oPrev.onclick = function() {
i -= 2;
startMove();
}
for(let j=0;j<aAll.length;j++){
aAll[j].onmouseover=function(){
i=j-1;
startMove();
}
}
</script>
</body>
</html>
js实现简易轮播图
最新推荐文章于 2022-03-17 15:03:00 发布