京东轮播图

有个计数的，点右边，计数增加，判断计数是否超过总的长度，超过设置计数为0，再设置当前的图片动画，兄弟的图片动画

左边点击同理，计数是--，判断计数是否等于-1，等于则reset计数为总长度，在设置当前的图片动画，兄弟的图片动画

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>京东商城</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      list-style: none;

    }

    .slider {

      height: 340px;

      width: 790px;

      margin: 100px auto;

      position: relative;

    }

    .slider li {

      position: absolute;

      display: none;

    }

    .slider li:first-child {

      display: block;

    }

    .arrow {

      display: none;

    }

    .slider:hover .arrow {

      display: block;

    }

    .arrow-left,

    .arrow-right {

      font-family: "SimSun", "宋体";

      width: 30px;

      height: 60px;

      background-color: rgba(0, 0, 0, 0.1);

      position: absolute;

      top: 50%;

      margin-top: -30px;

      cursor: pointer;

      text-align: center;

      line-height: 60px;

      color: #fff;

      font-weight: 700;

      font-size: 30px;

    }

    .arrow-left:hover,

    .arrow-right:hover {

      background-color: rgba(0, 0, 0, .5);

    }

    .arrow-left {

      left: 0;

    }

    .arrow-right {

      right: 0;

    }

  </style>

</head>

<body>

  <div class="slider">

    <ul>

      <li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>

      <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>

      <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>

      <li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>

      <li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>

      <li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>

      <li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>

      <li><a href="#"><img src="data:images/8.jpg" alt=""></a></li>

    </ul>

    <!--箭头-->

    <div class="arrow">

      <span class="arrow-left">&lt;</span>

      <span class="arrow-right">&gt;</span>

    </div>

  </div>

  <script src="jquery-1.12.4.js"></script>

  <script>

    $(function () {

      var count = 0;

      $(".arrow-right").click(function () {

        count++;

        if (count == $(".slider li").length) {

          count = 0;

        }

        console.log(count);

        //让count渐渐的显示，其他兄弟渐渐的隐藏

        $(".slider li").eq(count).fadeIn().siblings().fadeOut();

      });

      $(".arrow-left").click(function () {

        count--;

        if (count == -1) {

          count = $(".slider li").length - 1;

        }

        console.log(count);

        $(".slider li").eq(count).fadeIn().siblings().fadeOut();

      });

    });

  </script>

</body>

</html>

jQuery---京东轮播图的更多相关文章

  1. Javascript 京东轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. js仿京东轮播图效果

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. 基于jQuery的移动轮播图（支持触屏）

    移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...

  4. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  5. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  6. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

  7. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  8. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  9. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

随机推荐

  1. 单页应用（SPA，Single-page-App）和多页应用（MPA，Multi-page App）的区别

    单页应用(SPA,Single-page-App)和多页应用(MPA,Multi-page App)的区别 参考博客:https://www.jianshu.com/p/4c9c29967dd6

  2. spark 报错 InvalidClassException: no valid constructor

    2019-03-19 02:50:24 WARN TaskSetManager:66 - Lost task 1.0 in stage 0.0 (TID 1, 1.2.3.4, executor 1) ...

  3. 刷题84. Largest Rectangle in Histogram

    一.题目说明 题目84. Largest Rectangle in Histogram,给定n个非负整数(每个柱子宽度为1)形成柱状图,求该图的最大面积.题目难度是Hard! 二.我的解答 这是一个 ...

  4. mysql 表结构操作

    alter table name : alter table table1 to table2;add column : alter table 表名 add column 列名 varchar(); ...

  5. 解决mysql导入导出错误问题

    1.datetime类型: 当datetime的值为0000-00-00:00:00:00时,mysql是不接受此条数据的,当然可以 insert ignore into table--------- ...

  6. rsa special

    [ReSnAd] -- iqmp ipmq e,c,\(\phi(n)\) 题目: class Key: PRIVATE_INFO = ['P', 'Q', 'D', 'DmP1', 'DmQ1'] ...

  7. JAVA JDBC 连接数据库

    方式一 Driver driver = new com.mysql.jdbc.Driver(); String url = "jdbc:mysql://localhost:3306/test ...

  8. leetcode腾讯精选练习之旋转链表（四）

    旋转链表 题目: 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = ...

  9. C# WPF聊天界面（3/3）

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF聊天界面(3/3) 阅读导航 本文背景 代码实现 本文参考 1.本文背景 系列文章 ...

  10. MySQL学习 2019-12-30

    启动mysql服务: net start mysql 关闭mysql服务: net stop mysql cmd清屏: cls mysql -V 输出版本信息并且退出 mysql -u 用户名 mys ...