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

最新推荐文章于 2024-06-14 09:24:52 发布

sunny06-17

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量1.4w

点赞数 11

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

本文链接：https://blog.csdn.net/wjlvxuewei/article/details/77863289

版权

图片轮播效果

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