jQuery - 广告图片轮播切换

最新推荐文章于 2021-12-27 09:39:06 发布

转载最新推荐文章于 2021-12-27 09:39:06 发布 · 881 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xtdxs/p/6612183.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML、CSS及JavaScript实现的广告图片轮播效果，通过左右箭头控制图片切换，并利用jQuery简化DOM操作。代码中还包含了图片编号对应的小圆点指示器，以增强用户体验。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            /*创建一个集合保存图片*/
            var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
            var  flag=0;  /*代表数组的下标*/
            /*点击向左的按钮*/
            $(".arrowLeft").click(function(){
                var i=0;
                if(flag==0){
                    flag=imgs.length-1;
                    i=flag+1;  /*图片的编号 li中的值*/
                }else{
                    flag--;
                    i=flag+1;  /*图片的编号*/
                }
                $(".adver").css("background","url(images/"+imgs[flag]+")");
                $("li:nth-of-type("+i+")").css("background","orange");
                $("li:nth-of-type("+i+")").siblings().css("background","#333333");
            });
            /*点击向右的按钮*/
            $(".arrowRight").click(function(){
                var i=0;
                if(flag==imgs.length-1){
                    flag=0;
                    i=flag+1;  /*图片的编号*/
                }else{
                    flag++;
                    i=flag+1;  /*图片的编号*/
                }
                $(".adver").css("background","url(images/"+imgs[flag]+")");
                $("li:nth-of-type("+i+")").css("background","orange");
                $("li:nth-of-type("+i+")").siblings().css("background","#333333");
            });

            /*显示→   ← 的按钮*/
            $(".adver").hover((function(){
                $(".arrowRight").show();
                $(".arrowLeft").show();
            }),function(){
                $(".arrowRight").hide();
                $(".arrowLeft").hide();
            })
        })
    </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>
</body>
</html>