前言：
现在我们对“cssbanner轮播”都比较讲究，姐妹们都想要知道一些“cssbanner轮播”的相关知识。那么小编在网络上收集了一些有关“cssbanner轮播””的相关知识，希望同学们能喜欢，同学们一起来学习一下吧！直接上代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style id="css">
body,ul,ol{
margin: 0;padding: 0;list-style: none;
}
.box{width: 800px;margin: 50px auto;}
.pickList{width:800px;height:360px;overflow: hidden;position: relative;cursor: pointer;}
#btn{padding: 50px;height: 30px;position: relative;}
#btn li{width: 30px;height: 30px;background: #000;color: #fff;text-align: center;float: left;margin: 0 10px;border-radius: 50%;}
#btn li:hover:not(.active){cursor: pointer;}
#btn .active{background: #f60;cursor: pointer;}
</style>
<script type="text/javascript">
//首先我们要获取到他们,便于接下来操作
window.onload=init;
var index=1;
var Lis=document.getElementsByTagName("li");
var Img;
//定时器(需要定义的函数,它的毫秒数)
var timer;
function init(){
timer=setInterval("lunbo()",1800);
//点击小圆点切换图片到指定位置
for (var i=0;i<Lis.length;i++) {
Lis[i].onclick = function(){
clearInterval(timer);
index = this.innerHTML;
//var Img=document.getElementById("img");
Img.src="Image/"+index+".jpg";
resetColor();
Lis[index-1].style.background = "#f60";
timer = setInterval("lunbo()",1800);
}
}
}
//利用定时器使图片达到轮播效果
function lunbo(){
index++;
resetColor();
if(index == 5){
index=1;
}
Img=document.getElementById("img");
Img.src="Image/"+index+".jpg";
//var Lis=document.getElementsByTagName("li");
Lis[index-1].style.background="#f60";
}
//小原点初始值颜色(定义函数,在定时器去调用它)
function resetColor(){
//var Lis=document.getElementsByTagName("li");
for(var i=0;i<Lis.length;i++){
Lis[i].style.background="rgba(0,0,0,1)";
}
}
//鼠标移入和移出
function stop(){
clearInterval(timer);
}
function start(){
//变量作用域,因为这边已经给它清除了,所以必须重新声明它.
timer=setInterval("lunbo()",1800);
}
</script>
</head>
<body">
<div class="box">
<div id="banner" class="pickList" onmouseover="stop()" onmouseout="start()">
<img id="img" src="Image/1.jpg" alt="" >
</div>
<ol id="btn">
<li id="li1" class="active" >1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ol>
</div>
</body>
</html>
标签： #cssbanner轮播
