图片来源

<!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. TypeScript 之 基础类型、高级类型

    基础类型:https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Basic%20Types.html 高级类型:https ...

  2. oauth2 java 代码示例

    @RequestMapping("/oauth") @Controller public class OauthController { String clientId = &qu ...

  3. 什么情况下,英文单词中的k发音变g,t发音变d,p发音变b

    当k,t,p在s发音的后面,且在重读音节中,k,t,p就要发相对应的浊辅音g,d,b.

  4. jmeter—JDBC request动态参数设置

    jmeter—JDBC request动态参数设置 重要参数说明: Variable Name:数据库连接池的名字,需要与JDBC Connection Configuration的Variable ...

  5. Linux Shell脚本中获取本机ip地址方法

    ifconfig -a|grep inet|grep -v 127.0.0.1|grep -v inet6|awk '{print $2}'|tr -d "addr:"​ 命令解释 ...

  6. Azure SQL 数据库仓库Data Warehouse (1) 入门

    <Windows Azure Platform 系列文章目录> 在之前的项目中遇到了客户使用SQL数据仓库的场景,在这里记录一下 1.什么是SQL 数据库仓库 (SQL DW) SQL D ...

  7. 在CAD二次开发中使用状态条按钮

    Pane pane = new Pane(); pane.Enabled = true; pane.Text = "状态条按钮"; pane.ToolTipText = " ...

  8. SolrServer SolrRequest

    SolrServer实现类 HttpSolrServer HttpSolrServer uses the Apache Commons HTTPClient to connect to solr. H ...

  9. bzoj5003: 与链 5004: 开锁魔法II 5005:乒乓游戏

    www.lydsy.com/JudgeOnline/upload/task.pdf 第一题题意可以转为选一个长度k的序列,每一项二进制的1的位置被下一项包含,且总和为1,考虑每个二进制位的出现位置,可 ...

  10. react事件中的this指向

    在react中绑定事件处理函数的this指向一共有三种方法,本次主要总结这三种方式. 项目创建 关于项目的创建方法,在之前的文章中有记录,这里不再赘述,项目创建成功后,按照之前的目录结构对生成的项目进 ...