jQuery实用案例之轮播图（超级好用）

最新推荐文章于 2022-09-15 00:01:52 发布

小龙爷ღ

最新推荐文章于 2022-09-15 00:01:52 发布

阅读量730

点赞数 1

分类专栏： JQuery 文章标签： jQuery实现轮播图轮播图图片轮流播放 jQuery实现图片放映

本文链接：https://blog.csdn.net/qq_45086879/article/details/100161643

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天给大家带来的是各大网站超级常用的轮播图案例

html+css部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
        /*去除内边距,没有链接下划线*/
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*让<body有20px的内边距*/
        body {
            padding: 20px;
        }

        /*最外围的div*/
        #container {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative; /*相对定位*/
            margin: 0 auto;
        }

        /*包含所有图片的<div>*/

        #list {
            width: 4200px;
            /*7张图片的宽: 7*600 */
            height: 400px;
            position: absolute; /*绝对定位*/
            z-index: 1;
        }

        /*所有的图片<img>*/
        #list img {
            float: left; /*浮在左侧*/
        }

        /*包含所有圆点按钮的<div>*/
        #pointsDiv {
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 20px;
            left: 250px;
        }

        /*所有的圆点<span>*/

        #pointsDiv span {
            cursor: pointer;
            float: left;
            border: 1px solid #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            margin-right: 5px;
        }

        /*第一个<span>*/

        #pointsDiv .on {
            background: orangered;
        }

        /*切换图标<a>*/

        .arrow {
            cursor: pointer;
            display: none;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 180px;
            background-color: RGBA(0, 0, 0, 0.3);
            color: #fff;
        }

        /*鼠标移到切换图标上时*/
        .arrow:hover {
            background-color: RGBA(0, 0, 0, 0.7);
        }

        /*鼠标移到整个div区域时*/
        #container:hover .arrow {
            display: block; /*显示*/
        }

        /*上一个切换图标的左外边距*/
        #prev {
            left: 20px;
        }

        /*下一个切换图标的右外边距*/
        #next {
            right: 20px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="list" style="left: -600px;">
        <img src="images/qiehuan/5.jpg" alt="5"/>
        <img src="images/qiehuan/1.jpg" alt="1"/>
        <img src="images/qiehuan/2.jpg" alt="2"/>
        <img src="images/qiehuan/3.jpg" alt="3"/>
        <img src="images/qiehuan/4.jpg" alt="4"/>
        <img src="images/qiehuan/5.jpg" alt="5"/>
        <img src="images/qiehuan/1.jpg" alt="1"/>
    </div>
    <div id="pointsDiv">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>

js部分：

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

 bug: 快速点击时, 翻页不正常
 */
$(function () {

    var $container = $('#container')
    var $list = $('#list')
    var $points = $('#pointsDiv>span')
    var $prev = $('#prev')
    var $next = $('#next')
    var PAGE_WIDTH = 600 //一页的宽度
    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 () {
        // 目标页的下标
        var targetIndex = $(this).index()
        // 只有当点击的不是当前页的圆点时才翻页
        if(targetIndex!=index) {
            nextPage(targetIndex)
        }
    })

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

          启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
         */

        //如果正在翻页, 直接结束
        if(moving) { //已经正在翻页中
            return
        }
        moving = true // 标识正在翻页

        // 总的偏移量: offset
        var offset = 0
        // 计算offset
        if(typeof next==='boolean') {
            offset = next ? -PAGE_WIDTH : PAGE_WIDTH
        } else {
            offset = -(next-index)* PAGE_WIDTH
        }

        // 计算单元移动的偏移量: itemOffset
        var itemOffset = offset/(TIME/ITEM_TIME)
        // 得到当前的left值
        var currLeft = $list.position().left
        // 计算出目标处的left值
        var targetLeft = currLeft + offset

        // 启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
        var intervalId = setInterval(function () {
            // 计算出最新的currLeft
            currLeft += itemOffset
            if(currLeft===targetLeft) { // 到达目标位置
                // 清除定时器
                clearInterval(intervalId)

                // 标识翻页停止
                moving = false

                // 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)
                if(currLeft===-(imgCount+1) * PAGE_WIDTH) {
                    currLeft = -PAGE_WIDTH
                } else if(currLeft===0){
                    // 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)
                    currLeft = -imgCount * PAGE_WIDTH
                }

            }
            // 设置left
            $list.css('left', currLeft)
        }, ITEM_TIME)

        // 更新圆点
        updatePoints(next)
    }

    /**
     * 更新圆点
     * @param next
     */
    function updatePoints (next) {

        // 计算出目标圆点的下标targetIndex
        var targetIndex = 0
        if(typeof next === 'boolean') {
            if(next) {
                targetIndex = index + 1   // [0, imgCount-1]
                if(targetIndex===imgCount) {// 此时看到的是1.jpg-->第1个圆点
                    targetIndex = 0
                }
            } else {
                targetIndex = index - 1
                if(targetIndex===-1) { // 此时看到的是5.jpg-->第5个圆点
                    targetIndex = imgCount-1
                }
            }
        } else {
            targetIndex = next
        }


        // 将当前index的<span>的class移除
        // $points.eq(index).removeClass('on')
        $points[index].className = ''
        // 给目标圆点添加class='on'
        // $points.eq(targetIndex).addClass('on')
        $points[targetIndex].className = 'on'

        // 将index更新为targetIndex
        index = targetIndex
    }
})
</script>

总结：给大家参考下顺便收入我的笔记当中，整个思路大家需要好好理一理，应该边动手实践，按照一个子功能一个个实现。图片就不上传了。

小龙爷ღ

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery实用案例之轮播图（超级好用）

今天给大家带来的是各大网站超级常用的轮播图案例html+css部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> ...
复制链接

扫一扫