前端简单入门第八讲 使用JavaScript完成图片自动轮播的效果

于 2017-04-27 23:16:09 发布
阅读量2.9k 收藏 5
点赞数 1
分类专栏： ▬▬▬【教你一天玩转JavaScript】 前端简单入门 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yerenyuan_pku/article/details/70880760
版权

本文教你如何使用JavaScript完成图片的轮播，说是图片的轮播，其实就是图片的滚动而已，也没什么高深莫测的实质性的东西。要实现这个效果，须理解BOM(浏览器对象模型)中的Window对象的定时的操作：

  • 设置定时的方法
    这里写图片描述
  • 清除定时的方法
    这里写图片描述

现在我来写一个小的Demo来稍微讲一下Window对象设置定时的方法。例如有如下一个【Window对象的定时操作.html】页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function setTime(){
				window.setInterval("alert('aaa')", 5000); // 每隔5秒弹出一个对话框
			}
		</script>
	</head>
	<body onload="setTime()">
		
	</body>
</html>

在Firefox浏览器上运行该页面，则每隔5秒就会弹出一个对话框。再将该页面改成：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function setTime(){
				window.setTimeout("alert('bbb')", 5000);
			}
		</script>
	</head>
	<body onload="setTime()">
		
	</body>
</html>

在Firefox浏览器上运行该页面，则隔5秒钟弹出一个对话框之后就运行完毕了。下面我为大家提供一个【使用JS实现图片滚动效果.html】页面，内容如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			#bodyDiv{
				border:1px solid blue;
				width:90%;
			}
			
			.logoDiv{
				border:1px solid blue;
				width:33%;
				float:left;
				height:50px;
			}
			
			.clear{
				clear:both;
			}
			
			#menuDiv{
				width:100%;
				height:50px;
				border:1px solid blue;
				background-color: black;
			}
			
			#imgDiv{
				width:100%;
				border:1px solid blue;
			}
			
			#menuDiv a{
				font-size: 20px;
				color: white;
			}
			.productClass{
				width:100%;
				border:1px solid blue;
			}
			.contentClass{
				width:100%;
				border:1px solid blue;
			}
			.contentClass font{
				font-size: 30px;
				color: black;
				
			}
		</style>
	</head>
	<body>
		<!-- 整体的DIV -->
		<div id="bodyDiv">
			<!-- logo的DIV -->
			<div>
				<div class="logoDiv">
					<img src="../img/logo2.png" height="48">
				</div>
				<div class="logoDiv">
					<img src="../img/header.png" height="48">
				</div>
				<div class="logoDiv">
					<a href="">登录</a>
					<a href="">注册</a>
					<a href="">购物车</a>
				</div>
				<div class="clear"></div>
				
			</div>	
			<!-- Menu的DIV -->
			<div id="menuDiv">
				<a href="">首页</a>&nbsp;&nbsp;
				<a href="">电脑办公</a>&nbsp;&nbsp;
				<a href="">手机数码</a>&nbsp;&nbsp;
				<a href="">烟酒糖茶</a>&nbsp;&nbsp;
			</div>	
			<!-- 图片滚动的DIV -->
			<div id="imgDiv">
				<img id="img1" src="../img/1.jpg" width="100%">
			</div>	
			<!-- 热门商品的DIV -->
			<div class="productClass">
				<!-- 文字部分的DIV -->
				<div class="contentClass">
					<font>热门商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV -->
				<div style="width:100%;border:1px solid blue;">
					<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					
					<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
						<div>
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			<!-- 广告的DIV -->
			<div style="width:100%;border:1px solid blue;">
				 <img src="../img/ad.jpg" width="100%" height="80">
			</div>	
			<!-- 最新商品的DIV -->
			<div class="productClass">
				<!-- 文字部分的DIV -->
				<div class="contentClass">
					<font>最新商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV -->
				<div style="width:100%;border:1px solid blue;">
					<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					
					<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
						<div>
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			<!-- 页脚的DIV -->
			<div  style="width:100%;border:1px solid blue;">
				<img src="../img/footer.jpg" width="100%">
			</div>	
			<!-- 友情链接及版权的DIV -->
			<div style="width:100%;border:1px solid blue;">
				<center>
					关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>
					Copyright © 2005-2016 传智商城 版权所有 
				</center>
			</div>	
		</div>
	</body>
</html>

找到图片滚动的div元素：

<div id="imgDiv">
	<img id="img1" src="../img/1.jpg" width="100%">
</div>

给大家看一眼，接下来主要就是围绕该div元素按照如下步骤进行讲解：

  1. 当页面加载的时候开始计时，并使用onload事件；
  2. 编写onload事件触发的函数；
  3. 获得操作图片的控制权；
  4. 修改图片的src的属性。

如此一来，完成图片轮播的效果的JavaScript代码为：

<script>
	// 当窗口被加载时就触发一个函数
	window.onload = function() {
		// 设置定时
		window.setInterval("changeImg()", 5000);
	}
	var i = 1;
	function changeImg(){
		// alert("aaaa");
		i++;
		// 获得图片的控制权
		if(i > 3){
			i=1;
		}
		var img1 = document.getElementById("img1");
		img1.src="../img/" + i + ".jpg";
	}
</script>

如要查看完整代码，可参考前端简单入门第八讲 使用JavaScript完成图片自动轮播的效果!

李阿昀
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

李阿昀

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

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

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

打赏作者

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

抵扣说明：

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

余额充值