一、设计概述
这次的轮播图功能很全面,里面有鼠标事件效果,比如鼠标移入,停止自动播放,鼠标离开图片开始自动播放,当鼠标移入是会有箭头出现,鼠标离开始时箭头就会消失,图片可以通过点击左右箭头来切换,也可以通过点击li里面的小圆点来切换。这个轮播图主要运用到DOM,事件,Date对象里面自动调用函数和清空自动调用函数的知识了。
二、程序运行效果
三、代码
body代码
<div id="banner" onmouseover="oClear()" onmouseout="oStart()">
<img src="img/1.jpg" id="img" >
<ul id="list">
<li class="bg" onclick="bannerIcon(0)"></li>
<li onclick="bannerIcon(1)"></li>
<li onclick="bannerIcon(2)"></li>
<li onclick="bannerIcon(3)"></li>
<li onclick="bannerIcon(4)"></li>
</ul>
<a onclick="leftBtn()" id="left" class="leftBtn" href="javascript:void (0)"><</a>
<a onclick="rightBtn()" id="right" class="rightBtn" href="javascript:void (0)">></a>
</div>
css样式代码
<style>
*{padding: 0;margin: 0;text-decoration: none;border: 0;list-style: none;}
#banner{width: 500px;height: 333px;position: relative;margin: auto;}
#banner #list{width: 100px;height: 20px;position: absolute;bottom: 0;left: 50%;margin-left: -50px;}
#banner #list li{width: 10px;height: 10px;border-radius: 5px;background: black;float: left;margin-right: 10px;margin-top: 5px;}
#banner #list li:hover{cursor: pointer;background: darkred;}
.bg{background: darkred !important;}
#banner .leftBtn{left: 0;}
#banner .rightBtn{right: 0;}
#banner .leftBtn ,.rightBtn{display:none;width:30px; height:50px;color: black;background: rgba(0,0,0,.3);position: absolute;top: 50%;margin-top: -25px;line-height: 50px;text-align: center;}
#banner .leftBtn:hover, .rightBtn:hover{background: rgba(0,0,0,.8);color: #fff;}
</style>
js代码
var index = 0;
var arr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
function oBannerImg() {
index++;
if (index>=arr.length){
index=0;
}
var img = document.getElementById("img");
img.src=arr[index];
oDot();
}
function oDot() {
var list = document.getElementById("list");
var li= list.getElementsByTagName("li");
for(var i = 0;i<li.length;i++){
li[i].className="";
}
li[index].className="bg";
}
var h = setInterval("oBannerImg()",1000);
function oClear() {
clearInterval(h);
var left = document.getElementById("left");
var right = document.getElementById("right");
left.style.display="block";
right.style.display="block";
}
function oStart() {
h = setInterval("oBannerImg()",1000);
var left = document.getElementById("left");
var right = document.getElementById("right");
left.style.display="none";
right.style.display="none";
}
function leftBtn() {
index == 0 ? index=arr.length-1:index--;
var img = document.getElementById("img");
img.src=arr[index];
oDot();
}
function rightBtn() {
index == arr.length-1?index=0:index++;
var img = document.getElementById("img");
img.src=arr[index];
oDot();
}
//点点图片跟着变
function bannerIcon(p) {
index = p;
var img = document.getElementById("img");
img.src=arr[index];
oDot();
}
如果你感觉我这篇文章对您有帮助的话,或者感觉这篇文章写的不错,可以给我点个赞,作为我的鼓励!如果有什么对代码不理解的问题,随时可以私信我,我会帮你解答哒~