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


Posted in Javascript onSeptember 17, 2016

本文实例为大家分享了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();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 #Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 #Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 #Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 #Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 #Javascript
利用js编写响应式侧边栏
Sep 17 #Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 #Javascript
You might like
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
Vue 中的compile操作方法
2018/02/26 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
PyQt5实现简单的计算器
2020/05/30 Python
金融专业个人求职信范文
2013/11/28 职场文书
员工团队活动方案
2014/08/28 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
简短清晨问候语
2015/11/10 职场文书