css3图片轮播效果

ゝ一世哀愁。 2022-02-15 14:53 327阅读 0赞

# **HTML5前端 广告的轮播效果 第一步** #

## 轮播效果图分两部分 ##

**1. css样式的设计**  
**2. js实现图片的轮播**  
**css样式：**

<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    				list-style: none;
    				text-decoration: none;
    				text-decoration: none;
    			}
    			#banner{
    				height: 460px;
    				width: 1200px;
    				overflow: hidden;
    				border: 1px solid #999;
    				position: relative;
    			}
    			#imglist{
    				width: 1200px;
    				height: 460px;
    			}
    			#iconlist{
    				position: absolute;
    				right: 20px;
    				bottom: 10px;
    				
    			}
    			#iconlist li{
    				width: 25px;
    				height: 25px;
    				line-height: 25px;
    				text-align: center;
    				float: left;
                    background-color: #999;
                    border-radius:13px ;
                    margin-left: 5px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="banner">
    			<div id="imglist">
    				<a href="#"><img src="../LunBoTeXiao/img/bg1.jpg"/></a>
    				<a href="#"><img src="../LunBoTeXiao/img/bg2.jpg"/></a>
    				<a href="#"><img src="../LunBoTeXiao/img/bg3.jpg"/></a>
    			</div>
    			
    			<ul id="iconlist">
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    			</ul>
    		</div>

**js实现**

<script type="text/javascript">
    //声明 imgs保存从“imglist”下的所有a标签
    			var imgs=document.getElementById("imglist").getElementsByTagName("a");
    			
    			//设置一个循环变量
                 var m=1;
                 
                 //设置一个定时器
                 var timer=setInterval(run,1000);
                 //循环函数
                 function run(){
                 	if(m>=3){
                 		m=0;
                 	}
                 	controlimg(m)
                 	m++;
                 }
                 
                 //定义一个函数  控制图片
                 function controlimg(n){
                 	for(var i=0; i<imgs.length;i++){
                 		imgs[i].style.display="none";
                 		
                 	}
                 	//显示指定的图片
                 	imgs[n].style.display="block"
                 }
    		</script>

### 效果展示 ###

[轮播展示][Link 1]

[Link 1]: http://127.0.0.1:8020/pidada-LunBoTeXiao-master/%E7%BB%83%E4%B9%A0/%E5%9B%BE%E7%89%87%E8%BD%AE%E6%92%AD.html?__hbt=1556096362307

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法

我们在网页上经常会看到有一块位置会有很多的图片来回切换，这就是轮播图，轮播图的出现，让重要的信息可以在一个位置显现，那么，轮播图是如何实现的呢？轮播图的实现用js或者css都可

妖狐艹你老母/ 2022年10月12日 05:41/ 0 赞/ 331 阅读

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

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

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

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

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

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

相关 CSS实现3D轮播效果

通过大牛张鑫旭的分享理解css 3D图片轮播效果 [http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-

小咪咪/ 2022年09月27日 15:26/ 0 赞/ 535 阅读

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

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

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

相关 +【CSS3】使用纯css代码实现图片轮播效果

> 使用纯CSS3代码实现简单的图片轮播。 > > 基本思路： > > 以5张图片为例： > > 1.基本布局： > > 将5张图片左浮动横向并排放入一

左手的ㄟ右手/ 2022年08月05日 11:20/ 0 赞/ 237 阅读

相关 ios图片轮播效果

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

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

相关 css3图片轮播效果

HTML5前端广告的轮播效果第一步轮播效果图分两部分 1. css样式的设计 2. js实现图片的轮播 css样式： <style type

ゝ一世哀愁。/ 2022年02月15日 14:53/ 0 赞/ 328 阅读

相关 css:用css实现图片旋转轮播3d效果

CSS3的transform-style: :css3属性，在3d空间非常重要的一个属性，有两个值： flat 子元素将不保留其 3D 位置，默认值。 preser

「爱情、让人受尽委屈。」/ 2022年02月15日 01:49/ 1 赞/ 877 阅读