这篇文章主要为大家详细介绍了 js 手动播放图片实现图片轮播效果, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一、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();
来源: http://www.phperz.com/article/17/0529/331800.html