jq和js轮播广告的小事例

最新推荐文章于 2024-12-04 10:25:08 发布

絵飛ヾ的魚

最新推荐文章于 2024-12-04 10:25:08 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 javascript Javaquery

本文链接：https://blog.youkuaiyun.com/qq_42408149/article/details/82707889

HTML5 同时被 3 个专栏收录

47 篇文章

订阅专栏

javascript

15 篇文章

订阅专栏

Javaquery

7 篇文章

订阅专栏

本文详细介绍了使用HTML、CSS和JavaScript实现广告图片轮播切换的方法，包括图片数组加载、鼠标事件处理、自动切换功能及响应用户操作的暂停与恢复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="jquery-3.3.1.js"></script>
    <script src="jquery-3.3.1.min.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">&lt;</div>
        <div class="arrowRight">&gt;</div>
    </div>
</body>
<script>

    var num = 1;
    var time = null;
    // 一开始就加载图片装在图片数组中
    function getImg(pNum) {
        // 保存图片的数组
        var img_Array = new Array();
        for (var i = 0; i < 6; i++) {
            img_Array[i] = "images/adver0" + (i + 1) + ".jpg";
        }

        return img_Array[pNum - 1];
    }
    // 定义鼠标进入图片的三角形的显示和隐藏
    $(".adver").mouseover(
        function () {
            $(".arrowLeft,.arrowRight").show();
        });
    $(".adver").mouseout(
        function () {
            $(".arrowLeft,.arrowRight").hide();
        });


    $(function () {
        // 定义鼠标单击三角的方法
        $(".arrowRight").click(function () {
            num++;
            
            clickImg(num);

        });
        $(".arrowLeft").click(function () {
            num--;
          
            clickImg(num);
        });

        $(".adver ul li").css("cursor", "pointer");
        // 按下面的数字来切换图片
        $(".adver ul li").click(function () {
            // 获取单击的哪个数字的内容
            var clickNum = $(this).text();
            clickImg(clickNum);
        });
        $(".adver ul li").mouseover(function(){
            stopSwitch();
            var strNum=$(this).text();
           var vNum= parseInt(strNum);
           clickImg(vNum);

        });
        $(".adver ul li").mouseout(function(){
            var strNum=$(this).text();
            var vNum= parseInt(strNum);
            num = vNum;
            startSwitch();
            
        });
         
        $(".arrowLeft").mouseover(function(){
				stopSwitch();
			});
			$(".arrowLeft").mouseout(function(){
				startSwitch();
			});
	
			$(".arrowRight").mouseover(function(){
				stopSwitch();
			});
			$(".arrowRight").mouseout(function(){
				startSwitch();
			});


    });
    // 切换图片
    function clickImg(pNum) {
        if (pNum > 6) {
            pNum = 1;
          
        }
        if (pNum < 1) {
            pNum = 6;
           
        }
        num = pNum;
        $(".adver").css("background", "url(" + getImg(pNum) + ")");
        $("li:nth-of-type(" + pNum + ")").css({ "backgroundColor": "orange", "color": "white" });
        $("li:nth-of-type(" + pNum + ")").siblings().css({ "backgroundColor": "#333333", "color": "white" });
    }



    // 然后自动切换图片
    function autoSwicht() {
        num++;
        if (num > 6) {
            num = 1;
        }
        clickImg(num);
    }
    // 开始自动切换图片
    function startSwitch() {
        time = setInterval("autoSwicht()", 1000);
    }
    // 停止自动切换图片
    function stopSwitch() {
        clearInterval(time);
    }

    $(function () {
        startSwitch();
    });




</script>

</html>