web前端js基础------制作滚动图片

1，要求

通过定时器使其出现滚动的效果

可以通过按键控制图片滚动的方向（设置两个按钮绑定点击事件）

当鼠标悬停时图片停止，鼠标离开时图片继续向前滚动（可以设置鼠标的悬停和离开事件）

参考如下

			content.onmouseenter = function(){//设置鼠标悬停事件key = "stop";}content.onmouseleave = function(){//设置鼠标离开事件key = "run";}

图片可以持续滚动，不会出现空白（添加滚动图片）

2，参考代码（左右滚动）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#slide{width:800px;height: 100px;margin: 0 auto;margin-top: 100px;border: 1px solid black;overflow: hidden;}#content{width: 999999px;}img{width: 160px;height: 100px;float: left;margin-right: 10px;cursor: pointer;}#button{width: 100px;margin: 20px auto;}</style></head><body><div id="slide"><div id="content"><img src="../img/1.png"/><img src="../img/2.png"/><img src="../img/3.png"/><img src="../img/4.png"/><img src="../img/5.png"/><img src="../img/6.png"/><img src="../img/7.png"/><img src="../img/8.png"/><img src="../img/9.png"/></div></div><div id="button"><button type="button" id="left">向左</button><button type="button" id="right">向右</button></div><script type="text/javascript">var content = document.getElementById("content");var left = document.getElementById("left");var right = document.getElementById("right");content.style.marginLeft = 0+"px";content.innerHTML = content.innerHTML+content.innerHTML+content.innerHTML;var key = "run";var dkey = "left";left.onclick = function(){dkey = "left";}right.onclick = function(){dkey = "right";}content.onmouseenter = function(){key = "stop";}content.onmouseleave = function(){key = "run";}dd();function dd(){var num = parseFloat(content.style.marginLeft);if(key == "run"){if(dkey == "left"){num-=0.5;if(num<=-170*9){num=0;}}else{num+=0.5;if(num>=0){num=-170*9;}}}content.style.marginLeft = num+"px";setTimeout("dd()",13);}</script></body>
</html>

3，结果参考示例

4，参考代码（上下滚动）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 设置盒子 */#div{height: 800px;width: 100px;border: 1px solid black;margin: 0px auto;overflow: hidden;			}/* 设置内容即图片的容器*/#content{height: 999999px;}/* 设置图片的样式 */img{width: 100px;height: 160px;margin-top: 10px;cursor: pointer;}/* 设置按钮样式*/#button{ width: 100px;margin: 20px auto;}</style></head><body><div id="div"><div id="content"><img src="../img/2ee18-231100-163232346010b0.jpg"/><img src="../img/1.png"/><img src="../img/2.png"/><img src="../img/3.png"/><img src="../img/4.png"/><img src="../img/5.png"/><img src="../img/6.png"/><img src="../img/7.png"/><img src="../img/8.png"/><img src="../img/9.png"/></div></div><div id="button"><button type="button" id="top">向上</button><button type="button" id="buttom">向下</button></div><script>var content = document.getElementById("content");//获取内容的idvar topSlide =document.getElementById("top");//获取向上按钮的idvar downSlide =document.getElementById("buttom");//获取向下按钮的idcontent.innerHTML = content.innerHTML+content.innerHTML+content.innerHTML;//使内容乘于3倍content.style.marginTop = 0 + "px";//设置外边距初始值var key = "run";//设置初始是运行的var dkey = "top";//设置初始是向右边的topSlide.onclick = function(){dkey = "top";}downSlide.onclick = function(){dkey = "buttom";}content.onmouseenter = function(){//设置鼠标悬停事件key = "stop";}content.onmouseleave = function(){//设置鼠标离开事件key = "run";}slide();function slide(){var num = parseFloat(content.style.marginTop);if(key == "run"){if(dkey == "top"){num-=0.5;if(num<=-170*9){num=0;}}else{num+=0.5;if(num>=0){num=-170*9;}}}		content.style.marginTop = num+"px";setTimeout("slide()",13);//设置定时器使其运行}</script></body>
</html>

效果同3

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

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