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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
js实现直播点击飘心效果
Aug 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
谈谈PHP的输入输出流
2007/02/14 PHP
两个php日期控制类实例
2014/12/09 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
JS与框架页的操作代码
2010/01/17 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
jquery选择器使用详解
2014/04/08 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python中逗号的三种作用实例分析
2015/06/08 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python版百度语音识别功能
2019/07/09 Python
python 自定义装饰器实例详解
2019/07/20 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
银行求职信怎么写
2014/05/26 职场文书
科技节口号
2014/06/19 职场文书
安全生产会议制度
2015/08/06 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Django实现翻页的示例代码
2021/05/24 Python
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python