插件jQuery — jQuery+js 实现轮播图带圆点箭头自动手动轮播

最新推荐文章于 2022-03-04 23:06:19 发布

郑先生的喵

最新推荐文章于 2022-03-04 23:06:19 发布

阅读量3k

点赞数 1

分类专栏：前端开发记录（PC）文章标签：轮播图带圆点箭头自动手动

本文链接：https://blog.csdn.net/pan_zzq/article/details/83012032

版权

前端开发记录（PC）专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、问题

需要一个实现轮播图带圆点、箭头、自动和手动点击轮播

2、解决

说明：1、需要引入jQuery文件，请自行下载引入。

2、需要添加图片

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="jquery-1.9.1.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .banner {
            /*宽度可以自己控制*/
            /*width: 790px;*/
            height: 340px;
            background-color: #fff;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .banner .pic ul li {
            list-style: none;
        }
        /*小箭头样式*/
        .arrow {
            display: none;
        }
        .pic:hover .arrow {
            display: block;
        }
        .arrow-left, .arrow-right {
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }
        .arrow-left {
            left: 20px;
        }
        .arrow-right {
            right: 20px;
        }
        .arrow-left:hover, .arrow-right:hover {
            background-color: rgba(0, 0, 0, .5);
        }
        /*小箭头样式结束*/

        /*小圆点样式*/
        .dot {
            position: absolute;
            width: 124px;
            height: 30px;
            bottom: 30px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            /*这里可以计算一下圆点盒子的宽度占比多少，用50%减去占比即可*/
            left: 44%;
        }
        .dot ul li {
            list-style: none;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            background-color: #f8605f;
            float: left;
            margin: 7px 8px;
        }
        .dot ul li + li {
            background-color: #fff;
        }
    </style>

</head>
<body>
<div class="banner">
    <div class="pic">
        <ul>
            <li>
                <a><img src="1.png"></a>
            </li>
            <li>
                <a><img src="2.png"></a>
            </li>
            <li>
                <a><img src="3.png"></a>
            </li>
            <li>
                <a><img src="4.png"></a>
            </li>
        </ul>
        <!--箭头-->
        <div class="arrow">
            <span class="arrow-left">&lt;</span>
            <span class="arrow-right">&gt;</span>
        </div>
    </div>
    <div class="dot">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
</body>

<script>
    $(function () {
        var num = 0;
        var timer;
        var hasStarted = false;
        $(".banner .arrow-left").click(function () {
            stop();
            --num;
            num = num % $(".pic li").size();
            showpic(num);
        });
        $(".banner .arrow-right").click(function () {
            stop();
            ++num;
            num = num % $(".pic li").size();
            showpic(num);
        });

        function showpic(index) {
            $(".pic li").eq(index).show().siblings().hide();
            $(".dot li").eq(index).css("background", "#f8605f").siblings().css("background", "#fff");
        }

        $(".dot li").hover(function () {
            stop();
            num = $(this).index();
            $(".pic li").eq(num).show().siblings().hide();
            $(this).css("background", "#f8605f").siblings().css("background", "#fff");
        }, start);
        $(".pic li").each(function (index) {
            $(this).hover(function () {
                stop();
                show(index);
                num = index + 1;
            }, start)
        });

        function start() {
            if (!hasStarted) {
                hasStarted = true;
                timer = setInterval(function () {
                    showpic(num);
                    num++;
                    if (num == $(".pic li").size()) {
                        num = 0;
                    }
                }, 2000);
            }
        }

        function stop() {
            clearInterval(timer);
            hasStarted = false;
        }
        start();
    });
</script>
</html>

3、总结

网上有很多轮播图代码，有些效果不是很理想，这个效果还可以，仅供参考学习！

在这里特意感谢sunny06-17，其上传的代码思路很好。

郑先生的喵

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
插件jQuery — jQuery+js 实现轮播图带圆点箭头自动手动轮播

网上有很多轮播图代码，有些效果不是很理想，现在分享给各位同学一个源码，效果还可以，仅供参考学习！说明：1、需要引入jQuery文件，请自行下载引入。2、需要添加图片在这里特意感谢sunny06-17，其上传的代码思路很好。代码如下：<!DOCTYPE html><html><head> <meta charset="ut...
复制链接

扫一扫