圆点左右点击轮播图

最新推荐文章于 2024-01-27 20:21:08 发布

天珩

最新推荐文章于 2024-01-27 20:21:08 发布

阅读量254

点赞数

分类专栏：轮子文章标签： js html css jquery

本文链接：https://blog.csdn.net/weixin_41705396/article/details/103872120

版权

轮子专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果展示在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>


    <script src="../static/js/jquery.min.1.8.1.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .banner{
            width: 700px;
            height: 340px;
            background-color: #fed93a;
            margin-top: 20px;
            margin-left: 20px;
            margin: 0px auto;
            overflow: hidden;
            position: relative;
        }
        .banner .pic ul li{
            list-style: none;
        }
        .left{
            width: 30px;
            height: 50px;
            position: absolute;
            top: 130px;
            left: 20px;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            text-align: center;
            line-height: 50px;

        }
        .right{
            width: 30px;
            height: 50px;
            position: absolute;
            top: 130px;
            right: 20px;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        .dot{
            /*position: absolute;
            width: 200px;
            height: 30px;
            bottom: 30px;
            left: 315px;
            background-color: rgba(0,0,0,0.3);
            border-radius: 15px;*/

            position: absolute;
            width: 200px;
            height: 30px;
            bottom: 30px;
            left: 315px;
            background-color: rgba(0,0,0,0.3);
            border-radius: 15px;
        }
        .dot ul li{
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background-color: #fff;
            float: left;
            margin: 7px 5px;
            padding-left: 2px;
        }
        .dot ul li:hover{
            background-color: #cd0b2d;
        }
    </style>

</head>
<body>


<div class="banner">
    <div class="pic">
        <div class="left"><</div>
        <ul>
            <li>
                <a>
                    <img src="adver01.jpg" >
                </a>
            </li>
            <li>
                <a>
                    <img src="adver02.jpg">
                </a>
            </li>
            <li>
                <a>
                    <img src="adver03.jpg">
                </a>
            </li>
            <li>
                <a>
                    <img src="adver04.jpg">
                </a>
            </li>

            <li>
                <a>
                    <img src="adver05.jpg">
                </a>
            </li>

            <li>
                <a>
                    <img src="adver06.jpg">
                </a>
            </li>
        </ul>
        <div class="right">></div>
    </div>
    <div class="dot">
        <ul>
            <li> 1</li>
            <li> 2</li>
            <li> 3</li>
            <li> 4</li>
            <li> 5</li>
            <li> 6</li>
        </ul>
    </div>
</div>


</body>

<script type="text/javascript">
    $(function(){
        var num=1;
        var timer;
        var hasStarted = false;
        $(".banner .left").click(function(){
            stop();
            --num;
            num = num%$(".pic li").size();
            showpic(num);
        });
        $(".banner .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","red").siblings().css("background","#fff");
        }
        $(".dot li").hover(function () {
            stop();
            num = $(this).index();
            $(".pic li").eq(num).show().siblings().hide();
            $(this).css("background","red").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>