图片轮播需求:
1.图片每隔三秒自动切换
2.鼠标移入,轮播暂停;鼠标出来,轮播继续
3.左右切换按钮
1.图片每隔三秒自动切换
2.鼠标移入,轮播暂停;鼠标出来,轮播继续
3.左右切换按钮
4.点击小圆点实现切换到对应图片
html结构:
<div class="banner">
<div class="banner_center" id="banner">
<!--图片1-->
<a href=""><div class="banner_slide slide1 slide_active"></div></a>
<!--图片2-->
<a href=""><div class="banner_slide slide2"></div></a>
<!--图片3-->
<a href=""><div class="banner_slide slide3"></div></a>
<!--左右按钮-->
<a href="javascript:void(0)" class="banner_btn left_btn" id="left_btn"></a>
<a href="javascript:void(0)" class="banner_btn right_btn" id="right_btn"></a>
<!--小圆点-->
<div class="dot_div" id="dot_div">
<span class="dot dot_active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</div>
CSS:
.banner{
width: 100%;
background-color: aquamarine;
}
.banner_center{
width: 1190px;
height: 360px;
margin: auto;
overflow: hidden;
position: relative;
}
.banner_slide{
width: 1190px;
height: 360px;
display: none;
}
.slide1{
background-image: url(../img/171201_0h0cje6759ke27482ai0ieahc5399_1200x360.jpg);
}
.slide2{
background-image: url(../img/5a73bf50Nc6bd41a9.jpg);
}
.slide3{
background-image: url(../img/5a6fc709N81142311.jpg);
}
.slide_active{
display: block;
}
/*左右按钮*/
.banner_btn{
display: block;
width: 50px;
height: 100px;
background-color: rgba(0,0,0,0.1);
color: #fff;
position: absolute;
top: 50%;
margin-top: -50px;
transition: all 1s;
}
.left_btn{
left: 0;
}
.right_btn{
right: 0;
}
.banner_btn:hover{
background-color: rgba(0,0,0,0.8);
}
/*小圆点*/
.dot_div{
width: 70px;
position: absolute;
top: 340px;
right: 0;
}
.dot{
display: inline-block;
width: 14px;
height: 14px;
border-radius: 8px;
border: 1px solid #fff;
background-color: #777777;
margin-right: 2px;
}
.dot_active{
border: 1px solid #777;
background-color: #fff;
}
js:
//获取DOM元素的方法
function getele(d){
return typeof(d) === "string" ? document.getElementById(d) : d;
}
var index = 0,
timer = null,
pics = getele("banner").getElementsByTagName("div"),
len = pics.length,
btn_left = getele("left_btn"),
btn_right = getele("right_btn"),
dots = getele("dot_div").getElementsByTagName("span");
//获取到banner区
var banner = getele("banner");
function slideImg(){
//绑定事件,鼠标移入,消除定时器,鼠标移出,继续
banner.onmouseover = function(){
//消除定时器
clearInterval(timer);
}
banner.onmouseout = function(){
timer = setInterval(function(){
index++;
//这里len最后一位是放小圆点,所以注意
if(index > len - 2) index = 0;
changeImg();
},3000);
}
//立即执行鼠标移出事件,即图片轮播
banner.onmouseout();
//小圆点切换,为每个小圆点绑定事件
for(var d = 0 ;d < len - 1;d++){
dots[d].id = d;
dots[d].onclick = function(){
index = this.id;
for(var a = 0 ;a < len - 1; a ++){
dots[a].className = "dot";
}
this.className = "dot dot_active";
changeImg();
}
}
//左右切换图片
btn_left.onclick = function(){
index --;
if(index < 0) index = len - 2;
changeImg();
}
btn_right.onclick = function(){
index ++;
if(index > len - 2) index = 0;
changeImg();
}
}
/*切换图片函数*/
function changeImg(){
for(var i = 0;i < len - 1;i++){
pics[i].style.display = "none";
dots[i].className = "dot";
}
pics[index].style.display = "block";
dots[index].className = "dot dot_active";
}
slideImg();
ok啦