jquery 实现轮播图效果

最新推荐文章于 2023-09-14 18:36:20 发布

Jack null

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量116

点赞数

分类专栏：案例文章标签： jquery

本文链接：https://blog.csdn.net/qq_50414902/article/details/116672291

版权

案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver">
    <ul>
        <li class="one">1</li>
        <li class="one2">2</li>
        <li class="one3">3</li>
        <li class="one4">4</li>
        <li class="one5">5</li>
        <li class="one6">6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
<script>
    //数组
    var aList =["adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"];
    //首先获取这个左边按钮
    $(function () {
        //新建当前索引
        var r = 0;
        $(".arrowLeft").click(function () {
            //当鼠标点击这个按钮时减少索引显示图片
            r--;
            $(".adver").css("background","url(images/"+aList[r]+")");
            if (r==-1){
                alert("最后一张了不能再减了")
                r=0;
                $(".adver").css("background","url(images/"+aList[r]+")");
            }
        })

        $(".arrowRight").click(function () {
            //获取当前索引
            //当鼠标点击这个按钮时增加索引显示图片
            r++;
            $(".adver").css("background","url(images/"+aList[r]+")");
            //当 当前下标等于数组的长度时那就回到一号下标
            if (r==aList.length){
                r=0;
                $(".adver").css("background","url(images/"+aList[r]+")");
            }
        })
        //下标切换图片
        $(".one").click(function () {
            $(".adver").css("background","url(images/"+aList[0]+")");
        })

        $(".one2").click(function () {
            $(".adver").css("background","url(images/"+aList[1]+")");

        })

    })

Jack null

关注

0
点赞
踩
2

收藏

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

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.css"></head><body><div class="adver"> <ul>
复制链接

扫一扫