图片的循环切换和不循环切换, 应用范围超级广的各个电商网站首页最赚钱的就是这个了
轮播图片可以利用有限的位置, 尽量多的展示图片, 比较灵活
最主要的是, 也不难用
不循环就是到第一张弹出提示框, 最后一张弹出提示框, 阻止继续点击
图片没有上传成功, 各位就看功能吧 html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <!--
- 需求: 多图片循环切换
- 步骤:
- 1 获取元素, 绑定事件
- 2 用一个语句标识记录一下当前第一张图片
- 设置为 1, 后面每次切换对其 + 1
- 3 点击事件发生时候
- 让标识 + 1
- 过界处理
- 不循环切换
- -->
- <button id="btn1"> 上一张 </button>
- <button id="btn2"> 下一张 </button>
- <img id="img" width="500" height="500" src="../img/1.png"/>
- <script>
- var btn = document.getElementById('btn');
- var img = document.getElementById('img');
- var n = 1;
- btn1.onclick = function(){
- n = n-1;
- if(n <1){
- alert("当前已经是第一张")
- }
- console.log("../img/"+n+".png");
- img.src =("../img/"+n+".png") ;
- }
- btn2.onclick = function(){
- n = n+1;
- if(n> 4){
- alert("当前已经是最后一张")
- n = 4;
- }
- console.log("../img/"+n+".png");
- img.src =("../img/"+n+".png") ;
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/48012/a22dc76356a01073b6461a5fae22969c.html