京东轮播图

有个计数的，点右边，计数增加，判断计数是否超过总的长度，超过设置计数为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. 管理 使用 FastDFS

    启动管理tracker: 1. 启动文件+配置文件+命令 /usr/bin/fdfs_trackerd <config_file> [start | stop | restart] 举例: ...

  2. php 安装扩展插件实例-gd库

    今天给php 安装一个扩展插件 gd库   一.gd库是什么 gd库是一个开源的图像处理库,它通过提供一系列用来处理图片的API,使其可以用来创建图表.图形.缩略图以及其他图像的处理操作. gd库支持 ...

  3. Unable to update index for nexus-publish | http://ip:port/repository/maven-public/

    问题描述:Unable to update index for nexus-publish | http://ip:port/repository/maven-public/ 解决方案:进入工作空间. ...

  4. PDO连接不上又不报错的问题

    前提:连接PDO需要在将php.ini配置文件的 ;extension=pdo_mysql,去掉前面的;号. 今天闲来无事就重新弄了一下PDO,结果怎么都连不上.而且没有给出错误的信息.代码如下: & ...

  5. codewars--js--Simple string expansion+ repeat()，includes()方法

    问题描述: Consider the following expansion: solve("3(ab)") = "ababab" -- "ab&qu ...

  6. codewars--js--Find The Parity Outlier

    问题描述:(找出奇数数组中唯一的偶数,或是偶数数组中唯一的奇数) You are given an array (which will have a length of at least 3, but ...

  7. Elasticsearch之集群

    ElasticSearch集群 ES集群是一个 P2P类型(使用 gossip 协议)的分布式系统,除了集群状态管理以外,其他所有的请求都可以发送到集群内任意一台节点上,这个节点可以自己找到需要转发给 ...

  8. MYSQL5.7进阶之主从复制

    主从复制是msql数据库的高可用 读写分离 容灾备份 等的基本要求 在这主从复制之前我们需要准备以下条件 保证master数据库和从数据库的mysql版本一致 matser和从数据防火墙关闭 数据库端 ...

  9. Linux 使用vim命令编辑文件内容

    在终端可以使用vim命令来直接编辑文件内容. vim,也可以叫做vi. vim有三种模式:命令模式.输入模式.底线命令模式. 命令模式 vim  文件名   进入命令模式,vim也可以写成vi. 如果 ...

  10. #《Essential C++》读书笔记# 第六章 以template进行编程

    练习题答案 练习6.1 试改写以下类,使它成为一个class template: class example { public: example(double min, double max); ex ...