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();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生JS实现旋转木马式图片轮播插件
本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看
-
基于javascript数组实现图片轮播
图片轮播的办法有多种,在这里介绍一种简单的:js数组实现. 首先将图片路径存储在数组中,然后再调用setInterval函数来依次轮播图片 <script type="text/javascript"> var curIndex = 0; var timeInterval = 1000; var arr = new Array(); arr[0] = "1.png"; arr[1] = "2.png"; arr[2] = "
-
轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 <body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a>&l
-
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car
-
js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）
本文实例介绍了js实现图片轮播相册,具有过渡渐变效果,分享给大家供大家参考,具体内容如下 思路很简单,用2个属性保存当前图片和上一张图片,用2个定时器分别控制透明度和当前过渡的图片. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-s
-
javascript实现图片轮播效果
本文实例介绍了javascript实现图片轮播效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0
-
图解js图片轮播效果
本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下 两种图片轮播实现方案,先来看效果对比: 方案一: 原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张.这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯. 方案二: 实现原理示意图 原理: 1.轮播过程中,有几个关键元素:一个舞台(绿框).候场区(黑框).排队区(红框)和两个数组A和B.A用来保存正在展示和下一个将要展示的图片,如:图片1.2:B用来保存排队等
-
让图片跳跃起来 javascript图片轮播特效
图片轮播效果,在现在的网站的首页,差不多是必备的效果显示. 所以我从三个方面来讲解这一效果的简单实现. 图片跳动起来 图片序列控制的实现 前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.看效果 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <sty
-
基于javascript实现样式清新图片轮播特效
本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下 一.实现效果 如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 二.代码 <!DOCTYPE html> <html> <head lang="en"&g
-
JS组件Bootstrap实现图片轮播效果
本文主要来学习一下JavaScript插件--轮播.废话不多说,直接进入学习.完整教程可查看:Bootstrap3.0教程 轮播 下面先来展示的就是此插件和相关组件制作的轮播案例. <body style="width:900px; margin-left:auto; margin-right:auto;"> <div id="carousel-example-generic" class="carousel slide" da