js实现轮播图（手动+自动）-编程知识

js实现轮播图（手动+自动）

设置大体样式

图片播放

完整代码

设置大体样式

<input type="button" value="<" id="pre" onclick="pre()" onmouseover="stop()" onmouseout="start()" class="left">
<img src="../img/1.jpg" id="imgid" onmouseover="stop()" onmouseout="start()">
<input type="button" value=">" id="next" onclick="next()" onmouseover="stop()" onmouseout="start()" class="right">

将图片设置为相对定位，按钮设置为绝对定位，这样就可以将按钮镶嵌在图片中

<style type="text/css">#imgs{position: relative;}.right,.left{position: absolute;top:230px;border-radius:50%}.right{left:575px ;}
</style>

图片播放

var imgArr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];				var index =0 ;		function pre(){var img = document.getElementById("imgid");	if(index == 0){index = 5;}index-=1;img.src = imgArr[index];}function next(){var img = document.getElementById("imgid");	if(index == 4){index = -1;}index+=1;img.src = imgArr[index];
}

添加dom对象，将图片存入数组中，用下标来访问图片内容

var t;
function start(){t = setInterval(next,1000)
}
function stop(){clearInterval(t);
}

设置自动播放的事件，并添加onmouseover和onmouseout事件，当鼠标放在图片或者按钮上，停止自动播放，离开后开始自动播放

完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#imgs{position: relative;}.right,.left{position: absolute;top:230px;border-radius:50%}.right{left:575px ;}	</style></head><body><script>		var imgArr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];				var index =0 ;		function pre(){var img = document.getElementById("imgid");	if(index == 0){index = 5;}index-=1;img.src = imgArr[index];}function next(){var img = document.getElementById("imgid");	if(index == 4){index = -1;}index+=1;img.src = imgArr[index];}var t;function start(){t = setInterval(next,1000)}function stop(){clearInterval(t);}</script>	<input type="button" value="<" id="pre" onclick="pre()" onmouseover="stop()" onmouseout="start()" class="left"><img src="../img/1.jpg" id="imgid" onmouseover="stop()" onmouseout="start()"><input type="button" value=">" id="next" onclick="next()" onmouseover="stop()" onmouseout="start()" class="right"></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/52429.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！