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 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
js分页代码分享
2014/04/28 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Python Json数据文件操作原理解析
2020/05/09 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
现金会计岗位职责
2013/12/05 职场文书
民政局个人整改措施
2014/09/24 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
话题作文之诚信
2019/11/28 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android