html轮播图思路,轮播图思路以及用到的知识点

轮播图思路

轮播图思路：

1.首先所有的图片都是放在一个div中让它叠加起来的，设置层级让当前图片出现在最上面

2.为每个底部圆点按钮添加点击事件

3.用时间间隔函数让轮播图每隔两秒自动更新

4.鼠标移入事件和鼠标移除事件

5.添加左右点击事件,

css部分

//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%;

}

HTML部分

//html部分

//z-index=1是为了让这张图片显示在最上层

• 1
• 2
• 3
• 4
• 5
• 6

<

>

js部分

//js部分

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.οnmοuseοut=function() { //当鼠标移开时继续执行轮播图的时间函数

move=setInterval(function(){ //setiInterval后面要加方法

bannerAuto("right")

},2000);

};

//左右两边单击事件

left.οnclick=function(){ //单击左边执行left向左轮播的函数

bannerAuto("left")

};

right.οnclick=function(){

bannerAuto("right") 单击右边执行left向右轮播的函数

}

用到的知识点

setInterval()

onmouseover

onmouseout

for循环

onclick