【JavaScript】案例二：使用JS完成首页轮播图效果——事件（onclick&onload)

1.切换图片例子：

 

事件（onclick）

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>切换图片</title>
 7         <style>
 8             div {
 9                 border: 1 px solid white;
10                 width: 500px;
11                 height: 350px;
12                 margin: auto;
13                 
14                 /**文字居中*/
15                 text-align: center;
16             }
17         </style>
18     </head>
19     <script>
20         var i = 1;
21         function changeImg() {//两张图片循环播放
22             i++;
23             document.getElementById("img1").src = "../../img/" + i + ".jpg";
24             if (i == 2) {
25                 i = 0;
26             }
27         }
28     </script>
29 
30     <body>
31         <div>
32             <input type="button" value="下一张" onclick="changeImg()" />
33             <img src="../../img/1.jpg" width="" id="img1" />
34         </div>
35     </body>
36 
37 </html>

 

结果：

http://127.0.0.1:8020/WEB03_JS/%E6%A1%88%E4%BE%8B%E4%BA%8C%EF%BC%9A%E4%BD%BF%E7%94%A8JS%E5%AE%8C%E6%88%90%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E6%9E%9C/%E5%88%87%E6%8D%A2%E5%9B%BE%E7%89%87/%E5%88%87%E6%8D%A2%E5%9B%BE%E7%89%87.html

 

 

 

2.轮播图

 

技术分析：

获取元素 document.getElementById(“id 名称”)
事件(onload)
定时操作：setInterval(“changeImg()”,3000);    //第二个参数是毫秒
 
 
步骤分析：
 
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)
*注意：循环时最后一个图片要重置。
 
 

*注意点：

  • 在body标签内写onload
  • window.setInterval("changeImg()", 3000); //window可以省略不写
  • document.getElementById("img1").src = "../img/" + i + ".jpg";  /**获取图片位置并设置src属性值*/
 
 
代码实现
 
JS部分：
 1 <script>
 2             function init() {
 3                 //书写轮播图片显示的定时操作(3秒)
 4                 window.setInterval("changeImg()", 3000); //window可以省略不写
 5             }
 6             
 7             //书写函数
 8             var i = 0;
 9 
10             function changeImg() {
11                 i++;
12                 //获取图片位置并设置src属性值
13                 document.getElementById("img1").src = "../img/" + i + ".jpg";
14                 if (i == 2) {
15                     i = 0;
16                 }
17             }
18         </script>
 
HTML部分：（在指定位置定义 id）
<body onload="init()">

 

<!--3.轮播图片-->
            <div id="">
                <img src="../img/1.jpg" width="100%" id="img1" /><!--记得加上id-->
                <!--设置id-->
            </div>

 

posted @ 2019-06-12 21:32  musecho  阅读(543)  评论(0)  编辑  收藏  举报