HTML中图片轮播效果

左手的ㄟ右手 2021-10-24 00:31 401阅读 0赞

这是一段简单的Html网页中嵌入的图片轮回播放的js源代码，为增添Html一点效果：  
代码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>图片轮播</title>
    <style type="text/css"> 
    #tab{
     overflow:hidden; 
    width:400px;
    height:250px; 
    position:relative;
     float:left;
      border:1px solid red; } 
    #tab>img:not(:first-child){ display:none; }
    </style> 
    <script> 
        window.onload = function(){ 
            var images = document.getElementsByTagName('img'); 
            var pos = 0; 
            var len = images.length; 
            setInterval(function(){ 
                images[pos].style.display = 'none';   /*设置索引为0的图片（就是第一张）样式为dislay：none；*/
                pos = ++pos == len ? 0 : pos; /*如果索引值 == 你所添加图片的数量就把索引值设置为0，如果不等于就把自加后的索引值 赋给pos； */
                images[pos].style.display = 'inline';   /*显示图片*/ 
            },1000); 
        }; 
    
    </script>
    </head>
    
    <body>
    
    <div id="tab"> 
        <img src="pic1.jpg" width="400" height="250"/> /*这里放你需要的照片（数量可以增加）*/
        <img src="pic2.jpg" width="400" height="250"/> /*这个统计的是页面内所有的图片，记得调整*/
        <img src="pic.jpg" width="400" height="250"/>
    </div>
    
    </body>
    </html>

我只是自己收藏使用 勿喷。

发表评论取消回复

表情：

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

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

相关阅读

相关 js html css 图片跑马灯效果（轮播）

js html css 图片跑马灯效果（轮播） js html css 实现图片跑马灯效果（轮播），效果图如下： ![pic][] 代码： html:

今天药忘吃喽~/ 2023年01月05日 01:26/ 0 赞/ 169 阅读

相关 html 图片轮播实例,简单实现轮播图效果的实例

一、要点： 1.页面加载时，图片重合，叠在一起\[绝对定位\]; 2.第一张显示，其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去，显示

- 日理万妓/ 2022年10月06日 07:56/ 0 赞/ 266 阅读

相关 html图片轮播效果加链接,HTML首页怎么加图片轮播？

可以通过输入代码来操作。这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进，先来贴一发代码： ![s1.jpg][] ![s2.jpg][s1.jp

痛定思痛。/ 2022年10月06日 07:53/ 0 赞/ 208 阅读

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果，

比眉伴天荒/ 2022年10月06日 07:52/ 0 赞/ 341 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 325 阅读

相关 html网页简单实现图片轮播效果,CSS3简单实现图片切换轮播

HTML代码： A B C CSS代码：.pic-switch\{ width: 500px; height: 300px; margin: 0px auto;

曾经终败给现在/ 2022年10月06日 06:59/ 0 赞/ 281 阅读

相关 HTML+CSS+JQ实现图片轮播效果

焦点图广泛运用于主页的醒目位置放置广告，简单好用，加上效果也很好看。实现的效果： 5张图片每两秒轮播一次，右下角的数字随图片而变换，鼠标放在数字上图片停止，移走

灰太狼/ 2022年09月25日 02:30/ 0 赞/ 241 阅读

相关 html+css+js简单实现图片轮播效果

<html> <head> <style type="text/css"> \\{background-color:green;\} \lunbo\{ w

雨点打透心脏的1/2处/ 2022年05月29日 06:28/ 0 赞/ 286 阅读

相关 ios图片轮播效果

> 代码地址如下： > [http://www.demodashi.com/demo/11959.html][http_www.demodashi.com_demo_119

一时失言乱红尘/ 2022年05月29日 00:20/ 0 赞/ 267 阅读

相关 HTML中图片轮播效果

这是一段简单的Html网页中嵌入的图片轮回播放的js源代码，为增添Html一点效果：代码： <!doctype html> <html> <he

左手的ㄟ右手/ 2021年10月24日 00:31/ 0 赞/ 402 阅读