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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
js进行表单验证实例分析
Feb 10 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
Nuxt页面级缓存的实现
Mar 09 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
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP的基本常识小结
2013/07/05 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
JSONP之我见
2015/03/24 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
django的ORM模型的实现原理
2019/03/04 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Django封装交互接口代码
2020/07/12 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
日期和时间问题
2015/01/04 面试题
高级销售员求职信
2013/10/25 职场文书
小学生期末评语
2014/04/21 职场文书
学习之星事迹材料
2014/05/17 职场文书
家庭困难证明
2014/10/12 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
严以用权学习心得体会
2016/01/12 职场文书
《社戏》教学反思
2016/02/22 职场文书
导游词之无锡梅园
2019/11/28 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python