您的位置：首页 > Web前端 > JavaScript

轮播图的javascript写法

2016-09-18 20:27 162 查看

<!DOCTYPE html>

<html>

<head>

<meta
charset="UTF-8">

<title>轮播图</title>

<style>

*{

margin:0;

padding:0;

}

ul{list-style:
none;}

#banner{

width:
1000px;

height:
400px;

border:1px
solid
#ccc;

margin:
50px
auto;

position:
relative;

}

.img_box{

width:1000px;

height:400px;

}

.img_box
img{

width:100%;

height:100%;

display:
none;

}

.img_box
img.select{

display:
block;

}

.num{

position:
absolute;

width:
160px;

height:30px;

right:20px;

bottom:
20px;

}

.num
li{

float:left;

width:20px;

height:20px;

margin-right:20px;

background:
#ccc;

border-radius:
50%;

}

.num
li.select{

background: orange;

}

a{

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:-50px
0;

}

a.select{

opacity:
1;

}

</style>

</head>

<body>

<div
id="banner">

<div
class="img_box">

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

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

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

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

</div>

<ul class="num">

<li class="select"></li>

<li></li>

<li></li>

<li></li>

</ul>

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

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

</div>

</body>

<script>

var
oBanner=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(var
i=0;i<aLis.length;i++){

aLis[i].className="";

aImgs[i].className="";

}

aLis
.className="select";

aImgs
.className="select";

}

var step=0;

for(var
i=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(var
i=0;i<aLis.length;i++){

aLis[i].className="";

aImgs[i].className="";

}

aLis
.className="select";

aImgs
.className="select";

}

var step=0;

//选项点击

for(var
i=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编写放大器的例子。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 轮播图网页轮播图

相关文章推荐

新的分享

章节导航