欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

图片轮播带小圆点选择左右切换

程序员文章站 2022-06-01 11:33:17
...

图片轮播效果

导入JS

图片轮播带小圆点选择左右切换

html代码

<body>
    <div class="banner">
        <div class="pic">
            <div class="left"><</div>
            <ul>
                <li>
                    <a>
                        <img src="img/1.jpg" >
                    </a>
                </li>
                <li>
                    <a>
                        <img src="img/2.jpg">
                    </a>
                </li>
                <li>
                    <a>
                        <img src="img/3.jpg">
                    </a>
                </li>
                <li>
                    <a>
                        <img src="img/4.jpg">
                    </a>
                </li>
            </ul>
            <div class="right">></div>
        </div>
        <div class="dot">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>

css代码


<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .banner{
            width: 790px;
            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: 124px;
            height: 30px;
            bottom: 30px;
            left: 315px;
            background-color: rgba(0,0,0,0.3);
            border-radius: 15px;
        }
        .dot ul li{
            list-style: none;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            background-color: #fff;
            float: left;
            margin: 7px 8px;
        }
        .dot ul li:hover{
            background-color: #cd0b2d;
        }
    </style>

JS代码

$(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();
});


相关标签： 图片轮播 小圆点选择 左右切换

上一篇： 修改AlertDialog的button的字体颜色

下一篇： label缩进后无法显示省略符，label富文本缩进后的省略符

推荐阅读