js实现京东轮播图效果


Posted in Javascript onJune 30, 2017

本文实例为大家分享了js实现京东轮播图效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body,ul,li{padding:0;margin:0;}
    li{list-style-type:none;}
    .wrap{
      position:relative;
      width:480px;
      height:260px;
      margin:100px auto;
    }
    .wrap>ul>li{position:absolute;display:none;}
    /*隐藏所有的li*/
    .wrap img{width:480px;height:260px;}
    .wrap li:first-child{display:block;}/*显示第一个*/
    .arrow{
      width:480px;
      height:60px;
      position:absolute;
      top:50%;
      margin-top:-30px;
      display:none;
    }
    .arrow>span{
      font-size:24pt;
      line-height:60px;
      display:inline-block;
      width:36px;
      background-color:#CEE5E8;
      text-align:center;
      cursor:pointer;
      opacity:0.5;
      border-radius:5px;/*显示圆框*/
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      color:black;
    }
    .wrap:hover .arrow{
      display:block;
    }
    .arrow>span:last-child{
      float:right;
    }
  </style>
</head>
<body>
<div class="wrap">
  <!--图片部分-->
  <ul>
    <li>
      <a href="javascript:void(0)">
        <img src="images/1.jpg"/>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        <img src="images/2.jpg"/>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        <img src="images/3.jpg"/>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        <img src="images/4.jpg"/>
      </a>
    </li>
  </ul>
  <!--按钮部分-->
  <div class="arrow">
    <span><</span>
    <span>></span>
  </div>
</div>
</body>
<script src="jquery-1.12.0.min.js"></script>
<script>
  $(function(){
    var count = 0;
    function change() {
      count++;
      if( count == $(".wrap>ul>li").length){
        count = 0;
      }
      $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
    }
    var myTimer = setInterval(change,4000);
    function reRun(){
      myTimer = setInterval(change,4000);
    }
    /*注意jquery中setInterval函数不要加引号和(),否则会报缺少对象*/
    $(".arrow>span").eq(0).click(function(){
      clearInterval(myTimer);
      /*清除计时器,目的在于不会因点击按钮时setInterval事件仍旧执行*/
      count--;
      if( count == -1){
        count = $(".wrap>ul>li").length - 1;
      }      $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
      setTimeout(reRun,0);
      /*重新启动计时器,保证不点击按钮是能正常切换*/
    });
    $(".arrow>span").eq(1).click(function(){
      clearInterval(myTimer);
      count++;
      if( count == $(".wrap>ul>li").length){
        count = 0;
      }    $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
      setTimeout(reRun,0);
    });
  });
</script>
</html>

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

Javascript 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
图解js图片轮播效果
Dec 20 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
vue-cli V3.0版本的使用详解
Oct 24 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
Vue和Bootstrap的整合思路详解
Jun 30 #Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 #Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 #Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 #Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 #Javascript
详解vue组件通信的三种方式
Jun 30 #Javascript
You might like
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
jQuery表格插件datatables用法总结
2014/09/05 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
Vue.use源码分析
2017/04/22 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
给我一面国旗 python帮你实现
2019/09/30 Python
基于python实现学生信息管理系统
2019/11/22 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
信用社竞聘演讲稿
2014/05/16 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
刑事辩护词范文
2015/05/21 职场文书
工商行政处罚决定书
2015/06/24 职场文书
如何拟写通知正文?
2019/04/02 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书