您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇“javascript中如何做图片滚动”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript中如何做图片滚动”文章吧。
1.首先我们通过设置一个网页框架代码如下:
<html>
<head>
<meta charset="utf-8" />
<title>javascript怎么做图片滚动</title>
</head>
<link rel="stylesheet" href="css/gundong.css" />
<script type="text/javascript"src="js/gundong.js"></script>
<body>
<div id="div1">
<ul>
<li><img src="img/GIF-1.png"></li>
<li><img src="img/gif-2.png"></li>
<li><img src="img/gif-3.png"></li>
<li><img src="img/gif-4.png"></li>
</ul>
</div>
<a href="javascript:;">向左滚动</a>
<a href="javascript:;">向右滚动</a>
</body>
</html>
这样我们就完成了一个网页的框架内容,我们也设置了一个css的外联式和JavaScript的外联式的语句。
2.设置css样式完成静态页面的设置,代码如下:
body,
div,
ul,
li,
p {
padding: 0;
margin: 0;
}
#div1 {
position: relative;
margin: 10px auto;
border: 1px solid black;
width: 680px;
height: 170px;
overflow: hidden;
}
#div1 ul {
position: absolute;
left: 0;
}
#div1 ul li {
float: left;
padding: 10px;
list-style: none;
width: 150px;
height: 150px;
}
#div1 ul li img {
width: 150px;
height: 150px;
}
当我们完成这个步骤的时候就会得到一个静态的页面,那么接下来就是让页面动起来。
3.添加javascript的内容实现一个页面效果代码如下:
window.onload = function()
{
var oDiv = document.getElementById("div1");
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName("li");
var oA = document.getElementsByTagName("a");
var timer = null;
var iSpeed = 8;
//复制一遍ul
oUl.innerHTML +=oUl.innerHTML;
//ul的宽度是所有li宽度之和,复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";
function fnMove()
{
//图片向左移动时的条件,即在div里的ul的offsetLeft小于一个ul的宽度
if (oUl.offsetLeft<-oUl.offsetWidth/2)
{
//将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
oUl.style.left = 0;
}
//图片向右移动时的条件,即在div里的ul的offsetLeft大于等于0
else if (oUl.offsetLeft>=0)
{
//将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
oUl.style.left = -oUl.offsetWidth/2 + "px";
}
//给ul一个速度让整个ul的offsetLeft增加或减少,速度为正则向右移动,速度为负则向左移动
oUl.style.left = oUl.offsetLeft +iSpeed + "px";
}
//点击向左滚动即触发第一个a元素标签
oA[0].onclick = function()
{
iSpeed = -8;
}
//点击向右滚动即触发第二个a元素标签
oA[1].onclick = function()
{
iSpeed = 8;
}
//当鼠标移动到div里面的时候图片滚动暂停,此时清除定时器即可。
oDiv.onmouseover = function()
{
clearInterval(timer);
}
//当鼠标移出div的时候图片继续滚动,此时重新加载定时器。
oDiv.onmouseout = function()
{
timer=setInterval(fnMove,30);
}
}
在代码中我们通过设置函数,在页面中我们可以通过点击向那个方向滚动从而实现,滚动的一个方向(默认是向右)。而且当我们鼠标停留在滚动的图片时会停止滚动。
以上就是关于“javascript中如何做图片滚动”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。