轮播图思路
轮播图思路:
1.首先所有的图片都是放在一个div中让它叠加起来的,设置层级让当前图片出现在最上面
2.为每个底部圆点按钮添加点击事件
3.用时间间隔函数让轮播图每隔两秒自动更新
4.鼠标移入事件和鼠标移除事件
5.添加左右点击事件,
css部分
//css部分
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
font-family: "微软雅黑";
}
.banner{
width:590px;
height:470px;
position:relative;
margin:0 auto;
}
.bannerImg{
width:590px;
height:470px;
position:relative;
}
.bannerImg a{
display:block;
width:590px;
height:470px;
position:absolute;
left:0px;
top:0px;
}
.items{
width:150px;
height:16px;
position:absolute;
left: 200px;
bottom: 20px;
z-index: 999;
}
.items li{
height:16px;
width:16px;
float:left;
margin-right: 8px;
background:#fff;
text-align: center;
line-height: 16px;
border-radius: 50%;
}
</style>
HTML部分
//html部分
<body>
<div class="banner">
<div class="bannerImg">
<a href="javascript" style="z-index:1;"><img src="image/w1.jpg" height="470px" width="590px" alt="" /></a> //z-index=1是为了让这张图片显示在最上层
<a href="javascript"><img src="image/w2.jpg" height="470" width="590" alt="" /></a>
<a href="javascript"><img src="image/w3.jpg" height="470" width="590" alt="" /></a>
<a href="javascript"><img src="image/w4.jpg" height="470" width="590" alt="" /></a>
<a href="javascript"><img src="image/w5.jpg" height="470" width="590" alt="" /></a>
<a href="javascript"><img src="image/w6.jpg" height="470" width="590" alt="" /></a>
</div>
<ul class="items">
<li style="background:pink">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="btnBox">
<div class="btn fl" id="left"><</div>
<div class="btn fr" id="right">></div>
</div>
</body>
js部分
//js部分
<script type="text/javascript">
var num = 0 ;
var Img = document.getElementsByClassName("bannerImg")[0].getElementsByTagName("a");//获取图片 获取类名和id时需要加[] 表示下标
var li = document.getElementsByTagName("li");//获取数字12345
var banner = document.getElementsByClassName("banner")[0];//获取放图片的整个盒子
function bannerAuto(adress) {
for (var i = 0; i < Img.length; i++) { //循环是让每张图片和li全都有个默认状态,层级为0,背景为白色
Img[i].style.zIndex = "0";
li[i].style.background ="#fff";
};
Img[num].style.zIndex ="1"; //让当前的图片层级为1,背景为粉色
li[num].style.background ="pink";
if(adress =="right"){ //判断图片是从左往右的顺序还是从右往左
num++;
if(num>=Img.length){
num=0;
}
}else if(adress =="left"){
num--;
if(num<0){
num=Img.length-1;
}
}
}
var move=setInterval(function(){ //给轮播图添加时间函数
bannerAuto("right") //right轮播图是从左往右间隔两秒刷新一次
},2000);
for (var i = 0; i < li.length; i++) {
li[i].index = i; //存放li的下标
li[i].onclick = function(){
for (var j = 0; j < Img.length; j++) {
Img[j].style.zIndex = "0"; //当点击li时先让所有的图片层级为0,li背景为白色
li[j].style.background = "#fff";
};
this.style.background="pink"; //this指当前点击的li,让当前点击的图片层级为1,li的背景为粉色
Img[this.index].style.zIndex= "1";
num = this.index; //关联 点击的下标和num值,也就是自动轮播的下标
}
};
//鼠标移入和鼠标移除事件
banner.onmouseover =function (){
clearInterval(move); //当鼠标移到盒子上时清楚轮播图的时间函数,让图片停止播放
};
banner.onmouseout=function() { //当鼠标移开时继续执行轮播图的时间函数
move=setInterval(function(){ //setiInterval后面要加方法
bannerAuto("right")
},2000);
};
//左右两边单击事件
left.onclick=function(){ //单击左边执行left向左轮播的函数
bannerAuto("left")
};
right.onclick=function(){
bannerAuto("right") 单击右边执行left向右轮播的函数
}
</script>
用到的知识点
setInterval()
onmouseover
onmouseout
for循环
onclick