图片来源

<!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. oracle之 单实例监听修改端口

    Oracle 单一主机多个实例多个监听器配置要点   1. 一台服务器主机, 有多个实例, 如: TSDB/ORCL; 又需要配置多个监听器 2. 需要指定不同的LISTENER端口   3.pmon ...

  2. php路径常量

    我们知道PHP中提供了一个魔术常量(magic constant)__FILE__,用来指向当前执行的PHP脚本.但PHP没有直接提供该脚本所在目录的常量.也就是说如果我们要得到当前PHP脚本所在的目 ...

  3. 使用FormsAuthenticationTicket进行登陆验证

    if (账号密码验证成功) { //登陆成功 Session["User"] = account; FormsAuthenticationTicket ticket = new F ...

  4. golang查看channel缓冲区的长度

    golang提供内建函数cap用于查看channel缓冲区长度. cap的定义如下: func cap(v Type) int The cap built-in function returns th ...

  5. CoreException: Could not get the value for parameter compilerId for plugin execution default-compile Maven项目pom文件报错，插件引用不到

    CoreException: Could not get the value for parameter compilerId for plugin execution default-compile ...

  6. curl发送post请求，统计响应时间

    curl  -o /dev/null -s -w %{time_namelookup}::%{time_connect}::%{time_starttransfer}::%{time_total}:: ...

  7. aircrack 破解wifi密码

    分享一个用aircrack破解wifi密码的步骤: 1.新建一个终端 airmon-ng check kill airmon-ng start wlan0 airodump-ng wlan0mon 此 ...

  8. mirror op 如果在windows receiver上是黑屏

    mirror op 如果在windows receiver上是黑屏,手机上要重启下再打开mirror op.(手机是一加3 安卓7.0)

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

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

  10. JComboBox实现当前所选项功能和JFrame窗口释放资源的dispose()方法

    JComboBox有一个 SelectedItem属性,所以使用getSelectedItem()就可以得到当前选中值. package ltb20180106; import javax.swing ...