图片来源

<!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. 四、springboot（一）入门

    1.创建maven工程 2.修改jdk版本为1.8以上 3.项目结构如下 4.添加依赖jar包 <parent> <groupId>org.springframework.bo ...

  2. java集合之List源码解析

    List是java重要的数据结构之一,我们经常接触到的有ArrayList.Vector和LinkedList三种,他们都继承来自java.util.Collection接口,类图如下 接下来,我们对 ...

  3. Delphi实现树型结构

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  4. 运动目标检测中基于HSV空间的阴影去除算法

    在运动目标检测中,常常会出现由于光线被遮挡,或场景其他物体的遮挡,在目标附近或场景里出现阴影,阴影的出现对后期目标的正确分割与处理带了很大的不便.如今,国内外已有不少文献来研究这个问题,并且提出了各种 ...

  5. 黄聪：JQUERY的datatables插件，Date range filter时间段筛选功能

    需配合moment插件实现:http://momentjs.com/ 演示:http://live.datatables.net/zuciyawi/1/edit HTML代码 <!DOCTYPE ...

  6. wsl(Windows Subsystem for Linux)安装简易指南

    1. 在“启用或关闭Windows功能”窗口中打开“适用于Linux的Windows子系统”: 2. 让你的Windows更新程序将你的Windows更新到最新版本: 3. 在Microsoft St ...

  7. 【redis】之centos6.x安装redis3.0.x

    centos6.9_x86_64 1.下载redis安装包 http://download.redis.io/releases/redis-3.2.9.tar.gz 2.解压 编译到指定得目录 mak ...

  8. STL进阶--vector vs deque

    vector class Dog; // 例 1: vector<Dog> vec(6); // vec.capacity() == 6, vec.size() == 6, // 默认构造 ...

  9. 部署Java Web项目到Heroku

    1.在Heroku上创建一个新的App 2. 创建成功后添加对MYSQL的支持,点击find more add-ons 3. 这里我选择的是 JawsDB Mysql 4.添加成功后我们可以查看数据库 ...

  10. apk重签名方法

    转载(http://www.51testing.com/?uid-115892-action-viewspace-itemid-223023) 1.      生成Android APK包签名证书 1 ...