<!DOCTYPE html> //还有许多地方有待改善 <html> <head> <meta charset="UTF-8"> <title>图片滚动播放效果</title> <script> function init(){ //每1000毫秒自动下一张图片 var i=window.setInterval("changeImg()",1000); //给按钮绑定一个点击事件 document.getElementById("b3").onclick=function(){ //点击按钮停止播放 window.clearInterval(i); } //循环播放图片 document.getElementById("t1").onclick=function(){ window.setInterval("changeImg()",1000); } } var i=0//定义变量,初始化值为0 function changeImg(){//自定义函数 i++; //利用字符串拼接图片地址 document.getElementById("img1").src=i+".jpg"; //当i等于3时,将其赋值为0,循环播放 if(i==4){ i=0; } } /*图片跳转下一张完成思路 * 1、newg一个数组将所有照片放进去, * 2、定义onclick事件,点击时变量index加1,当变量等于数组长度时,赋值让其变为0. * 3、获取img的标签id="img1".src获取图片路径,鼠标点一下换一张 */ //1、newg一个数组将所有照片放进去, var arr =["1.jpg","2.jpg","3.jpg","4.jpg"]; var index=0; //2、定义onclick事件,点击时变量index加1,并判断,当变量等于数组长度时,赋值让其变为0 循环. function dow(){ index++; if(index==arr.length){ index=0; } //3、获取img的标签id="img1".src获取图片路径,鼠标点一下换一张 document.getElementById("img1").src=arr[index]; //图片的页码控制 var j = document.getElementById("jia"); if((parseInt(j.innerHTML)+1) == arr.length+1){ j.innerHTML =0 } j.innerHTML=parseInt(j.innerHTML)+1; } /* * 图片跳转到上一张实现思路 * 1、定义onclick()事件,up()函数。 * 2、判断变量是否小于0,小于0将数组长度赋值给变量index,达到循环效果。 * 3、获取img的标签id="img1".src获取图片路径,鼠标点一下换一张 */ //1、定义onclick()事件,up()函数。 function up(){ index--; //2、判断变量是否小于0,小于0将数组长度赋值给变量index,达到循环效果。 if(index<0){ index=arr.length; } //3、获取img的标签id="img1".src获取图片路径,鼠标点一下换一张 document.getElementById("img1").src=arr[index]; //图片页码控制 var i = document.getElementById("jia") if((parseInt(i.innerHTML)-1)==0){ i.innerHTML=4; }else{ i.innerHTML=parseInt(i.innerHTML)-1; } } </script> <style> #bnt{ margin-top:30px ; } #b1,#t1{ margin-right: 30px; } #b2,#t2,#b3{ margin-left: 30px; } #bnt1{ margin-top: 30px; margin-bottom: 30px; } #img1{ border-radius: 30px; } </style> </head> <body onload="init()"> <div id="bnt1" align="center"> <input id="t1" type="button" value="循环播放" /> <input id="b3" type="button" value="手动播放" /> </div> <div align="center"> <img src="1.jpg" width="500px" height="400px" id="img1"/> </div> <div align="center" id="bnt"> <input id="b1" type="button" value="上一张" onclick="up()"/> <span id="jia">1</span><span>/</span><span id="jian">4</span> <input id="b2" type="button" value="下一张" onclick="dow()"/> <!--//<input id="b3" type="button" value="停止播放" />--> </div> </body> </html>
javascript实现一个简单的图片轮播和手动播放
猜你喜欢
转载自blog.csdn.net/lzpzwy/article/details/80072750
今日推荐
周排行