脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery图片轮播效果

使用jQuery实现图片轮播效果

 更新时间：2022年02月23日 12:01:45   作者：平丘君  
这篇文章主要为大家详细介绍了使用jQuery实现图片轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

jQuery是对JavaScript的简化，语法没有太大区别，比较JavaScript更加容易理解，代码量更少。

用jQuery实现图片轮播需要有以下步骤：

​ 1.对图片区域获取，想象中我们所用的图片是按照顺序排列起来，按照一定的时间切换图片的位置来实现轮播

​ 2.对左右两个按钮设置监听，当点击按钮时，要切换到前一张或者后一张

​ 3.对图片底部的小圆点设置监听事件，当点击小圆点时，切换到相应的图片位置，而且小圆点也要点亮

​ 4.对图片整体设置定时器，让图片自己轮播，再设置一个监听函数，让鼠标在图片区域悬停的时候停止定时器，挪开的之后继续轮播。

html+css区域代码：

<!DOCTYPE html>
<html>

<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="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/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>
</body>

</html>

jsp相关代码：

//导入jQuery库
<script src="jquery-1.10.1.js"></script>
<script>
    //得到所有照片的div
    var $div = $('#list');
    var $span = $('#pointsDiv>span')
    //获取照片当前的位置
    var index = 1;
    var isToggleImagEnd = true;
    //点击按键往左移动
    $('#prev').click(function () {
        isToggleImg(0)
    });
    //点击按键往右移动
    $('#next').click(function () {
        isToggleImg(1)
    });

    function isToggleImg(n) {
        if (isToggleImagEnd) {
            isToggleImagEnd = false;
            if (n == 0) {
                index--;
            } else {
                index++;
            }
            $div.animate({
                left: index * (-600)
            }, 500, function () {
                if (index == 0) {
                    index = 5
                }
                if (index == 6) {
                    index = 1;
                }
                //设置图片轮播时，从最后一张跳到第一张不会有间隙，跟其他图片一样跳转
                $div.css('left', index * (-600))
                //设置图片下面的圆点状态，更改其类属性
                $span.removeClass('on');
                $($span.get(index - 1)).addClass('on')
                isToggleImagEnd = true;
            })
        }
    }
    //设置延时函数，让图片自己定时轮播下一张
    var interval = setInterval(function () {
        isToggleImg(1);
    }, 1000)
    
    //鼠标图片上图片停止轮播，挪开继续轮播
    $("#container").hover(function () {
        clearInterval(interval)
    }, function () {
        interval = setInterval(function () {
            isToggleImg(1);
        }, 1000)
    })
    
    //对小圆点设置监听事件，点击小圆点，图片跳转
    $span.click(function () {
        index = $(this).index();
        isToggleImg()
    })
</script>

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

您可能感兴趣的文章:

相关文章

最新评论