jQuery实现轮播图

于 2022-05-02 16:46:09 发布
阅读量1.8k 收藏 7
点赞数 3
分类专栏： jQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124540004
版权

需求

  1. 点击向右(左)的图标，平滑切换到下(上)一页
  2. 无限循环切换:第一页的上一页为最后页，最后一页的下一页是第一页
  3. 每隔3s自动滑动到下一页
  4. 当鼠标进入图片区域时，自动切换停止，当鼠标离开后,又开始自动切换
  5. 切换页面时,下面的圆点也同步更新
  6. 点击圆点图标切换到对应的页

效果：
在这里插入图片描述

html：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #outer {
        width: 520px;
        height: 333px;
        margin: 50px auto;
        background-color: rosybrown;
        padding: 10px 0px;
        position: relative;
        /* 裁剪溢出的内容 */
        overflow: hidden;
      }
      img {
        width: 500px;
        height: 333px;
        object-fit: cover;
      }
      #imgList {
        list-style: none;
        width: 3640px;
        position: absolute;
        /* 偏移量 */
        left: 0px;
      }
      #imgList li {
        float: left;
        margin: 0 10px;
      }
      #navDiv {
        /* 开启绝对定位 */
        position: absolute;
        bottom: 15px;
        /* 设置left:
        outer : 520px
        navDiv = 25*5 = 125 
        (520-125)/2 = 197.5
        */
        /* 但是不应该写死，使用JS进行计算 */
        left: 197px;
      }
      #navDiv a {
        /* //浮动:内联元素变成块元素 */
        float: left;
        width: 15px;
        height: 15px;
        background-color: rgb(131, 25, 57);
        margin: 0 5px;
        opacity: 0.5;
        /* IE8透明 */
        filter: alpha(opacity = 50);
      }
      #navDiv a:hover {
        background-color: white;
      }
      #navDiv a.on{
        background-color: white;
      }


      #outer>a{
        position: absolute;
        font-size: 50px;
        text-decoration: none;
        color: rgb(83, 83, 83);

        height: 70px;
        top:0;
        bottom: 0;
        margin-top:auto;
        margin-bottom:auto;
        display: none;

      }
      #outer>a:hover{
         background-color: rgba(105, 105, 105, 0.2);
      }
       #outer #prev{
        left: 10px;
      }
       #outer #next{
        right: 10px;
      } 

      #outer:hover a{
        display: block;
      }

    </style>
  </head>
  <body>
    <div id="outer">
      <ul id="imgList" style="left: -520px;">
        <li><img src="img/5.jpg" /></li>
        <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/1.jpg" /></li>
      </ul>

      <!-- 导航按钮 -->
      <div id="navDiv">
        <a href="javascript:;" class="on"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
      </div>

      <a href="javascript:;" id='prev'class="arrow"><</a>
      <a href="javascript:;" id='next'class="arrow">></a>
    </div>

    <script type='text/javascript' src='../jquery库/jquery-1.12.4.js'></script>
    <script type='text/javascript' src='./app.js'></script>
  </body>
</html>

app.js:


