JavaScript学习——使用JS实现首页轮播图效果
1、相关技术
获取元素 document.getElementById(“id 名称”)
事件(onload) 只能写一次并且放到body标签中
定时操作：setInterval(“changeImg()”,3000);
2、步骤分析（此案例轮播图效果是基于HTML&CSS——使用DIV和CSS完成网站首页重构实现的）
事先准备三张一样大小的图片（img1、img2、img3）放在文件夹Img下。
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性，在循环的时候需要注意到了最后一 张图片的时候要重置）。
1 <script> 2 function init(){ 3 //书写轮播图显示的定时操作 4 setInterval("changImg()",3000); 5 } 6 7 //书写函数 8 var i=1; 9 function changImg(){ 10 i++; 11 12 //获取图片位置并设置src属性值 13 document.getElementById("img_1").src="../img/"+i+".jpg"; 14 if(i==3){ 15 i=0; 16 } 17 } 18 </script>
Html：
<body onload="init()">
在指定位置定义 id。
最终实现的代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首页</title> 6 <style> 7 #father{ 8 border: 0px solid black; 9 width: 1300px; 10 height: 1600px; 11 margin: auto; 12 } 13 #logo{ 14 border: 0px solid black; 15 width: 1300px; 16 height: 50px; 17 } 18 .top{ 19 border: 0px solid blue; 20 width: 431px; 21 height: 50px; 22 float: left; 23 } 24 #top{ 25 padding-top: 12px; 26 height: 38px; 27 } 28 29 #menu{ 30 border: 0px solid red; 31 width:1300px; 32 height: 50px; 33 background: black; 34 margin-bottom: 10px; 35 } 36 ul li{ 37 display: inline; 38 color: white; 39 } 40 #product{ 41 border: 0px solid goldenrod; 42 width: 1300px; 43 height: 550px; 44 } 45 #product_top{ 46 border: 0px solid blue; 47 width: 100%; 48 height: 43px; 49 padding-top: 5px; 50 } 51 #product_bottom{ 52 border: 0px solid green; 53 width: 100%; 54 height: 498px; 55 } 56 57 #product_bottom_left{ 58 border: 0px solid red; 59 width: 200px; 60 height: 498px; 61 float: left; 62 } 63 #product_bottom_right{ 64 border: 0px solid saddlebrown; 65 width: 1094px; 66 height: 498px; 67 float: left; 68 } 69 #big{ 70 border: 0px solid hotpink; 71 width: 545px; 72 height: 247px; 73 float: left; 74 } 75 .small{ 76 border: 0px solid blue; 77 width: 180px; 78 height: 247px; 79 float: left; 80 /*让里面的内容居中*/ 81 text-align: center; 82 } 83 #bottom{ 84 text-align: center; 85 } 86 /*去掉超链接的下划线*/ 87 a{ 88 text-decoration: none; 89 } 90 </style> 91 92 <script> 93 function init(){ 94 //书写轮播图显示的定时操作 95 setInterval("changImg()",3000); 96 } 97 98 //书写函数 99 var i=1; 100 function changImg(){ 101 i++; 102 103 //获取图片位置并设置src属性值 104 document.getElementById("img_1").src="../img/"+i+".jpg"; 105 if(i==3){ 106 i=0; 107 } 108 } 109 </script> 110 </head> 111 <body body onload="init()"> 112 <div id="father"> 113 <!--1.logo部分--> 114 <div id="logo"> 115 <div class="top"> 116 <img src="../img/logo2.png" height="46px" /> 117 </div> 118 <div class="top"> 119 <img src="../img/header.png" height="46px"/> 120 </div> 121 <div class="top" id="top"> 122 <a href="#">登录</a> 123 <a href="#">注册</a> 124 <a href="#">购物车</a> 125 </div> 126 </div> 127 128 <!--2.导航栏部分--> 129 <div id="menu"> 130 <ul> 131 <a href="#"><li style="font-size: large;">首页</li></a> 132 <a href="#"><li>手机数码</li></a> 133 <a href="#"><li>家用电器</li></a> 134 <a href="#"><li>鞋靴箱包</li></a> 135 </ul> 136 </div> 137 138 <!--3.轮播图部分--> 139 <div id=""> 140 <img src="../img/1.jpg" width="100%" height="100%" id="img_1"/> 141 </div> 142 143 <!--4.最新商品--> 144 <div id="product"> 145 146 <div id="product_top"> 147 <span style="font-size: 25px">最新商品</span> 148 <img src="../img/title2.jpg"/> 149 </div> 150 151 <div id="product_bottom"> 152 153 <div id="product_bottom_left"> 154 <img src="../img/big01.jpg" width="100%" height="100%" /> 155 </div> 156 157 <div id="product_bottom_right"> 158 <div id="big"> 159 <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a> 160 </div> 161 162 <div class="small"> 163 <a href="#"><img src="../img/small01.jpg" ></a> 164 <a href="#"><p style="color: gray;">榨汁机</p></a> 165 <p style="color: red;">599</p> 166 </div> 167 <div class="small"> 168 <a href="#"><img src="../img/small02.jpg" ></a> 169 <a href="#"><p style="color: gray;">电视机</p></a> 170 <p style="color: red;">1599</p> 171 </div> 172 <div class="small"> 173 <a href="#"><img src="../img/small03.jpg" ></a> 174 <a href="#"><p style="color: gray;">锅</p></a> 175 <p style="color: red;">399</p> 176 </div> 177 <div class="small"> 178 <a href="#"><img src="../img/small04.jpg" ></a> 179 <a href="#"><p style="color: gray;">面包机</p></a> 180 <p style="color: red;">799</p> 181 </div> 182 <div class="small"> 183 <a href="#"><img src="../img/small05.jpg" ></a> 184 <a href="#"><p style="color: gray;">咖啡机</p></a> 185 <p style="color: red;">899</p> 186 </div> 187 <div class="small"> 188 <a href="#"><img src="../img/small06.jpg" ></a> 189 <a href="#"><p style="color: gray;">洗衣机</p></a> 190 <p style="color: red;">999</p> 191 </div> 192 <div class="small"> 193 <a href="#"><img src="../img/small07.jpg" ></a> 194 <a href="#"><p style="color: gray;">扫地机器人</p></a> 195 <p style="color: red;">1599</p> 196 </div> 197 <div class="small"> 198 <a href="#"><img src="../img/small09.jpg" ></a> 199 <a href="#"><p style="color: gray;">微波炉</p></a> 200 <p style="color: red;">1099</p> 201 </div> 202 <div class="small"> 203 <a href="#"><img src="../img/small08.jpg" ></a> 204 <a href="#"><p style="color: gray;">压力锅</p></a> 205 <p style="color: red;">799</p> 206 </div> 207 </div> 208 </div> 209 </div> 210 211 <!--5.广告图片--> 212 <div id=""> 213 <img src="../img/ad.jpg" width="100%"/> 214 </div> 215 216 <!--6.广告图片--> 217 <div id=""> 218 <img src="../img/footer.jpg" width="100%"/> 219 </div> 220 221 <!--7.友情链接和版权信息--> 222 <div id="bottom"> 223 <a href="#"><font>关于我们</font></a> 224 <a href="#"><font>联系我们</font></a> 225 <a href="#"><font>招贤纳士</font></a> 226 <a href="#"><font>法律声明</font></a> 227 <a href="#"><font>友情链接</font></a> 228 <a href="#"><font>支付方式</font></a> 229 <a href="#"><font>配送方式</font></a> 230 <a href="#"><font>服务声明</font></a> 231 <a href="#"><font>广告声明</font></a> 232 <p> 233 Copyright © 2005-2016 hh商城 版权所有 234 </p> 235 </div> 236 </div> 237 </body> 238 </html>
在浏览器内运行，实现了轮播图的效果。
