简单的轮播图，但是可以自行修改很多地方比如添加文字描述等等。
代码实现了2秒自动轮播，鼠标移入轮播停止，移出轮播继续。点击右下方的按钮可以实现轮播跳转。
鼠标移除后可以在跳转后的图片上往后轮播。
可以直接复制使用，修改相应的图片和css即可。
7749电视网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul{
position: relative;
width: 2540px;
left: 0;
}
.slider-wrap{
position: relative;
margin: 0 auto;
border: 1px solid red;
width: 510px;
height: 260px;
overflow: hidden;
background-color: darkgray;
}
.slider-wrap li{
float: left;
}
.clearfix{
zoom: 1;
}
.clearfix:after{
content: "";
height: 0;
display: block;
clear: both;
}
.slider-count{
position: absolute;
bottom: 12px;
right: 20px;
z-index: 2;
}
span{
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin-right: 5px;
font-size: 0;
}
.active{
background-color: #fd4c5d;
width: 20px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="slider-wrap clearfix" id="slider_wrap">
<ul id="ul">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.png"></li>
<li><img src="img/5.jpg"></li>
</ul>
<div class="slider-count">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<script>
var slider_img = document.getElementsByTagName("ul");
var slider_count = document.getElementsByTagName("span");
var ul = document.getElementById("ul");
var slider_wrap = document.getElementsByClassName("slider-wrap");
var interval = setInterval(autoplay,2000);
var indexnum = 0;
//slider——count点击事件
for(var i=0;i < slider_count.length;i++)
{
slider_count[i].onclick = function(){
changeimg(this.innerHTML-1);
changecss(this.innerHTML-1);
indexnum = this.innerHTML-1;
}
}
//鼠标移入移除事件
slider_wrap[0].onmousemove = function(){
clearInterval(interval);
}
slider_wrap[0].onmouseout = function(){
interval = setInterval(autoplay,2000);
}
//自动播放
function autoplay(){
if(indexnum>4){
indexnum = 0;
}
changeimg(indexnum);
changecss(indexnum);
indexnum++;
}
function changeimg(num){
ul.style.left = -(num)*508+"px";
}
function changecss(num){
for(var i=0;i<slider_count.length;i++){
slider_count[i].className = " "
}
slider_count[num].className = " active"
}
</script>
</body>
</html>
网友评论