js实现首页轮播图效果
最后一次修改 2017年08月21日
1、相关技术
获取元素 document.getElementById(“id 名称”)
事件(onload) 只能写一次并且放到body标签中
定时操作:setInterval(“changeImg()”,3000);
2、步骤分析(此案例轮播图效果是基于HTML&CSS——使用DIV和CSS完成网站首页重构实现的)
事先准备三张一样大小的图片(img1、img2、img3)放在文件夹Img下。
第一步:确定事件(onload)并为其绑定一个函数
第二步:书写绑定的这个函数
第三步:书写定时任务(setInterval)
第四步:书写定时任务里面的函数
第五步:通过变量的方式,进行循环(获取轮播图的位置,并设置 src 属性,在循环的时候需要注意到了最后一 张图片的时候要重置)。
<script> function init(){ //书写轮播图显示的定时操作 setInterval("changImg()",3000); } //书写函数 var i=1; function changImg(){ i++; //获取图片位置并设置src属性值 document.getElementById("img_1").src="../img/"+i+".jpg"; if(i==3){ i=0; } } </script>
Html:
<body onload="init()">
在指定位置定义 id。
最终实现的代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页</title> <style> #father{ border: 0px solid black; width: 1300px; height: 1600px; 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: black; margin-bottom: 10px; } ul li{ display: inline; color: white; } #product{ border: 0px solid goldenrod; width: 1300px; height: 550px; } #product_top{ border: 0px solid blue; width: 100%; height: 43px; padding-top: 5px; } #product_bottom{ border: 0px solid green; width: 100%; height: 498px; } #product_bottom_left{ border: 0px solid red; width: 200px; height: 498px; float: left; } #product_bottom_right{ border: 0px solid saddlebrown; width: 1094px; height: 498px; float: left; } #big{ border: 0px solid hotpink; width: 545px; height: 247px; float: left; } .small{ border: 0px solid blue; width: 180px; height: 247px; float: left; /*让里面的内容居中*/ text-align: center; } #bottom{ text-align: center; } /*去掉超链接的下划线*/ a{ text-decoration: none; } </style> <script> function init(){ //书写轮播图显示的定时操作 setInterval("changImg()",3000); } //书写函数 var i=1; function changImg(){ i++; //获取图片位置并设置src属性值 document.getElementById("img_1").src="../img/"+i+".jpg"; if(i==3){ i=0; } } </script> </head> <body 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> <!--2.导航栏部分--> <div id="menu"> <ul> <a href="#"><li style="font-size: large;">首页</li></a> <a href="#"><li>手机数码</li></a> <a href="#"><li>家用电器</li></a> <a href="#"><li>鞋靴箱包</li></a> </ul> </div> <!--3.轮播图部分--> <div id=""> <img src="../img/1.jpg" width="100%" height="100%" id="img_1"/> </div> <!--4.最新商品--> <div id="product"> <div id="product_top"> <span style="font-size: 25px">最新商品</span> <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"> <a href="#"><img src="../img/small01.jpg" ></a> <a href="#"><p style="color: gray;">榨汁机</p></a> <p style="color: red;">599</p> </div> <div class="small"> <a href="#"><img src="../img/small02.jpg" ></a> <a href="#"><p style="color: gray;">电视机</p></a> <p style="color: red;">1599</p> </div> <div class="small"> <a href="#"><img src="../img/small03.jpg" ></a> <a href="#"><p style="color: gray;">锅</p></a> <p style="color: red;">399</p> </div> <div class="small"> <a href="#"><img src="../img/small04.jpg" ></a> <a href="#"><p style="color: gray;">面包机</p></a> <p style="color: red;">799</p> </div> <div class="small"> <a href="#"><img src="../img/small05.jpg" ></a> <a href="#"><p style="color: gray;">咖啡机</p></a> <p style="color: red;">899</p> </div> <div class="small"> <a href="#"><img src="../img/small06.jpg" ></a> <a href="#"><p style="color: gray;">洗衣机</p></a> <p style="color: red;">999</p> </div> <div class="small"> <a href="#"><img src="../img/small07.jpg" ></a> <a href="#"><p style="color: gray;">扫地机器人</p></a> <p style="color: red;">1599</p> </div> <div class="small"> <a href="#"><img src="../img/small09.jpg" ></a> <a href="#"><p style="color: gray;">微波炉</p></a> <p style="color: red;">1099</p> </div> <div class="small"> <a href="#"><img src="../img/small08.jpg" ></a> <a href="#"><p style="color: gray;">压力锅</p></a> <p style="color: red;">799</p> </div> </div> </div> </div> <!--5.广告图片--> <div id=""> <img src="../img/ad.jpg" width="100%"/> </div> <!--6.广告图片--> <div id=""> <img src="../img/footer.jpg" width="100%"/> </div> <!--7.友情链接和版权信息--> <div id="bottom"> <a href="#"><font>关于我们</font></a> <a href="#"><font>联系我们</font></a> <a href="#"><font>招贤纳士</font></a> <a href="#"><font>法律声明</font></a> <a href="#"><font>友情链接</font></a> <a href="#"><font>支付方式</font></a> <a href="#"><font>配送方式</font></a> <a href="#"><font>服务声明</font></a> <a href="#"><font>广告声明</font></a> <p> Copyright © 2005-2016 hh商城 版权所有 </p> </div> </div> </body> </html>
在浏览器内运行,实现了轮播图的效果。