<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner轮播</title>
<style>
*{
margin: 0;
padding: 0;
outline: none;
border: 0;
vertical-align: baseline;
}
li{
list-style: none;
}
a{
color: #333;
text-decoration: none;
}
#wrap{
width: 520px;
height: 280px;
overflow: hidden;
margin: 100px auto;
position: relative;
-webkit-user-select: none; /*禁止选中，users+tab键*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#imgs a{
position: absolute;
display: none;
}
#paging span{
display: block;
width: 32px;
height: 62px;
font-size: 28px;
color: white;
position: absolute;
top: 50%;
margin-top: -31px;
text-align: center;
line-height: 62px;
font-weight: bold;
background-color: black;
cursor: pointer;
}
#paging span:first-child{
left: 0;
}
#paging span:last-child{
right: 0;
}
#btn{
overflow: hidden;
position: absolute;
bottom: 12px;
text-align: center;
left: 50%;
margin-left: -31px;
}
#btn li{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: white;
margin: 0 4px;
}
#btn .on{
background-color: orange;
}
</style>
</head>
<body>
<div id="wrap">
<div id="imgs">
<a href="javascript:void(0);"><img src="img/1.jpg" alt="" width="520" height="280"></a> //图片地址自选
<a href="javascript:void(0);"><img src="img/2.jpg" alt="" width="520" height="280"></a>
<a href="javascript:void(0);"><img src="img/3.jpg" alt="" width="520" height="280"></a>
</div>
<div id="paging">
<span class="previous"><</span>
<span class="next">></span>
</div>
<ul id="btn">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
var wrap = document.getElementById("wrap"); //获取全部即将操作元素
var imgs = document.getElementById("imgs").getElementsByTagName("a");
var paging = document.getElementById("paging").getElementsByTagName("span");
var btn = document.getElementById("btn").getElementsByTagName("li");
imgs[0].style.display = "block";
btn[0].className = "on";
var timer = 0;
var index = 0;
//点击
for (var i = 0;i<btn.length;i++){
btn[i].index = i;
btn[i].onclick = function (){
var that = this; //保存点击事件
checkout(function () {
index = that.index;
})
};
//禁止拖拽
imgs[i].children[0].onmousedown = function (ev) { // 找到a标签中的img标签
e = ev || event;
e.preventDefault ? e.preventDefault() : window.event.returnValue = false;
// 如果鼠标摁下，移除系统的默认操作
};
imgs[i].ordrag = function () { //IE 专用禁止拖拽
window.event.returnValue = false;
}
}
for (var j = 0; j<paging.length;j++){
//下一张
if(j){
paging[j].onclick = function (){
checkout(function () {
index++;
index = index%imgs.length; //判断是否为最后一个，下一个为第一个
})
}
}else{ //上一张
paging[j].onclick =function (){
checkout(function () {
index--;
if(index<0){
index = imgs.length-1; //判断是否第一个，上一个为最后一个
}
})
}
}
}
function checkout(callback) {
btn[index].className = "";
imgs[index].style.display = "none";
callback && callback();
btn[index].className = "on";
imgs[index].style.display = "block";
}
function auto() {
timer = setInterval(function () {
checkout(function () {
index++;
index = index%imgs.length;
});
},1000);
}
wrap.onmouseover = function () {
clearInterval(timer); //鼠标进入轮播图清除定时器（清除自动轮播）
};
wrap.onmouseout = function () {
auto(); //离开轮播图开启定时器（自动轮播）
};
</script>
</html>
banner轮播图
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 原文链接：https://blog.csdn.net/nature_fly088/article/details/...
