轮播图的javascript写法

来源：互联网发布：js this 改变指向编辑：程序博客网时间：2024/05/22 14:20

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<style>

margin:0;

padding:0;

}

ul{list-style:none;}

#banner{

width:1000px;

height:400px;

border:1pxsolid #ccc;

margin:50pxauto;

position:relative;

}

.img_box{

width:1000px;

height:400px;

}

.img_boximg{

width:100%;

height:100%;

display:none;

}

.img_boximg.select{

display:block;

}

.num{

position:absolute;

width:160px;

height:30px;

right:20px;

bottom:20px;

}

.numli{

float:left;

width:20px;

height:20px;

margin-right:20px;

background:#ccc;

border-radius:50%;

}

.numli.select{

background: orange;

}

width:30px;

height:50px;

background: url(img/pre.png);

position:absolute;

top:50%;

margin-top:-35px;

opacity:0.4;

}

.banner_right{

right:0;

background-position:-50px0;

}

a.select{

opacity:1;

}

</style>

</head>

<body>

<divid="banner">

<divclass="img_box">

<imgclass="select"src="img/banner1.jpg"alt="" />

<imgsrc="img/banner2.jpg"alt="" />

<imgsrc="img/banner3.jpg"alt="" />

<imgsrc="img/banner4.jpg"alt="" />

</div>

</ul>

<ahref="javascript:;"class="banner_left"></a>

<ahref="javascript:;"class="banner_right"></a>

</div>

</body>

varoBanner=document.getElementById("banner");

var aImgs=document.getElementsByTagName("img");

var aLis=document.getElementsByTagName("li");

var bannerRight=document.getElementsByClassName("banner_right")[0];

console.log(bannerRight)

var bannerLeft=document.getElementsByClassName("banner_left")[0];

function change(n){

for(vari=0;i<aLis.length;i++){

aLis[i].className="";

aImgs[i].className="";

}

aLis[n].className="select";

aImgs[n].className="select";

}

var step=0;

for(vari=0;i<aLis.length;i++){

aLis[i].index=i;

aLis[i].onclick=function(){

change(this.index);

step=this.index;

}

}bannerRight.onclick=function(){

}

function change(n){

for(vari=0;i<aLis.length;i++){

aLis[i].className="";

aImgs[i].className="";

}

aLis[n].className="select";

aImgs[n].className="select";

}

var step=0;

//选项点击

for(vari=0;i<aLis.length;i++){

aLis[i].index=i;

aLis[i].onclick=function(){

change(this.index);

step=this.index;

}

//右点击

bannerRight.onclick=fn;

function fn(){

console.log("hah")

step++;

if(step>3){

step=0;

}

change(step);

}

bannerLeft.onclick=function(){

step--;

if(step<0){

step=3;

}

change(step);

}

var timer=window.setInterval(fn,4000);

oBanner.onmouseover=function(){

window.clearInterval(timer);

bannerLeft.className="banner_left select";

bannerRight.className="banner_right select";

}

oBanner.onmouseout=function(){

timer=window.setInterval(fn,1000);

bannerLeft.className="banner_left";

bannerRight.className="banner_right";

}

</script>

</html>

<!----大家好，我是小张，本次将为大家讲解一下放大器在Javascript中的实现，希望对大家有所帮助。放大器在购物网站中很常用，京东，淘宝，都会用到放大器的相关知识，而本次博客将为大家介绍使用javascript编写放大器的例子。

0 0