javascript 轮播图
余温
2018年03月24日 16时30分
web
js原生轮播图
就是样式有点丑
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>轮播图</title> </head> <body> <div style="margin: 0 auto"> <img id="img" src="./images/1.jpg" alt="" width="1000" height="600"> </div> <div> <button id="up">上一张</button> <button id="next">下一张</button> </div> </body> <script> var images = new Array() //所有图片的地址 images[0] = "./images/1.jpg" images[1] = "./images/2.jpg" images[2] = "./images/3.jpg" //定义一个变量 var i = 1 //选择下一张点击按钮 document.getElementById('next').onclick = function () { //点击的时候把img的src属性改变程images下的第 i个图片 document.getElementById('img').src = images[i] //让i+1 i++ if (i == images.length) { //images.length获取这个数组有几个元素 当当前图片是最后一个图片的时候让i重新成为1 i = 0; } } //点击的时候把img的src属性改变程images下的第 i个图片 document.getElementById('up').onclick = function () { document.getElementById('img').src = images[i] i-- if (i == 0) { // 当当前图片是第一个图片的时候让i重新成为走后一张图片 i = images.length - 1; } } setInterval(function () { document.getElementById('img').src = images[i] //每过3000毫秒执行一次 i++ if (i == images.length) { i = 0; } },3000) </script> </html>
上一篇:
laravel5 发送邮件
下一篇:
POST 提交表单
请登陆后评论
{{vo.time}} 回复