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 相关文章推荐
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
Javascript中神奇的this
Jan 20 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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
DOMXML函数笔记
2006/10/09 PHP
PHP数字格式化
2006/12/06 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
Vue实现验证码功能
2019/12/03 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
信息部岗位职责
2013/11/12 职场文书
领导证婚人证婚词
2014/01/13 职场文书
商场消防演习方案
2014/02/12 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技