简单的js制作轮播图

雨点打透心脏的1/2处 2022-05-12 14:50 229阅读 0赞

编辑html代码  
使用数据存入图片,操作数据的下标,设定setInterval方法,每隔几秒执行一次

<!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.min.js"></script>
    
    </head>
    
    <body>
        <div class="adver" onmouseover="over();" onmouseout="out();">
            <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>
        </div>
        <script>
            //全局变量,用来存储索引
            var imageNum = 1;
            //全局变量用来存储setinterval的方法对象
            var time = null;
            //定义左右按键事件
            function over() {
                $(".arrowLeft,.arrowRight").show();
            }
            function out() {
                $(".arrowLeft,.arrowRight").hide();
            }
            //创建图片数组
            function getImagesStr(num) {
                var imagesStr = new Array();
                for (var i = 0; i < 6; i++) {
                    imagesStr[i] = "images/adver0" + (i + 1) + ".jpg";
                }
                return imagesStr[num - 1];
            }
            //设置背景图片,控制全局变量
            function switchIamges(number) {
                if (number <= 0) {
                    number = 6
                }
                if (number > 6) {
                    number = 1;
                }
                imageNum = number;
                $(".adver").css("background", "url('" + getImagesStr(number) + "')");
                $("li").css({ "backgroundColor": "#333333", "color": "white" });
                $(".adver ul li:eq('" + (number - 1) + "')").css({ "backgroundColor": "#FFA403", "color": "white" });
    
            }
            $(document).ready(function () {
                //定义左右按键单击事件
                $(".arrowRight").click(function () {
                    imageNum++;
                    switchIamges(imageNum);
                });
                $(".arrowLeft").click(function () {
                    imageNum--;
                    switchIamges(imageNum);
                });
                //加载页面就进行动画操作,图片轮流播放
                startImages();
                //定义左右按键事件
                $(".arrowRight").mouseover(function () {
                    stopimages();
                });
                $(".arrowRight").mouseout(function () {
                    startImages();
                });
                $(".arrowLeft").mouseover(function () {
                    stopimages();
                });
                $(".arrowLeft").mouseout(function () {
                    startImages();
                });
    
    
    
                //获取数字按钮对象,定义事件
                $(".adver ul li").mouseover(function () {
                    stopimages();
                    var liNum = $(this).text();
                    var vLiNum = parseInt(liNum);
                    switchIamges(vLiNum);
                });
                $(".adver ul li").mouseout(function () {
                    startImages();
                    var liNum = $(this).text();
                    var vLiNum = parseInt(liNum);
                    switchIamges(vLiNum);
                });
            });
    
    
    
    
            //图片自动轮播
            function imagesAuto() {
                imageNum++;
                switchIamges(imageNum);
            }
            //定义事件,每隔多少毫秒执行一次
            function startImages() {
                time = setInterval("imagesAuto()", 2000);
            }
            //定义停止事件,调用该方法则停止轮播
            function stopimages() {
                clearInterval(time);
            }
        </script>
    </body>
    
    </html>

在这里的数组图片,我只是使用图片名字差不多的图片,进行存入数组,根据图片的名字进行轮播

![在这里插入图片描述][70]

对于css,可以随意

只是分享这个思维

提供以后反复看,有效提高对于数组的玩法

--------------------

2018-10-30更新

以上有两个动态图的jq代码

先定义一个数组  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70]  
之后取得数组的长度  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 1]  
定义一个变量  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 2]  
之后再定义一个方法  
在这个方法中,使用jq的方法,使用节点的id.节点的属性设置属性的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 3]  
在这里的img\[i\]获取数组中的值给src.设置src的值  
之后i++;  
判断i是否大于等于size,就是是否大于数组的长度,为了使图片可以来回轮播.所以设置当i大于等于size的时候,将i的值设置为0,从0开始进行来回轮播

之后再定义一个方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 4]  
在这个方法中,使用了setInterval的方法,表示时隔一段时间执行一次chImg()的方法,  
在chImg()中,我在上面也有说明,这里截图整体  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 5]

setInterval("chImg()", 100);

这段代码表示每隔0.1秒执行一次上面chImg().因为这里是动画,所以设置时隔时间比较短

之后写入jq的reday()方法中,在页面打开的时候就执行的主入口,

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 6]

在这个主入口中的\`startSwitchp();方法,

也是一致的.这里我们为了实现点击图片可以查询相关的商家资料,所以我们加入了设置了href的属性,  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 7]

也是使用了相同的方法设置节点href的属性值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 8]

也是使用setInterval()的方法设置每隔多少时间执行一次,  
\`![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 9]

在这个方法中,在主入口也有加入,所以在打开页面的时候就会执行

在jsp中的代码编写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 10]

[70]: /images/20220504/cc17f7c6a6ac47519c9338280577e672.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70]: /images/20220504/167eb84e96114e409eac92e3566bdaab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 1]: /images/20220504/65546c4c08b54a7d9703a4c101d1a64c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 2]: /images/20220504/a46864dff7654784b2afca2f64618a0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 3]: /images/20220504/cad7d700fc914babaf91b1bf54508cc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 4]: /images/20220504/34cd61e6e07c4aa0899e4d9e88363931.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 5]: /images/20220504/12f0e4877e6d4074830fbb202235a2f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 6]: /images/20220504/a06456322d9244aca4bdc7985c80adfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 7]: /images/20220504/53d64d3fb03b4707acd7b8f144007a3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 8]: /images/20220504/8106c79ada0b4400990e60486e4ce8b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 9]: /images/20220504/76b0f9b394d0442d8f70839c552e8980.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk3OTg0MA_size_16_color_FFFFFF_t_70 10]: /images/20220504/73e2e65813054964b19736be87fc7c2d.png