js手动播放图片实现图片轮播效果
本文实例为大家分享了js图片轮播具体实现代码，供大家参考，具体内容如下
一、html代码部分（et.thtml）：
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> <linktype="text/css"rel="stylesheet"href="css/styleet.css"> <scripttype="text/javascript"src="js/system.js"></script> </head> <body> <divid="main"> <divid="top"> <spanid="imgL"class="span1"></span> <imgsrc="images/1.jpg"id="img"data-index="1"alt=""/> <spanid="imgR"class="span2"></span> </div> <divid="bottom"> <imgsrc="images/1.jpg"id="img1"class="focusClass"data-index="1"alt=""/> <imgsrc="images/2.jpg"id="img2"class="initClass"data-index="2"alt=""/> <imgsrc="images/3.jpg"id="img3"class="initClass"data-index="3"alt=""/> <imgsrc="images/4.jpg"id="img4"class="initClass"data-index="4"alt=""/> <imgsrc="images/5.jpg"id="img5"class="initClass"data-index="5"alt=""/> <imgsrc="images/6.jpg"id="img6"class="initClass"data-index="6"alt=""/> <imgsrc="images/7.jpg"id="img7"class="initClass"data-index="7"alt=""/> </div> </div> <scripttype="text/javascript"src="js/et.js"></script> </body> </html>
二、css代码部分（styleet,css）:
#mainspan{
width:22px;
height:38px;
position:absolute;
display:inline-block;
cursor:pointer;
background:url("../images/1.png")no-repeat00;
}
.span1{
background-position:00;
left:20px;
top:90px;
}
.span2{
background-position:-22px0;
right:20px;
top:90px;
}
#main{
width:500px;
margin:20pxauto;
text-align:center;
border:solid2pxred;
position:relative;
}
.initClass{
width:50px;
border:solid2px#fff;
margin:10px5px;
}
.focusClass{
width:50px;
border:solid2pxred;
margin:10px5px;
}
三、js代码部分（et.js）：
/**
*CreatedbyLuanRecoon2015/8/28.
*/
varslide={
arrImg:newArray('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg'),
initClass:'initClass',
focusClass:'focusClass',
index:1,
arrMax:7,
imgMain:'img'
}
slide.top={
//导航事件
navEvent:function(){
//上部分大图片显示累加后下标对应的图片
$$(slide.imgMain).src=slide.arrImg[slide.index-1];
//根据焦点下标值组合成导航图片名称
varn='img'+slide.index;
//执行对应导航图片单击事件
$$(n).click();
},
//处理页面上一部分的逻辑
clickRight:function(){
//点击向右按钮处理事件
console.log(slide.index);
//当下标小于或等于最大图片数量时
if(slide.index<slide.arrMax){
//累加当前下标值
slide.index++;
slide.top.navEvent();
}
},
clickLeft:function(){
//点击向右按钮处理事件
console.log(slide.index);
//当下标小于或等于最大图片数量时
if(slide.index>1){
//累加当前下标值
slide.index--;
slide.top.navEvent();
}
}
}
slide.bottom={
initImgClass:function(){
//初始化全部对不图片的样式
for(vari=1;i<=slide.arrMax;i++){
varn='img'+i;
$$(n).className=slide.initClass;
}
},
click:function(){
//处理页面下一部分的逻辑
$$('imgL').onclick=function(){
slide.top.clickLeft();
}
$$('imgR').onclick=function(){
slide.top.clickRight();
}
//获取所有底部的小图片
for(vari=1;i<=slide.arrMax;i++){
//为每一张图片绑定点击事件
varn='img'+i;
$$(n).onclick=function(){
//初始化全部样式
slide.bottom.initImgClass();
//图片元素本身获取焦点样式
this.className=slide.focusClass;
//在上部图片中显示点击小图片对应的大图片
$$(slide.imgMain).src=slide.arrImg[this.getAttribute('data-index')-1];
//重新记录焦点图片在数组中的对应下标位置
slide.index=this.getAttribute('data-index');
}
}
}
}
slide.autoplay={
play:function(){
varm=1;
//for(vari=1;i<=slide.arrMax;i++){
setInterval(function(){
varn='img'+m;
m++;
$$(n).click();
if(m>6)
m=1;
},1000)
//}
}
}
slide.autoplay.play();
slide.bottom.click();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。