菜单 搜索
首页 前端知识 用jQuery实现轮播图

用jQuery实现轮播图

2024-06-18 23:06:12 前端知识 前端哥 104 927 我要收藏

怎么用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>
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12693.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！