图片来源

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul{

            list-style-type: none;

        }

        .outer{

            margin: 50px auto;

            width: 590px;

            height: 470px;

            position: relative;

        }

        .img li{

            position: absolute;

            top: 0;

            left: 0;

        }

        .num{

            position: absolute;

            bottom: 20px;

            text-align: center;

            width: 100%;

        }

        .num li{

            display: inline-block;

            height: 20px;

            width: 20px;

            background-color: gray;

            color: #ffffff;

            text-align: center;

            line-height: 20px;

            border-radius:50% ;

            margin: 0 10px;

        }

        .btn{

            position: absolute;

            height: 60px;

            width: 30px;

            background-color: gray;

            color: #ffffff;

            text-align: center;

            line-height: 60px;

            top: 50%;

            margin-top: -30px;

            display: none;

            opacity: 0.8;

        }

        .left_btn{

            left: 0;

        }

        .rigth_btn{

            right: 0;

        }

        .outer:hover .btn{

            display:block ;

        }

        .current{

            background-color: red!important;    /*设置优先级*/

        }

        {# .num .current{#}

        {#    background-color: red#}

        {#}#}

    </style>

</head>

<body>

<div class="outer">

     <ul class="img">

         <li><img src="img/1.jpg"></li>

         <li><img src="img/2.jpg"></li>

         <li><img src="img/3.jpg"></li>

         <li><img src="img/4.jpg"></li>

         <li><img src="img/5.jpg"></li>

         <li><img src="img/6.jpg"></li>

     </ul>

    <ul class="num">

        <li class="current">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

    </ul>

    <div class="left_btn btn"> < </div>

    <div class="rigth_btn btn"> > </div>

</div>

<script src="jquery-3.3.1.min.js"></script>

<script>

  var i=0;

  $(".num li").mouseover(function () {

      $(this).addClass("current").siblings().removeClass('current');

      var index=$(this).index();

      i=index;//解决一个bug（当鼠标放到outer图上时，定时器是停止，鼠标再指到current的某个数字，图片就要开始从

              //那里开始轮播，如果没有i=index，图片会从最原先定时器停止的位置的开始轮播。

      $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

  })

  var time=setInterval(move,1000);

    //eq() 方法将匹配元素集缩减值指定 index 上的一个。

    //stop() 方法用于在动画或效果完成前对它们进行停止

    function move() {

      i++

      $(".num li").eq(i).addClass("current").siblings().removeClass('current');

      var index=$(this).index();

      $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

      if(i==6){

          i=-1

        }

    }

    //当鼠标放到页面上时，停止定时器，离开开启定时器函数hover

    //　hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

    $(".outer").hover(function () {

        clearInterval(time)

    },function () {

        time=setInterval(move,1000)

    })

  /****************点击左右按钮******************/

    $(".rigth_btn").click(function () {

           move()

    })

    $(".left_btn").click(function () {

           move_left()

    })

    function move_left() {

      if(i==0){

          i=6

      }

      i--

      $(".num li").eq(i).addClass("current").siblings().removeClass('current')

      var index=$(this).index();

      $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

    }

</script>

</body>

</html>

京东的首页

用jQuery实现简单的简单的轮播图的更多相关文章

  1. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  2. 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变

    ---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...

  3. 用jquery实现带左右按键的轮播图

    成品如下: 简单来说就是点击“右”按钮时,转换到右边的下一幅图片,同时上面的小方块颜色也跟着改变,如果已经是最后一幅图片,再点击“右”,则转换到第一幅图片,是直接向左移找到第一幅图的,明天再做一下无缝 ...

  4. jquery左右切换的无缝滚动轮播图

    1.HTML结构: <head> <script type="text/javascript" src="../jquery-1.8.3/jquery. ...

  5. Jquery基础（动画效果的轮播图特效）

    jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...

  6. （新手向）基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  7. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  8. 简单介绍无限轮播图，js源代码

    无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html>   <head>     <meta charse ...

  9. jQuery轮播图--不使用插件

    说明:引入jquery.min.js    将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  10. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

随机推荐

  1. makedepend: command not found(转)

    makedepend: command not found 解决方案: 修改Makefile MAKEDEPEND=$(CC) -M 参考: When I set CROSS_COMPILE, `MA ...

  2. dojo:如何显示ListBox风格的选择框

    常见的选择框控件:Selelct.FilteringSelect和ComboBox都是下拉框风格,而不是ListBox风格. dojo还提供了一个dijit.form.MultiSelect控件可以解 ...

  3. tornado 笔记

    简单比较Django和Tornado Django是走大而全的方向,注重的是高效开发,最出名的是全自动化管理后台 Tornado走的是少而精的方向,注重的是性能的优化,最出名的是异步非堵塞 安装方式: ...

  4. 5V与3.3V电平互转

    参考: http://blog.sina.com.cn/s/blog_7880f98301014fmj.html

  5. [LeedCode]921. 使括号有效的最少添加

    题目描述: 给定一个由 '(' 和 ')' 括号组成的字符串 S,我们需要添加最少的括号( '(' 或是 ')',可以在任何位置),以使得到的括号字符串有效. 从形式上讲,只有满足下面几点之一,括号字 ...

  6. P2837晚餐队列安排

    传送 特写此篇,纪念不用dp做dp题 洛谷说这是个dp,但我不信(其实就是不会dp),因此我们考虑用另一种思路.修改后的队列每一个 数a[i]一定满足a[i]<=a[i+1],那修改后的顺序就是 ...

  7. P2670扫雷

    链接 这是一个并不像搜索的题(其实它是个循环) 对于输入的a数组,一个一个遍历下来,如果a[i][j]是雷,那(i,j)周围8个点对应的位置雷数就+1(用b数组记录),注意不能超出边界,输出时,如果a ...

  8. BloomFilter理解

    知道BloomFilter是因为RocksDB数据库中用到了这个技术,用于判断1个数据是否存在于1个SST文件中. BloomFilter可能存在误判,就是判断数据是存在集合中,而实际上可能不存在,概 ...

  9. MySQL学习----索引的使用

    一.什么是索引?为什么要建立索引? 索引用于快速找出在某个列中有一特定值的行,不使用索引,MySQL必须从第一条记录开始读完整个表,直到找出相关的行,表越大,查询数据所花费的时间就越多,如果表中查询的 ...

  10. Jmeter(二十七)Jmeter Question 之“集成Ant+Jenkins自动化”

    首先介绍一下Ant.Apache Ant,是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.由Apache软件基金会所提供. 是的.还是Apache家 ...