京东轮播图

有个计数的，点右边，计数增加，判断计数是否超过总的长度，超过设置计数为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. 【转载】signal(SIGCHLD, SIG_IGN)和signal(SIGPIPE, SIG_IGN)

    来源:https://blog.csdn.net/guotao1983/article/details/82118218 signal(SIGCHLD, SIG_IGN) 因为并发服务器常常fork很 ...

  2. git报错：fatal: No configured push destination.

    本地仓库代码(git push)上传git仓库报错: fatal: No configured push destination. Either specify the URL from the co ...

  3. K8S ? K3S !

    K8S ? K3S ! K3S 踩坑开始 歪比歪比(奇怪的服务器) 服务器选择我熟悉的 Centos K3S内置 Containerd 但是!作为一个服务器使用自然是要用常见的一点的容器 Docker ...

  4. 图解css3学习笔记

    (0)css3是啥 css3是最新版本的css,添加了许多新的特性,将切图仔从繁重的工作中解救出来. css3现在主流的浏览器大部分都支持(ie9部分支持,ie8之前的都不支持) 渐进增强,优雅降级 ...

  5. DolphinScheduler1.2.1源码分析

    DolphinScheduler在2020年2月24日发布了新版本1.2.1,从版本号就可以看出,这是一个小版本.主要涉及BUG修复.功能增强.新特性三个方面,我们会根据其发布内容,做简要的源码分析. ...

  6. python基础之字典功能

    python中字典是个很重要的功能,使用键值(key-value)存储,具有极快的查找速度.值得注意的是,字典的key要为不可变对象,比如字符串.字母,但不能是可变的,比如列表等. 1.字典的定义: ...

  7. 使用 Jest 进行愉快的 JavaScript(TypeScript) 测试

    一般我们不管是做前端还是后端,为了提高代码的质量,会选择一种测试驱动开发(TDD)的办法来写代码进行单元测试.Jest 是 Facebook 团队开发的一款测试框架,为的是提高开发者的"开发 ...

  8. python命令行工具的使用——argparse

    argparse是一个常用的库函数,使用它的时候我们在命令行中不仅仅可以运行python文件,更可以零时调整参数,十分方便. 首先,如果你只是希望传一丢丢数据进去,那么只看下面两行就行了 import ...

  9. Bash脚本编程学习笔记04：测试命令test、状态返回值、位置参数和特殊变量

    我自己接触Linux主要是大学学习的Turbolinux --> 根据<鸟哥的Linux私房菜:基础篇>(第三版) --> 马哥的就业班课程.给我的感觉是这些课程对于bash的 ...

  10. 如何在Mac上显示和查看隐藏的文件/文件夹

    今天的文章推出的是如何在Mac上显示和查看隐藏的文件/文件夹.出于隐私或安全性考虑,出于多种原因,我们需要在Mac计算机上隐藏某些文件.这些文件或文件夹在默认情况下是为Mac的平稳运行而隐藏的,但是如 ...