案例二:使用JS事件轮播图

博客介绍了图片轮播的实现方法,包括手动和自动两种方式。手动方式需点击按钮切换图片,图片命名要有数字以用数字增加切换;自动方式要确定 onload() 事件,指定触发函数 init(),设置定时和循环函数,编写轮播切换图片函数。

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

一、手动方式实现图片的轮播。

点击按钮切换图片。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击按钮实现轮播图</title>
		<style type="text/css">
			div{border: 1px solid white;
				width: 500px;
				height: 350px;
				margin: auto;
				align-content: center;
			}
		</style>
		<script type="text/javascript">
		     var i=1;
			  function changeImg(){
			  	i++;
			  	document.getElementById("img1").src="../img/"+i+".jpg";
			  	if(i==3){
			  		i=0;
			  	}
			  }
		</script>
	</head>
	<body>
      <div id="01">
      	  <input type="button" value="下一张"  onclick="changeImg()" />
        <img src="../img/1.jpg"  id="img1" width="100%" height="100%"/>
      </div>
	</body>
</html>

图片命名必须有数字,才能使用数字增加切换不同的图片。

效果:

 

二、实现图片的自动轮播

图片轮播实现
         *  1、确定所要使用的事件 onload()
         *  2、事件里面指定触发函数 init();
         *  3、书写函数,设置定时,以及所要循环的函数
         *  4、编写轮播切换图片函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			#father{
				border: 0px solid red;
				width: 1300px;
				height: 2170px;
				margin: auto;
			}
			/*#logo{
				border: 0px solid black;
				width: 1300px;
				height: 50px;
			}*/
			.top{
				border: 0px solid blue;
				width: 431px;
				height: 50px;
				float: left;
			}
			#top{
				padding-top: 12px;
				height: 38px;
			}
			#menu{
				border: 0px solid red;
				width: 1300px;
				height: 50px;
				background-color: black;
				margin-bottom: 10px;
			}
			ul li{
				display: inline;
				color: white;
			}
			#clear{
				clear: both;
			}
			
			#product{
				border: 0px solid red;
				width: 1300px;
				height: 558px;
			}
			#product_top{
				border: 0px solid blue;
				width: 100%;
				height: 45px;
				padding-top: 8px;
			}
			#product_bottom{
				border: 0px solid green;
				width: 100%;
				height: 500px;
			}
			#product_bottom_left{
				border: 0px solid red;
				width: 200px;
				height: 500px;
				float: left;
			}
			#product_bottom_right{
				border: 0px solid blue;
				width: 1094px;
				height: 500px;
				float: left;
			}
			#big{
				border: 0px solid red;
				width: 544px;
				height: 248px;
				float: left;
			}
			.small{
				border: 0px solid blue;
				width: 180px;
				height: 248px;
				float: left;
				/*让里面的内容居中*/
				text-align: center;
			}
			
			#bottom{
				text-align: center;
			}
			
			a{
				text-decoration: none;
			}
		</style>
		<script type="text/javascript">
		
		/** 案例一
		 *  图片轮播实现
		 *  1、确定所要使用的事件 onload()
		 *  2、事件里面指定触发函数 init();
		 *  3、书写函数,设置定时,以及所要循环的函数
		 *  4、编写轮播切换图片函数
		 * 
		 */
		
		
		
		
		
	      //3、轮播图的定时函数操作
		   var i=1;
		    function init(){
		   
		    window.setInterval("changeImg()",2000);
		   
		 	
		 }
		 //4、轮播函数切换图片
		    var i=0;
		    function changeImg(){
		 	i++;
		   document.getElementById("img1").src="../img/"+i+".jpg"
		   if(i==3){
		     i=0
		 }

		 }
		 
		 
		</script>
	</head>
	<body onload="init()">
		<div id="father">
			<!--1.logo部分-->
			<div id="logo">
				<div class="top">
					<img src="../img/logo2.png" height="46px"/>
				</div>
				<div class="top">
					<img src="../img/header.png" height="46px" />
				</div>
				<div class="top" id="top">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			<div id="clear">
				
			</div>
			<!--2.导航栏部分-->
			<div id="menu">
				<ul>
					<a href="#"><li style="font-size: 20px;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>孕婴保健</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>奢侈品</li></a>
				</ul>
			</div>
			<!--3.轮播图部分-->
			<div id="" >
				<img src="../img/1.jpg" width="100%" id="img1"/>
			</div>
			<!--4.最新商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%"/>
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--5.广告图片-->
			<div id="">
				<img src="../img/ad.jpg" width="100%"  />
			</div>
			<!--6.热门商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">热门商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%"/>
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--7.广告图片-->
			<div id="">
				<img src="../img/footer.jpg" width="100%"/>
			</div>
			<!--8.友情链接和版权信息-->
			<div id="bottom">
				<a href="#">关于我们</a>
				<a href="#">联系我们</a>
				<a href="#">招贤纳士</a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服务声明</a>
				<a href="#">广告声明</a>
				<p>
					Copyright © 2005-2016  版权所有 
				</p>
			</div>
		</div>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

真香号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值