京东轮播图

有个计数的，点右边，计数增加，判断计数是否超过总的长度，超过设置计数为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. 外网访问oracle 很慢

    一台oracle服务器  对外网开放服务,外网连接后查询速度很慢,内网查询非常快.应该是这个cisco的防火墙有问题,查了很久 没有找到原因. 临时解决方法,在内网再建一台 跳转服务器,外网查询数据库 ...

  2. centos7.5优化系统脚本（虚拟机下）

    #!/usr/bin/bash #安装常用软件,首先必须自行调整好网卡配置文件,保证可以上网,否则,下列优化会失败 yum -y install wget vim lrzsz bash-complet ...

  3. TCP协议可靠性是如何保证之滑动窗口，超时重发，序列号确认应答信号

    原创文章首发于公众号:「码农富哥」,欢迎收藏和关注,如转载请注明出处! TCP 是一种提供可靠性交付的协议. 也就是说,通过 TCP 连接传输的数据,无差错.不丢失.不重复.并且按序到达. 但是在网络 ...

  4. iOS9下的Map Kit View下的使用

    最近有个任务是关于地理位置上的标注开发,经过一些资料的查找和对比,现总结一些经验,给读者也是给自己. iOS9下的Map Kit View实际是以前MapKit,只不过换了一个名字,实际是指同一个UI ...

  5. 基于HttpURLConnection的接口调用，支持GET&POST

    单位要做一个多级部署平台,大概意思就是一级系统可以监控下属地域的数据也可管理本地的数据.之前做短信猫用过httpClient请求,与此大同小异.封装了一个两种请求方式的工具类. package com ...

  6. JS常见的表单验证，H5自带的验证和正则表达式的验证

    H5验证 自带的验证无法满足需求: <form action="" method="get"> name:<input type=" ...

  7. 使用 linux kernel +busybox 定制linux系统

    目的: 了解linux的启动过程 主要内容: 1.grub 是启动程序的bootloader 2.linux-kernel 是linux的开源内核 3.busybox 是linux的工具集合 启动顺序 ...

  8. UNIX环境高级编程-第三章习题

    1,当读写磁盘文件时,read,write等函数确实是不带缓冲机制的吗?请说明原因. 答:所有磁盘I/O都要经过内核的块缓存区(即内核的缓冲区高速缓存).唯一例外的是对原始磁盘设备的I/O,但是我们不 ...

  9. 小白的linux笔记4：几种共享文件方式的速度测试——SFTP(SSH)/FTP/SMB

    测试一下各个协议的速度,用一个7205M的centos的ISO文件上传下载.5Gwifi连接时,本地SSD(Y7000)对服务器的HDD: smb download 23M/s(资源管理器) smb ...

  10. Linux下VIM编译器的使用以及shell编程基础

    VIM编译器的安装与使用 vim编辑器安装 在CentOS中,执行:yum -y install vim 普通模式 h: 左移一个字符 j: 下移一行 k: 上移一行 l: 右移一个字符 PageDo ...