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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
jquery 插件开发备注
Aug 27 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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
第二节 对象模型 [2]
2006/10/09 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
基于JS实现快速读取TXT文件
2020/08/25 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python中字符串与编码示例代码
2019/05/20 Python
python自动发微信监控报警
2019/09/06 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
大学生自我鉴定
2013/12/16 职场文书
参观接待方案
2014/03/17 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年班组长工作总结
2015/04/10 职场文书
电影复兴之路观后感
2015/06/02 职场文书
开天辟地观后感
2015/06/09 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript