jQuery实现图片轮播效果

最新推荐文章于 2023-04-17 20:09:11 发布

psxhh

最新推荐文章于 2023-04-17 20:09:11 发布

阅读量133

点赞数

分类专栏： Python 文章标签： html css jquery

本文链接：https://blog.csdn.net/psxhh/article/details/104341230

版权

Python 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin-top: 0;margin-left: 0;}
        .outer{
            margin-left: 350px;
            margin-top: 150px;
            //border: 1px red solid;
            width: 520px;
            height:280px;
            position: relative;
        }
        .outer .imgs{
            display: inline-block;
            padding: 0px;
            position: relative;
        }
        .outer .imgs li{
            list-style-type: none;
            float: left;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .outer .dot {
            position: absolute;
            left: 180px;
            bottom: 12px;
            padding: 0px;
        }
        .outer .dot li{
            list-style-type: none;
            color: gray;
            background-color: beige;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-left: 10px;
            text-align: center;
            line-height: 20px;
        }
        .outer .LR div{
            position: absolute;
            width: 50px;
            height: 30px;
            top: 110px;
            background-color: beige;
            text-align:center;
            line-height: 30px;
            display: none;
        }
        .outer .LR .L{
            left: 0px;
        }
        .outer .LR .R{
            right: 0px;
        }
        .outer:hover .LR div{
            display: block;
        }
        .outer .dot .red{
            background-color: green;
        }
    </style>
</head>
<body>
<div class="outer">
    <ul class="imgs">
        //替换图片连接
        <li class="img"><a href=""><img src="img/1.jpg/" alt=""></a></li>
        <li class="img"><a href=""><img src="img/2.jpg/" alt=""></a></li>
        <li class="img"><a href=""><img src="img/3.jpg/" alt=""></a></li>
        <li class="img"><a href=""><img src="img/4.jpg/" alt=""></a></li>
        <li class="img"><a href=""><img src="img/5.jpg/" alt=""></a></li>
    </ul>
    <ul class="dot">
    </ul>
    <div class="LR">
        <div class="L"><</div>
        <div class="R">></div>
    </div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
    //新增点标签
    var imgNum=$(".outer .imgs li").length;
    for (var i=0;i<imgNum;i++){
        $(".outer .dot").append("<li></li>");
    }
    //手动变换
    $(".outer .dot li").mouseover(function () {
        var tip=$(this).index();
        $(this).addClass("red").siblings().removeClass("red");
        $(".outer .imgs li").eq(tip).show();
        $(".outer .imgs li").eq(tip).siblings().hide();
    })
    //自动变换
    var v=setInterval(fr,1500);
    var autoTime=-1;
    function fr() {
        if (autoTime==imgNum-1){
            autoTime=-1;
        }
        autoTime++;
        $(".outer .dot li").eq(autoTime).addClass("red").siblings().removeClass("red");
        $(".outer .imgs li").eq(autoTime).stop().show();
        $(".outer .imgs li").eq(autoTime).siblings().stop().hide();
    }
    function fl() {
        if (autoTime==0){
            autoTime=imgNum;
        }
        autoTime--;
        $(".outer .dot li").eq(autoTime).addClass("red").siblings().removeClass("red");
        $(".outer .imgs li").eq(autoTime).stop().show();
        $(".outer .imgs li").eq(autoTime).siblings().stop().hide();
    }
    //鼠标移进停止自动切换
    $(".outer").hover(function () {
        clearInterval(v);
    },
    function () {
        v=setInterval(fr,1500);
    })
    //左右按钮手动切换
    $(".outer .LR .R").click(fr);
    $(".outer .LR .L").click(fl);
</script>
</body>
</html>

psxhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现图片轮播效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin-top: 0;margin-left: 0;} .oute...
复制链接

扫一扫