用jQuery实现轮播图

已于 2024-03-14 20:12:17 修改
阅读量566 收藏 10
点赞数 13
文章标签： jquery 前端 javascript
于 2024-03-14 19:48:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59302271/article/details/136720077
版权

怎么用jq实现简单的轮播图呢？

首先完成基本html结构:

 <div id="app">
        <div class="wrapper">
            <!-- 图片 图片链接记得改成自己的-->
            <div class="photo">
                <ul>
                    <li><img src="./images/1.jpg" alt=""></li>
                    <li><img src="./images/2.jpg" alt=""></li>
                    <li><img src="./images/3.jpg" alt=""></li>
                    <li><img src="./images/4.jpg" alt=""></li>
                    <li><img src="./images/5.jpg" alt=""></li>
                    <!-- 追加一张，方便无缝衔接 -->
                    <li><img src="./images/1.jpg" alt=""></li>
                </ul>
            </div>
            <!-- 导航点 -->
            <div class="point">
                <ol>
                    <li data-index="0" class="active">1</li>
                    <li data-index="1">2</li>
                    <li data-index="2">3</li>
                    <li data-index="3">4</li>
                    <li data-index="4">5</li>
                </ol>
            </div>
            <!-- 左右按钮 -->
            <div class="btn left"><i></i></div>
            <div class="btn right"><i></i></div>
        </div>
    </div>

然后是css样式:

<style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        img {
            vertical-align: middle;
        }

        .wrapper {
            width: 500px;
            height: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #fff;
            position: relative;
        }

        .photo {
            width: 500px;
            height: 200px;
            overflow: hidden;
        }

        .photo ul {
            width: 1000%;
            height: 200px;
        }

        .photo ul li {
            width: 10%;
            float: left;
        }

        .point {
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .point ol li {
            width: 24px;
            height: 24px;
            border: 1px solid #ccc;
            float: left;
            margin: 0 5px;
            background-color: #fff;
            text-align: center;
            line-height: 24px;
            font-size: 15px;
            cursor: pointer;
        }

        .point ol li.active {
            background-color: yellow;
        }

        .btn {
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 0, .3);
            cursor: pointer;
            text-align: center;
            line-height: 40px;
        }

        .btn.left {
            left: 20px;
        }

        .btn.right {
            right: 20px;
        }

        .btn i {
            display: inline-block;
            vertical-align: middle;
            width: 14px;
            height: 14px;
            border-bottom: 3px solid rgba(255, 255, 255, .5);

        }

        .btn.left i {
            border-left: 3px solid rgba(255, 255, 255, .5);
            transform: rotate(45deg);
            margin-left: 10px;
        }

        .btn.right i {
            border-right: 3px solid rgba(255, 255, 255, .5);
            transform: rotate(-45deg);
            margin-right: 10px;
        }
    </style>

然后就是最重要的script了，记得先引入jq哦!!

//引入jQuery
<script src="./jquery/jquery.js"></script>
<script>
        //图片和导航点的下标
        var index = 0;
        var index2 = 0;
        //图片的宽
        var width = parseInt($(".photo").find('img').css("width"));
        // console.log(width);
        //向右移动
        var toRight = function () {
            index++;
            if (index > 5) {
                index = 1;
                $(".photo ul").css("marginLeft", "0px")
            }
            $('ul').animate({
                marginLeft: -(width * index)
            })
            index2++;
            if (index2 > 4) {
                index2 = 0
            }
            getDH(index2);
        }
        //导航点高亮
        var getDH = function (index2) {
            for (var j = 0; j < $('.point ol li').length; j++) {
                $('.point ol li').eq(j).removeClass('active')
            }
            $('.point ol li').eq(index2).addClass('active')
        }

        // 向左移动
        var toLeft = function () {
            index--
            if (index < 0) {
                index = 4;
                $(".photo ul").css("marginLeft", `-${width * 5}px`)
            }
            $('ul').animate({
                marginLeft: -(width * index)
            })
            index2--;
            if (index2 < 0) {
                index2 = 4;
            }
            getDH(index2);
        }
        //定时器执行向右移动
        var timer = setInterval(function () {
            toRight();
        }, 1500)

        //点击导航点切换图片
        $('.point ol li').on('click', function () {
            //    console.log( $(this));
            $(this).addClass('active').siblings().removeClass('active');
            index2 = $(this).attr("data-index");
            $('ul').animate({
                marginLeft: -(width * index2)
            })
        })

        //点击左右箭头按钮切换图片
        $('.right').on("click", toRight);
        $('.left').on("click", toLeft);

        //鼠标移入停止定时器
        $('.wrapper').on("mouseenter", function () {
            clearInterval(timer);
            // console.log(1);
        })

        //鼠标移出执行定时器
        $('.wrapper').on('mouseleave', function () {
            timer = setInterval(function () {
                toRight();
            }, 3000)
        })

    </script>

