js手动播放图片实现图片轮播效果

本文实例为大家分享了js图片轮播具体实现代码，供大家参考，具体内容如下
一、html代码部分（et.thtml）：

<！DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><link type="text/css" rel="stylesheet" href="css/styleet.css"><script type="text/javascript" src="js/system.js"></script></head><body><div id="main"><div id="top"><span id="imgL" class="span1"></span><img src="images/1.jpg" id="img" data-index="1" alt=""/><span id="imgR" class="span2"></span></div><div id="bottom"><img src="images/1.jpg" id="img1" class="focusClass" data-index="1" alt=""/><img src="images/2.jpg" id="img2" class="initClass" data-index="2" alt=""/><img src="images/3.jpg" id="img3" class="initClass" data-index="3" alt=""/><img src="images/4.jpg" id="img4" class="initClass" data-index="4" alt=""/><img src="images/5.jpg" id="img5" class="initClass" data-index="5" alt=""/><img src="images/6.jpg" id="img6" class="initClass" data-index="6" alt=""/><img src="images/7.jpg" id="img7" class="initClass" data-index="7" alt=""/></div></div><script type="text/javascript" src="js/et.js"></script></body></html>

二、css代码部分（styleet,css）:

#main span{width: 22px;height: 38px;position: absolute;display: inline-block;cursor: pointer;background: url（"../images/1.png"） no-repeat 0 0;}.span1{background-position: 0 0;left:20px;top: 90px;}.span2{background-position: -22px 0;right: 20px;top: 90px;}#main{width: 500px;margin: 20px auto;text-align: center;border: solid 2px red;position: relative;}.initClass{width: 50px;border: solid 2px #fff;margin: 10px 5px;}.focusClass{width: 50px;border: solid 2px red;margin: 10px 5px;}

三、js代码部分（et.js）：

/** * Created by LuanReco on 2015/8/28. */var slide={arrImg:new Array（"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];//根据焦点下标值组合成导航图片名称var n="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（var i=1;i<=slide.arrMax;i++）{var n="img"+i;$$（n）.className=slide.initClass;}},click:function（）{//处理页面下一部分的逻辑$$（"imgL"）.onclick=function（）{slide.top.clickLeft（）;}$$（"imgR"）.onclick=function（）{slide.top.clickRight（）;}//获取所有底部的小图片for（var i=1;i<=slide.arrMax;i++）{//为每一张图片绑定点击事件var n="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（）{var m=1;//for（var i=1;i<=slide.arrMax;i++）{setInterval（function（）{var n="img"+m;m++;$$（n）.click（）;if（m>6）m=1;},1000）//}}}slide.autoplay.play（）;slide.bottom.click（）;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。