京东轮播图

有个计数的，点右边，计数增加，判断计数是否超过总的长度，超过设置计数为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. Shell脚本 统计店中店导出数据

    有一个数据文件  yue.csv  是这样的   #head yue.csv  日期,商家名称,要求在线数,当天在线数,要求在线时长,在线时长达标数,   ……"2017-12-31&quo ...

  2. Properties（hashtable的子类）

    Properties: Properties是hashtable的子类(在java.util包中).该集合的特点:可以用于键值对形式的配置文件,且不允许Key重复,若有重复的,后者会覆盖前者. 也就是 ...

  3. Nginx三大主要功能

    1.做静态资源服务器,可以用于前端项目发布,图片文件文件等静态服务器. 2.做反向代理服务器,域名往往配置在Nginx上,真正的业务服务器躲在其身后. 3.做负载均衡服务器,作为负载集群的入口网关. ...

  4. MySQL面试笔试题集-BAT

    01.MySQL技术特点? Mysql数据库软件是一个客户端或服务器系统,支持各种客户端程序和库的多线程SQL服务器.不同的后端.广泛的应用程序编程接口和管理工具 02.MySQL默认端口号? 330 ...

  5. npm常用命令和脚手架使用

    最近前端同学使用最多的莫过于vue,angualr,react等热门前端框架了.那么就避免不掉的使用npm命令,本人就经常因为这三个脚手架的使用而不得不百度相应的npm命令,不胜其烦,,,因此就整理一 ...

  6. 9maven依赖传递性、依赖原则

    maven的依赖传递: A.jar->B.jar->C.jar 要使 A.jar ->C.jar:当且仅当 B.jar 依赖于C.jar的范围是compile,如果B依赖于C的范围不 ...

  7. C#面向对象--结构

    一.结构(Struct)是CTS中五种基本类型之一,是一种值类型,同样封装了同属一个逻辑单元的数据和行为,这些数据和行为通过结构中的成员表示:结构与类共享大多数相同的语法,但结构比类受到的限制更多,结 ...

  8. .NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了 ...

  9. 实验一Git代码版本管理

    GIT代码版本管理 实验目的: 1)了解分布式分布式版本控制系统的核心机理: 2) 熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git init git ...

  10. js有关字符串拼接问题

    我们经常写代码要遇见要拼接字符串,比如说我们要把     "yyy" 和一个动态数字拼接,接下来我们怎么办? 其实我们都会想到直接用“yyy”  + 一个数字不就可以了吗? 对的, ...