这个轮播主要通过图片重叠进行显示与隐藏实现的
即display:none与display:block
虽然视觉效果不是特别的好 :evil:
说下思路：
1.首先将图片用绝对定位放到一个盒子中
2.完成图片的轮播切换和鼠标移动到轮播时的停止轮播
3.做圆点导航和上一张下一张的按钮
4.在按钮上绑定事件，以实现效果
接下来贴一下代码:
[dangerbox title="html部分"]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" href="css/index.css">
<body>
<div class="main" id="main">
<!--图片轮播-->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
</div>
<!--上一张、下一张按钮-->
<a href="javascript:void (0)" class="button prev" id="button-prev"></a>
<a href="javascript:void (0)" class="button next" id="button-next"></a>
<!--圆点导航-->
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>[/dangerbox]
[dangerbox title="css样式部分"]
*{
margin: 0 auto;
padding:0 auto;
}
ul{
list-style: none;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
.banner{
width: 1200px;
height: 460px;
position: relative;
overflow: hidden;
}
.banner-slide{
width: 1200px;
height: 460px;
position: absolute;
background-repeat: no-repeat;
display: none;
}
.slide-active{
display: block;
}
.slide1{
background-image: url(../img/bg1.jpg);
}
.slide2{
background-image: url(../img/bg2.jpg);
}
.slide3{
background-image: url(../img/bg3.jpg);
}
.button{
position: absolute;
width: 40px;
height: 80px;
/*left: 244px;*/
left: 0;
top: 50%;
margin-top: -40px;
background: url(../img/arrow.png) no-repeat center;
}
.button:hover{
background-color: #333;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
.prev{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.next{
left: auto;
right: 0;
}
.dots{
position: absolute;
right: 20px;
bottom: 24px;
text-align: right;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
cursor: pointer;
margin-right: 8px;
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background-color: #ffffff;
}
[/dangerbox]
[dangerbox title="js部分"]
//封装一个代替getElementById的方法
function byId(id){
return typeof id==="string"?document.getElementById(id):id;
}
//全局变量
var index = 0,
timer = null,
pics = byId("banner").getElementsByTagName("div"),
dots = byId("dots").getElementsByTagName("span"),
prev = byId("button-prev"),
next = byId("button-next"),
len = pics.length;
function slideImg(){
var main = byId("main");
//滑过清除定时器，离开继续
main.onmouseover = function(){
//清除定时器，先判断一下这个定时器是否在执行（为了代码规范）
if(timer) clearInterval(timer);
};
main.onmouseout = function(){
timer = setInterval(function(){
index++;
if(index >= len){
index=0;
}
//切换图片
changeImg();
},3000)
};
//自动在main上触发鼠标离开的事件
main.onmouseout();
//遍历所有圆点，切绑定事件，点击圆点，切换图片
for(var i = 0; i < len; i++){
//给每个span添加个id属性，值为i，作为span的索引
dots[i].id = i;
dots[i].setAttribute("kk",i);
dots[i].onclick = function(){
//改变index为当前的索引
index = Number(this.getAttribute("kk"));
changeImg();
}
}
//给上一张绑定事件
prev.onclick = function () {
index--;
if(index===-1){
index = 2;
}
changeImg();
};
//给下一张绑定事件
next.onclick = function () {
index++;
if(index===3){
index = 0;
}
changeImg();
};
}
//切换图片
function changeImg(){
//遍历banner下所有的div，将其隐藏
for(var i = 0; i < len; i++){
pics[i].style.display = "";
dots[i].className = "";
}
//根据index索引，找到当前的div，将其显示
pics[index].style.display = "block";
dots[index].className="active";
}
slideImg();[/dangerbox]
效果如下
