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

- 日理万妓 2022-10-05 12:53 166阅读 0赞

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

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

![Image 1][]

二、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();

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

[Image 1]:

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 php js轮播图片代码,js图片轮播手动切换效果实例代码

相关 JQuery实现简单图片自动轮播效果

相关 c语言实现图片自动播放,HTML+JS实现的简单图片轮播

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

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

相关 jquery实现简单图片轮播效果

相关写一个图片轮播效果的Demo(自动播放)附代码

相关 javascript实现一个简单的图片轮播和手动播放

相关 JQuery实现图片自动轮播，同时支持手动控件

相关 JS实现图片轮播效果（自动和手动）