轮播图演练（基础）

最新推荐文章于 2024-07-10 15:49:56 发布

悲催小肖

最新推荐文章于 2024-07-10 15:49:56 发布

阅读量82

点赞数

分类专栏： JavaSeript

本文链接：https://blog.csdn.net/qq_50545975/article/details/116662082

版权

JavaSeript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

轮播图演练案例（基础）

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/carousel.js"></script>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>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>
</body>
</html>

JavaScript jQuery

    //定义一个计数器
    var num = 1;
    //定义一个图片字符串
    var imgPath = "images/adver0?.jpg";
    //显示图片路径
    var path = "";

    function updateImg(){
        $(".adver").css("background","url("+path+")");
    }

    //更新li
    function updateLi(){
        //明确一个li
        var idx = num-1;
        //让对应的li变化
        $(".adver ul li").eq(idx).css("background","orange");
        //让他的兄弟发生变化
        $(".adver ul li").eq(idx).siblings().css("background","#333333")
    }

    $(".adver").mouseover(function(){
        $(".arrowRight").show();
        $(".arrowLeft").show();
    }).mouseout(function(){
        $(".arrowRight").hide();
        $(".arrowLeft").hide();
    })

    //给li添加事件
    $(".adver ul li").click(function () {
        var idx = $(this).index();
        //更新num的值
        num = idx + 1;
        //弹出num
        alert(num);
        //更新图片的显示
        path = imgPath.replace('?',num);
        //更新图片
        updateImg();
        //更新li
        updateLi();
    })

    //箭头点击事件
    $(".arrowLeft").click(function () {
        num--;
        //数据校正
        if (num<1){
            num = 6;
        }
        //字符串的替换
        path = imgPath.replace('?',num);
        //更新图片
        updateImg();
    })
    $(".arrowRight").click(function () {
        //让计数器加一
        num++;
        if (num>6){
            num = 1;
        }
        path = imgPath.replace('?',num);

        //更新图片的方法
        updateImg();
        //更新li的一颜色样式
        updateLi();
    })

悲催小肖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图演练（基础）

轮播图演练案例（基础）代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.css"> <script src="js/carousel.js"></script>
复制链接

扫一扫

专栏目录