【JavaScript】案例二：使用JS完成首页轮播图效果—

1.切换图片例子：

事件（onclick）

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>切换图片</title>

         <style>

             div {

                 border: 1 px solid white;

                 width: 500px;

                 height: 350px;

                 margin: auto;

                 /**文字居中*/

                 text-align: center;

             }

         </style>

     </head>

     <script>

         var i = 1;

         function changeImg() {//两张图片循环播放

             i++;

             document.getElementById("img1").src = "../../img/" + i + ".jpg";

             if (i == 2) {

                 i = 0;

             }

         }

     </script>

     <body>

         <div>

             <input type="button" value="下一张" onclick="changeImg()" />

             <img src="../../img/1.jpg" width="" id="img1" />

         </div>

     </body>

 </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部分：

 <script>

             function init() {

                 //书写轮播图片显示的定时操作(3秒)

                 window.setInterval("changeImg()", 3000); //window可以省略不写

             }

             //书写函数

             var i = 0;

             function changeImg() {

                 i++;

                 //获取图片位置并设置src属性值

                 document.getElementById("img1").src = "../img/" + i + ".jpg";

                 if (i == 2) {

                     i = 0;

                 }

             }

         </script>

HTML部分：（在指定位置定义 id）

<body onload="init()">

<!--3.轮播图片-->

            <div id="">

                <img src="../img/1.jpg" width="100%" id="img1" /><!--记得加上id-->

                <!--设置id-->

            </div>

结果：

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/%E4%BD%BF%E7%94%A8Div%2bCSS%E5%AE%9E%E7%8E%B0%E7%BD%91%E7%AB%99%E9%A6%96%E9%A1%B5%E9%87%8D%E6%9E%84.html

巴特西

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

最新文章

热门文章