jQuery轮播图功能实现方法

本文实例为大家分享了jQuery轮播图功能的实现代码，供大家参考，具体内容如下

jQuery轮播（无animation）

html布局

<!-- 整个轮播区域 -->
  <div class="container">
   <!-- 轮播图 -->
   <ul class="items" style="left:-200px">
   <!-- 实际上只轮播5张图，将实际上的第一张放在最后一张，实际上的最后一张放在第一张，障眼法 -->
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
   </ul>
   <!-- 左右翻页按钮 -->
   <span class="left">&lt;</span>
   <span class="right">&gt;</span>
   <!-- 圆点 -->
   <ul class="points">
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</div>

CSS

<style>
   /* 轮播区域 */
   .container {
    width: 200px;
    height: 100px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
   }

   ul {
    position: absolute;
    list-style-type: none;
    width: 1400px;
    padding: 0;
    margin: 0;
   }

   /* 轮播图片 */
   .items li {
    width: 200px;
    height: 100px;
    margin: 0;
    padding: 0;
    float: left;
    background-color: pink;
    text-align: center;
   }
   /* 左右翻页span */
   span {
    display: block;
    width: 20px;
    height: 30px;
    background-color: rgba(70, 130, 180, 0.3);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 30px;
   }

   span:hover {
    cursor: pointer;
   }

   .left {
    left: 0;
   }

   .right {
    right: 0;
   }
   /* 圆点 */
   .points {
    width: 45px;
    margin: 0;
    padding: 0;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
   }

   .points li {
    float: left;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin: 1px;
    background-color: rgba(0, 0, 0, 0.5);
   }

   .points li:hover {
    background-color: rgba(255, 250, 205, 1);
   }

   .points .current {
    background-color: rgba(255, 250, 205, 1);
   }
</style>

jQuery

<script type="text/javascript">
   // 1. 点击按钮左右切换页面------轮播+动画，鼠标进入，播放暂停，鼠标移出，播放继续
   // 2. 页面每隔3秒自动切换
   // 3. 圆点跟着一起切换样式

   // 左切换
   let $left = $('.left')
   // 右切换
   let $right = $('.right')
   // 图片li
   let $list = $('.items')
   let $items = $list.children()
   // 大容器
   let $container = $('.container')
   // 圆点
   let $points = $('.points').children()
   const length = $points.length

   // 设置的总偏移量=li.width
   const itemWidth = 200
   // 设置每次动画时间ms
   const time = 50
   // 移动次数
   const n = 20
   // list最大偏移量-(length+1)*li.width
   const long = -(length + 1) * itemWidth
   // 规定是否在翻页，默认没有在翻页------>解决翻页时点击翻页，出现位置偏差
   let moveFlag = false
   // 定时器移动的时间
   const TIME = 3000
   // 向左切换
   $left.click(function() {
    changeItem(true)
   })
   // 向右切换
   $right.click(function() {
    changeItem(false)
   })
   // 自动切换
   let timer = setInterval(function() {
    changeItem(false)
   }, TIME)
   // 鼠标进入，播放暂停，鼠标移出，播放继续
   $container.hover(function() {
    clearInterval(timer)
   }, function() {
    timer = setInterval(function() {
     changeItem(false)
    }, TIME)
   })
   //点击圆点翻页
   $points.click(function() {
    //获取当前点击元素的index
    let index = $(this).index()
    // 跳转到对应的index图
    changeItem(index)
    // 圆点其他兄弟样式取消
    $points.eq(index).addClass('current').siblings().removeClass('current')
   })
   // 左右切换函数封装
   function changeItem(flag) {
    // 如果当前在翻页，直接返回
    if (moveFlag) {
     return
    }
    // 如果当前没在翻页，执行代码，且将moveFlag改为true，标识正在翻页
    moveFlag = true
    // offset是偏移量
    let offset = 0;
    //
    let currentLeft = parseInt($list.position().left)
    // 如果传入的是boolean型，表示是左右平滑翻页
    // 如果是数字型，就表示是点击圆点翻页
    if (typeof flag == 'boolean') {
     // 判断是左翻还是右翻，设置相应的位移
     offset = flag ? itemWidth : -itemWidth
    } else {
     // 点击圆点翻页
     // -(flag + 1)*itemWidth是目标位移，currentLeft是当前距离
     offset = -(flag + 1) * itemWidth - currentLeft
    }
    // 用来累计执行的次数
    let i = 0
    /*
    动画效果切换：按照次数来计算
    总距离=总偏移量=offset
    每次时间设置time
    */
    // 每次移动的距离 itemOffset
    let itemOffset = offset / n
    // 获取现在的left
    // 定时器函数
    const timer = setInterval(function() {
     // 每执行一次就加一，直到i===n，表示次数足够就停止定时器
     i++
     currentLeft += itemOffset
     // 设置left值
     // 必须先设置值，再去判断
     $list.css('left', currentLeft)
     if (i === n) {
      // 位移足够，清除定时器
      clearInterval(timer)
      // 翻页结束
      moveFlag = false
      // 圆点随之改变
      $points.eq(Math.abs(currentLeft / itemWidth) - 1).addClass('current').siblings().removeClass('current')
      // 当定位到最后一张时，换到第二张去，视觉是轮播
      if (currentLeft == long) {
       $list.css('left', -itemWidth)
       // 圆点设置到实际的第一张图上
       $points.eq(0).addClass('current').siblings().removeClass('current')
       // 如果已经到达最后一张图的垫底图，就返回实际意义上的第一张图
      } else if (currentLeft == 0) {
       $list.css('left', -length * itemWidth)
       // 圆点设置到实际的最后一张图上
       $points.eq(length - 1).addClass('current').siblings().removeClass('current')
      }
     }
    }, time)
   }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。