css+html+javascript制作banner自动轮播图

ゝ一世哀愁。 2023-06-19 02:15 29阅读 0赞

## css+html+javascript制作banner自动轮播图 ##

###### 设计思路 ######

> banner自动轮播图是根据之前的点击切换图片之上进行了修改；在其之上加上了setInterval（）自动调取函数，加上这个函数后，就不用通过点击图片来实现图片的切换。  
> 如果对其他代码不明白的话，可以看一下我之前写的轮播图的！

###### 样式代码： ######

<style>
            *{ 
                padding: 0;
                margin: 0;
                list-style: none;
            }
            #img{ 
                width: 1000px;
                height: auto;
                margin-left: 214px;
            }
            #list{ 
                width: 300px;
                height: 30px;
                margin-left: 650px;
            }
            #list li{ 
                width: 20px;
                height:20px;
                border-radius: 10px;
                cursor: pointer;
                background: #c0c0c0;
                float: left;
    
            }
            .bg{ 
                background: #f9f2f4!important;
            }
        </style>

###### JavaScript代码： ######

<script>
            var i = 0;
            function f(){ 
                var arr = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg"];
                var img = document.getElementById("img");
                i++;
                if(i>=arr.length){ 
                    i=0;
                }
                img.src=arr[i];
                var list = document.getElementById("list");
                var li = list.getElementsByTagName("li");
                for(var j=0;j<li.length;j++){ 
                    li[j].className="";
                }
                li[i].className="bg";
            }
            setInterval("f()",1000);
        </script>

###### HTML代码： ######

<img src="img/01.jpg" id="img" onclick="f()">
    <ul id="list">
        <li class="bg"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

###### 运行结果： ######

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191203202621309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，29人围观）

还没有评论，来说两句吧...

相关阅读

相关 css+html+javascript制作banner自动轮播图

css+html+javascript制作banner自动轮播图设计思路 > banner自动轮播图是根据之前的点击切换图片之上进行了修改；在其之上加上了setI

ゝ一世哀愁。/ 2023年06月19日 02:15/ 0 赞/ 30 阅读

相关 JavaScript做banner轮播图

JavaScript之banner轮播图 > 轮播图分为两种，一种是点击下方圆点，图片跟随圆点的变化而变化；还有一种是这篇文章要写的：点击图片，下方圆点跟随图片的变化而变

超、凢脫俗/ 2023年06月17日 05:57/ 0 赞/ 73 阅读

相关 uni-app Banner ( 轮播图 ) 实现

例子： <view class="page-section-spacing"> <swiper class="swiper" indicato

喜欢ヅ旅行/ 2023年02月08日 15:59/ 0 赞/ 642 阅读

相关 html中制作banner,css banner轮播图怎么做？

css banner轮播图怎么做？下面本篇文章给大家简单介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![5e7dab3f27892231.jp

约定不等于承诺〃/ 2022年10月06日 13:57/ 0 赞/ 316 阅读

相关网站banner导航条轮播图

[下载地址][Link 1] 网站顶部导航菜单带轮播图效果，适合模块比较多的网站，带有左侧和顶部导航菜单。 ![1632292859.png][] dd: [Link

Myth丶恋晨/ 2022年09月13日 00:28/ 0 赞/ 291 阅读

相关 Android——Banner无限轮播图

示例图： ![Center][] 在build.gradle中添加依赖 compile 'com.youth.banner:banner:1.4.9'

小咪咪/ 2022年06月06日 09:36/ 0 赞/ 308 阅读

相关自动轮播banner图

Html代码： <div class="banner"> <img src="images/c.jpg"> <img src="images

太过爱你忘了你带给我的痛/ 2022年02月17日 08:09/ 0 赞/ 352 阅读

相关 uni-app Banner ( 轮播图 ) 实现

Banner `Banner` 的实现使用的是 `swiper` 组件实现，在`swiper`组件里面添加`swiper-item`组件即可实现例子 <

逃离我推掉我的手/ 2021年12月05日 05:49/ 0 赞/ 1062 阅读

相关 Flutter 实现轮播图banner

先上效果图： ![20190731202927595.gif][] flutter的Swiper控件，实现无线轮播： 1.准备首先打开pubspec.yam

野性酷女/ 2021年11月14日 12:40/ 0 赞/ 519 阅读

相关 flutter banner轮播图

仓库地址： `https://pub.dev/packages/flutter_swiper` 加yaml文件中加入依赖，目前可能为比较好用的banner轮播图

柔光的暖阳◎/ 2021年08月19日 16:40/ 0 赞/ 467 阅读