欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery实现仿京东轮播图

程序员文章站 2022-10-26 13:53:14
1.效果图 动态效果详解:  (1) 鼠标离开时,自动切换图片,底部小圆点按钮也跟着变化。  (2) 鼠标移入图片,显示左右箭头,停止自动轮播。  (3)鼠标移入左右...

1.效果图

JQuery实现仿京东轮播图

动态效果详解: 

(1) 鼠标离开时,自动切换图片,底部小圆点按钮也跟着变化。 

(2) 鼠标移入图片,显示左右箭头,停止自动轮播。 

(3)鼠标移入左右箭头时,改变当前移入箭头的背景颜色。 

(4)点击右边箭头,切换到下一张图片,对应下标的小圆点按钮样式改变。 

(5)点击左边箭头,切换到上一张图片,对应下标的小圆点按钮样式改变。 

(6)鼠标移入底部小圆点按钮,当前移入的小圆点按钮样式改变,且显示对应下标的图片。

2.html部分

2.1 思路分析

(1)首先要有一个p父盒子,用来显示当前图片,盒子宽高和图片宽高一致。 

(2)p里包括三个子元素,一个ul标签,用来存放所有图片,两个p,一个用来放左右箭头,另一个放底部小圆点按钮。

2.2 代码

<p class="slider">

    <!--ul中存放所有图片,图片大小保持一致-->

    <ul>

      <li>

        <a href="#">

          <img src="images/1.jpg" alt="">

        </a>

      </li>

      <li>

        <a href="#">

          <img src="images/2.jpg" alt="">

        </a>

      </li>

      <li>

        <a href="#">

          <img src="images/3.jpg" alt="">

        </a>

      </li>

      <li>

        <a href="#">

          <img src="images/4.jpg" alt="">

        </a>

      </li>

      <li>

        <a href="#">

          <img src="images/5.jpg" alt="">

        </a>

      </li>

      <li>

        <a href="#">

          <img src="images/6.jpg" alt="">

        </a>

      </li>

      <li>

        <a href="#">

          <img src="images/7.jpg" alt="">

        </a>

      </li>

      <li>

        <a href="#">

          <img src="images/8.jpg" alt="">

        </a>

      </li>

    </ul>

    <!--左右箭头-->

    <p class="arrow">

      <span class="arrow-left">&lt;</span>

      <span class="arrow-right">&gt;</span>

    </p>

    <!-- 小圆点按钮 -->

    <p class="focus">

      <i class="current"></i>

      <i></i>

      <i></i>

      <i></i>

      <i></i>

      <i></i>

      <i></i>

      <i></i>

    </p>

  </p>

3.css部分

3.1 代码

<style>

    * {

      margin: 0;

      padding: 0;

      list-style: none;

    }

    .slider {

      height: 340px;

      width: 790px;

      margin: 100px auto;

      position: relative;/* 注意此处一定不要忘记定位 */

    }

    /* 所有li隐藏 */

    .slider li {

      position: absolute;

      display: none;

    }

  /* 显示第一个li */

    .slider li:first-child {

      display: block;

    }

    /* 左右箭头默认隐藏 */

    .arrow {

      display: none;

    }

    /* 鼠标移入p,显示左右箭头 */

    .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;

    }

  /* 给底部小圆点按钮设置定位 */

    .slider .focus {

      position: absolute;

      bottom: 20px;

      left: 46px;

      z-index: 1;

    }

  /* 给底部小圆点按钮设置样式 */

    .slider .focus i {

      display: inline-block;

      width: 10px;

      height: 10px;

      border-radius: 50%;

      border: 2px solid rgba(255, 255, 255, 0.5);

      text-align: center;

    }

    /* current类名,用于事件处理时,给小圆点按钮动态添加类名,改变样式 */

    .current {

      background: #fff;

      transition: .4s all;

    }

  </style>

4.js部分

 <!-- 注意先引入jquery,再使用 -->

  <script>

    $(function () {

      var index = 0;//用index记录下标,默认为0

      var lis = $('.slider li');

      //1.右边箭头点击事件

      $('.arrow-right').click(right);

      //右箭头点击事件处理函数

      function right() {

        index++; 

        //如果当前是最后一张,此时index=lis.length-1,index++后index=lis.length

        // 此时应让index=0

        if (index == lis.length) {

          index = 0;

        }

        //显示对应下标的图片,让其他兄弟隐藏

        lis.eq(index).fadein().siblings().fadeout();

        //给对应下标的小圆点按钮添加current类名,其他兄弟移除current类名

        $('.focus i').eq(index).addclass('current').siblings().removeclass('current');

      }

      //2.左边箭头点击事件

      $('.arrow-left').click(function () {

        index--;

        //如果当前是第一张(index=0),index--后,index<0,此时应显示最后一张,让index=lis.length-1

        if (index < 0) {

          index = lis.length - 1;

        }

        //显示对应下标的图片,让其他兄弟隐藏

        lis.eq(index).fadein().siblings().fadeout();

        //给对应下标的小圆点按钮添加current类名,其他兄弟移除current类名

        $('.focus i').eq(index).addclass('current').siblings().removeclass('current');

      })

      //3.底部圆点按钮鼠标移入事件

      btns = $('.focus i');

      for (var i = 0; i < btns.length; i++) {

        //设置index属性,记录当前下标

        btns.eq(i).attr('index', i);

        //给btn注册鼠标移入事件

        btns.eq(i).mouseenter(fn);

      }

      //btn的事件处理函数

      function fn() {

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

        lis.eq(index).fadein().siblings().fadeout();

        $(this).addclass('current').siblings().removeclass('current');

      }

      //4.自动轮播

        //先执行一次定时器

      var timeid = setinterval(function () {

        right()

      }, 3000)

        //鼠标移出p时,设置定时器,调用右边箭头的点击事件

      $('.slider').mouseleave(function () {

        timeid = setinterval(function () {

          right()

        }, 3000)

      })

      //鼠标移入p时,清除定时器

      $('.slider').mouseenter(function(){

        clearinterval(timeid)

      })

    })

  </script>

总结:

轮播图的实现思路基本一致,只要掌握了基本思路,就能很容易的写出来了。 

以上的代码注释纯属个人理解,如有不足之处,望指正。