简单图片自动手动播放html,js手动播放图片实现图片轮播效果

本文实例为大家分享了js图片轮播具体实现代码，供大家参考，具体内容如下

一、html代码部分(et.thtml)：

二、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.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').οnclick=function(){

slide.top.clickLeft();

}

$$('imgR').οnclick=function(){

slide.top.clickRight();

}

//获取所有底部的小图片

for(var i=1;i<=slide.arrMax;i++){

//为每一张图片绑定点击事件

var n='img'+i;

$$(n).οnclick=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();

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