这样子就实现了！

下面是全部代码：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <script src="./jquery/jquery.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        img {
            vertical-align: middle;
        }

        .wrapper {
            width: 500px;
            height: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #fff;
            position: relative;
        }

        .photo {
            width: 500px;
            height: 200px;
            overflow: hidden;
        }

        .photo ul {
            width: 1000%;
            height: 200px;
        }

        .photo ul li {
            width: 10%;
            float: left;
        }

        .point {
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .point ol li {
            width: 24px;
            height: 24px;
            border: 1px solid #ccc;
            float: left;
            margin: 0 5px;
            background-color: #fff;
            text-align: center;
            line-height: 24px;
            font-size: 15px;
            cursor: pointer;
        }

        .point ol li.active {
            background-color: yellow;
        }

        .btn {
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 0, .3);
            cursor: pointer;
            text-align: center;
            line-height: 40px;
        }

        .btn.left {
            left: 20px;
        }

        .btn.right {
            right: 20px;
        }

        .btn i {
            display: inline-block;
            vertical-align: middle;
            width: 14px;
            height: 14px;
            border-bottom: 3px solid rgba(255, 255, 255, .5);

        }

        .btn.left i {
            border-left: 3px solid rgba(255, 255, 255, .5);
            transform: rotate(45deg);
            margin-left: 10px;
        }

        .btn.right i {
            border-right: 3px solid rgba(255, 255, 255, .5);
            transform: rotate(-45deg);
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrapper">
            <!-- 图片 -->
            <div class="photo">
                <ul>
                    <li><img src="./images/1.jpg" alt=""></li>
                    <li><img src="./images/2.jpg" alt=""></li>
                    <li><img src="./images/3.jpg" alt=""></li>
                    <li><img src="./images/4.jpg" alt=""></li>
                    <li><img src="./images/5.jpg" alt=""></li>
                    <!-- 追加一张 -->
                    <li><img src="./images/1.jpg" alt=""></li>
                </ul>
            </div>
            <!-- 导航点 -->
            <div class="point">
                <ol>
                    <li data-index="0" class="active">1</li>
                    <li data-index="1">2</li>
                    <li data-index="2">3</li>
                    <li data-index="3">4</li>
                    <li data-index="4">5</li>
                </ol>
            </div>
            <!-- 按钮 -->
            <div class="btn left"><i></i></div>
            <div class="btn right"><i></i></div>
        </div>
    </div>
    <script>
        //图片和导航点的下标
        var index = 0;
        var index2 = 0;
        //图片的宽
        var width = parseInt($(".photo").find('img').css("width"));
        // console.log(width);
        //向右移动
        var toRight = function () {
            index++;
            if (index > 5) {
                index = 1;
                $(".photo ul").css("marginLeft", "0px")
            }
            $('ul').animate({
                marginLeft: -(width * index)
            })
            index2++;
            if (index2 > 4) {
                index2 = 0
            }
            getDH(index2);
        }
        //导航点高亮
        var getDH = function (index2) {
            for (var j = 0; j < $('.point ol li').length; j++) {
                $('.point ol li').eq(j).removeClass('active')
            }
            $('.point ol li').eq(index2).addClass('active')
        }

        // 向左移动
        var toLeft = function () {
            index--
            if (index < 0) {
                index = 4;
                $(".photo ul").css("marginLeft", `-${width * 5}px`)
            }
            $('ul').animate({
                marginLeft: -(width * index)
            })
            index2--;
            if (index2 < 0) {
                index2 = 4;
            }
            getDH(index2);
        }
        //定时器执行向右移动
        var timer = setInterval(function () {
            toRight();
        }, 1500)

        //点击导航点切换图片
        $('.point ol li').on('click', function () {
            //    console.log( $(this));
            $(this).addClass('active').siblings().removeClass('active');
            index2 = $(this).attr("data-index");
            $('ul').animate({
                marginLeft: -(width * index2)
            })
        })

        //点击左右箭头按钮切换图片
        $('.right').on("click", toRight);
        $('.left').on("click", toLeft);

        //鼠标移入停止定时器
        $('.wrapper').on("mouseenter", function () {
            clearInterval(timer);
            // console.log(1);
        })

        //鼠标移出执行定时器
        $('.wrapper').on('mouseleave', function () {
            timer = setInterval(function () {
                toRight();
            }, 3000)
        })

    </script>
</body>

</html>

吃了三明治
关注
  • 13
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery实现轮播图及其原理详解
12-09
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
使用Jquery实现轮播图
最新发布
jiaohuizhuang6019的博客
09-14 1477
使用Jquery实现轮播图
使用jQuery实现轮播图
热门推荐
刘小杨的博客
08-22 1万+
大家好，今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小 为300，索引从0开始 3、当你点击右边的按钮时候，就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px 4、当他实现滑动的时候，加一个animate动画的效果，就欧了 5、右边的效果和左边的一样，都是同理 <!DOCTYPE html> <html lang="en"> <head>
jQuery实现轮播图
qq_58460470的博客
11-21 3859
jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法 实现广告图片的轮播展示效果
Jquery实现轮播图效果
weixin_68250871的博客
05-23 2247
【代码】Jquery实现轮播图效果。
jquery实现简单自动轮播图效果
11-20
本文实例为大家分享了jquery实现简单自动轮播图的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="author...
用jQuery实现圆点图片轮播效果
10-20
在页面的指定位置实现的图片自动的左右轮流切换展示效果，当点击图片左下的标签(或中间的小圆点)切换到对应的图片。接下来通过本文给大家分享用jQuery实现圆点图片轮播效果实例代码，需要的朋友参考下
JQuery实现轮播图完整源码
09-13
1.具有完整目录结构 2.具有详细代码注释 3.打开即可完整显示样式
基于JQuery实现图片轮播效果(焦点图)
11-23
兼容到IE6+以上浏览器，有轮播速度和切换间隔两个参数可以改。 效果图如下： Html代码如下： <html> <head> <meta charset="utf-8"> <title>banner图</title> <link href=...
jQuery实现轮播图效果demo
01-19
本文实例为大家分享了jQuery实现轮播图效果的具体代码，供大家参考，具体内容如下 效果展示： 编程思路： 1. 首先是基础的布局，使用”子绝父相”等页面布局方法，将图片、左右按钮以及每张图片下方对应的标识小...
jQuery实现图片轮播特效代码分享
11-22
jquery图片轮播插件PgwSlider是一款非常简单的jquery插件，它可以帮你快速创建一个垂直轮播图。 运行效果图：  小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 （1）在head区域引入CSS样式： <...
使用jQuery实现图片轮播.html
01-11
使用jQuery实现图片轮播html5手机web页面
jquery实现轮播图特效
10-15
主要为大家详细介绍了jquery实现轮播图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现轮播图效果
01-21
本文实例为大家分享了jQuery实现弹幕效果的具体代码，供大家参考，具体内容如下 话不多说吧，直接看效果吧： 主要思路 其实弹幕的主要思路很简单，就是将div从右向左移动，直到完全移除屏幕之后，将当前div从body中...
jQuery手风琴图片轮播切换
04-07
jQuery手风琴图片轮播切换是一款基于jQuery实现的非常漂亮的手风琴效果，个人也比较喜欢这个效果，比较大气，体验非常好。
jQuery轮播图插件，背景图实现轮播图，轮播图可增加文字
02-27
代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行轮播，并且可自定义轮播间隔时间等一...
jQuery实现的轮播图
02-01
实现自动轮播，点击索引切换图片，点击左右按钮实现切换图片
使用jquery实现轮播图
05-19
好的，下面是一个简单的使用 jQuery 实现轮播图的示例代码： HTML 代码： ```html ``` CSS 代码： ```css .slider { position: relative; width: 100%; height: 300px; overflow: hidden; } ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值