$(function (){
//   准备工作
    var $container = $('#outer')
    var $list = $('#imgList')
    var $points = $('#navDiv>a')
    var $prev = $('#prev')
    var $next = $('#next')
    var PAGE_WIDTH = 520 //页的宽度
    var TIME = 400
    var ITEM_TIME = 20
    var imgCount = $points.length
    var index = 0;//当前下标
    var moving = false;//标识是否正在翻页

 // 1. 点击向右(左)的图标，平滑切换到下(上)一页
    $next.click(function (){
       nextPage(true)
    })
    $prev.click(function (){
       nextPage(false)
    })

// 3. 每隔3s自动滑动到下一页
    var intervalId = setInterval(function (){
       nextPage(true)
    }, 2000)
    
// 4. 当鼠标进入图片区域时，自动切换停止，当鼠标离开后,又开始自动切换
    $container.hover(function (){
    //    鼠标移入，清除定时器
        clearInterval(intervalId)
    },function (){
    //   鼠标移出,开启定时器
    intervalId = setInterval(function (){
       nextPage(true)
    }, 2000)
    })

// 6. 点击圆点图标切换到对应的页
    $points.click(function () {
        // 目标页下标(此时this是Dom对象)
        var targetIndex = $(this).index()
        if (index != targetIndex) {
            nextPage(targetIndex)
        }
    })


    /**
     * 平滑翻页
     * @param next
     * true：下一页
     * false：上一页
     * 数值：指定下标页
     */
    function nextPage(next) {
        /*平滑翻页：
        总的偏移量：offset
        总时间 TIME =400
        单元移动的间隔时间：ITEM_TIME = 20
        所以
        单元移动的偏移量 = offset(TIME/ITEM_TIME)
         */

        // 解决bug：如果正在翻页提前结束
        if (moving) {
            return
        }
        moving =true


        var offset = 0
        if (typeof next === 'boolean') {
          offset = next ? -PAGE_WIDTH : PAGE_WIDTH   
        } else {
            offset = -(next-index)*PAGE_WIDTH
        }

        var itemOffset = offset/20
        var currentLeft = $list.position().left
        // 计算出目标left
        var targetLeft = currentLeft + offset
        // 启动定时器
        var intervalId = setInterval(function () {
            currentLeft += itemOffset
            // 注意：if语句应该写在currentLeft += itemOffset之后
            // 因为停掉调计时器！=跳出循环，只要开启了定时器就一定要把本次计时器执行完。
            // 如果先写if语句再写currentLeft += itemOffset就会多移动一个单元位置
            if (currentLeft === targetLeft) {
                clearInterval(intervalId)
                moving=false//标识翻页停止
   
                
 //  2. 无限循环切换:第一页的上一页为最后页，最后一页的下一页是第一页
                // 如果达到了最右边的图片，跳到最左边的第二张
                // 由于浏览器会取小数，这里使用Math.round进行取整
                if (Math.round(currentLeft) === -(imgCount + 1) * PAGE_WIDTH) {
                    currentLeft = -PAGE_WIDTH
                }else if (Math.round(currentLeft) === 0) {
                    // 如果达到了最左边的图片，跳到最右边的第二张
                    currentLeft = -imgCount*PAGE_WIDTH
                }
             }
            $list.css('left', currentLeft) 
        },ITEM_TIME)

        // var currentLeft = $list.position().left
        // var offset = next ? -PAGE_WIDTH : PAGE_WIDTH
        // $list.css('left',currentLeft+offset)

        // 更新a
        updatePoints(next) 
    }

// 5. 切换页面时,下面的圆点也同步更新
    // 更新a
    function updatePoints(next) {
        // 计算出目标点的下标
        var targetIndex = 0

        if (typeof next === 'boolean') {
                if (next) {
                targetIndex = index + 1
                if (targetIndex == imgCount)
                    targetIndex = 0
            } else {
                targetIndex = index - 1
                if (targetIndex == -1)
                    targetIndex = imgCount-1
            }
        } else {
            targetIndex = next
        }

        // 将当前index的a的class移除
        $points.eq(index).removeClass('on')
        // $points[index].className = ''

        // 计算出目标点的下标，并添加样式
        $points.eq(targetIndex).addClass('on')
        //  $points[index].className = 'on'

        // 将index更新为targetIndex
        index = targetIndex
    }   
})
_洋
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery实现轮播图
刘小杨的博客
08-22 1万+
大家好，今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小 为300，索引从0开始 3、当你点击右边的按钮时候，就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px 4、当他实现滑动的时候，加一个animate动画的效果，就欧了 5、右边的效果和左边的一样，都是同理 <!DOCTYPE html> <html lang="en"> <head>
jquery实现轮播图
weixin_44817062的博客
08-16 408
jquery实现轮播图 （带小圆点和左右箭头切换效果的） 原理：定义索引，定时任务实现轮播切换，切换时同样需要切换小圆点的样式 var j = 0;//定义索引，图片和小圆点共用 var cusTimer;//定义定时函数 $('.cons-middle .cons-mid').eq(0).show().siblings().hide();//定义默认的显示图片，也就是索引为0的那张图片 cusStart();//开始实现图片轮播，用到了定时器
jQuery实现轮播图及其原理详解
12-09
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
JQuery实现轮播图完整源码
09-13
【jQuery实现轮播图完整源码】是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或者用户手动操作来实现循环播放。在网页设计中，轮播图是提高用户体验、节省空间并吸引用户注意力的有效工具。这个...
jquery实现轮播图特效
11-20
本文实例为大家分享了jquery实现轮播图的具体代码，供大家参考，具体内容如下 一、实现功能： 1、通过定时实现图片自我轮播 2、当图片轮播到最后一张时，会从第一张开始继续轮播 3、点击小圈圈图标能自动切换到对应...
jQuery 实现轮播图
11-11
使用jQuery实现的简单轮播图。。
轮播图的Jquery实现
06-17
压缩文件内含html,对应css,对应js,jq框架,资源图片,解压即可预览效果; 主要功能: 1.实现图片轮播; 2.实现轮播过程中左右箭头的图片切换; 3.实现鼠标悬停轮播停止,鼠标离开轮播继续 4.实现轮播框下示图点的正确指示及悬停选择对应图片
基于Jquery实现的轮播图
Wkq55555的博客
10-29 153
前阵子我用js写了一个轮播图，现在的话换成jQuery来实现，先看看效果图 首先是html结构，如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery版图片轮播</tit...
JQuery实现轮播图
weixin_44540343的博客
08-07 307
首先我们先来讲一下思路： 自动轮播: 将一个用于放置图片素材的与显示框同高度的大div放入显示框,将图片素材放入大的div中,通过jquery的animate()方法改变大div相对于显示框绝对位置的left值及变化时间实现图片的滑动;使用setInterval()方法设置定时器,达到自动播放效果;无缝连续播放的重点在于,第一张图片与最后一张图片要相同,这样播放完最后一张图片后将大div框的lef...
使用jQuery实现轮播图效果详解
JavaScript部分使用jQuery来实现轮播图的功能。首先，需要隐藏所有左右箭头，然后根据用户交互（如点击按钮或自动播放）来改变`#list`的位置，实现图片的切换效果。例如，可以使用`animate()`函数来平滑地移动`#list...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值