javascript制作滚动图片(左移）
1、方框是图片显示区域，初始化入下图状态，显示图片从右往左移动。所有图片的宽度总和大于图片显示区域的宽度。
2、如果第一张图片超出了显示区域，把这个图片排到图片最后一张。只需要修改第一图片的left参数，适当的位置。
3、打开eclipse工具，新建一个web的项目，项目的名称为gundongtp.接下来新一个页面。
4、在项目中gundongtp，新建一个html的页面，名称为gundongtp.html的文件。
5、在gundongtp.html中，输入css的状态，显示区域，图片区域。
#xsquyu{
border-radius:3px 3px 3px 3px;
border: 1px solid #DCDCDC;
width:1100px;
height:260px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top:5px;
position: relative;
overflow: hidden;
white-space:nowrap;
background:#F8F8F8;
}
#tpquyu{
border-radius:3px 3px 3px 3px;
border: 1px solid #DCDCDC;
padding: 10px;
position: absolute;
margin-top:5px;
background:#FFF;
width: 270px;
height: 200px;
}
6、在body区域中，定义图片显示区域。
<div id="xsquyu" >
</div>
7、在<head>这个区域内，编写javascript;
window.onload = function(){
gundongtp();
};
function gundongtp()
{
var xsqy = document.getElementById("xsquyu");
var imgarray=new Array(5);
for(var i=0;i<imgarray.length;i++){
var xsimg=document.createElement("img");
xsimg.setAttribute("id","tpquyu");
xsimg.setAttribute("src","tupian/tp"+i+".jpg");
xsimg.style.left=300*i+"px";
xsqy.appendChild(xsimg);
imgarray[i]=xsimg;
xsimg.onmouseover = function()
{
clearInterval(timer);
}
xsimg.onmouseout = function()
{
timer=setInterval(fnMove,50);
}
}
var timer = null;
function fnMove()
{ var yidong=3;
var zdleft=0;
for(var i=0;i<imgarray.length;i++){
imgarray[i].style.left=imgarray[i].offsetLeft-yidong+"px";
if(imgarray[i].offsetLeft>zdleft){
zdleft=imgarray[i].offsetLeft;
}
}
for(var i=0;i<imgarray.length;i++){
if((imgarray[i].offsetLeft+imgarray[i].offsetWidth)<=0){
if((zdleft+300)>1100){
imgarray[i].style.left=zdleft+300+"px";
}else{
imgarray[i].style.left=1100+"px";
}
}
}
}
timer=setInterval(fnMove,50)
}
8、现在代码已经编写完毕，运行一个web项目。没有录制屏幕，系统运行效果，没有直观表现出来。这是完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#xsquyu{
border-radius:3px 3px 3px 3px;
border: 1px solid #DCDCDC;
width:1100px;
height:260px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top:5px;
position: relative;
overflow: hidden;
white-space:nowrap;
background:#F8F8F8;
}
#tpquyu{
border-radius:3px 3px 3px 3px;
border: 1px solid #DCDCDC;
padding: 10px;
position: absolute;
margin-top:5px;
background:#FFF;
width: 270px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
gundongtp();
};
function gundongtp()
{
var xsqy = document.getElementById("xsquyu");
var imgarray=new Array(5);
for(var i=0;i<imgarray.length;i++){
var xsimg=document.createElement("img");
xsimg.setAttribute("id","tpquyu");
xsimg.setAttribute("src","tupian/tp"+i+".jpg");
xsimg.style.left=300*i+"px";
xsqy.appendChild(xsimg);
imgarray[i]=xsimg;
xsimg.onmouseover = function()
{
clearInterval(timer);
}
xsimg.onmouseout = function()
{
timer=setInterval(fnMove,50);
}
}
var timer = null;
function fnMove()
{ var yidong=3;
var zdleft=0;
for(var i=0;i<imgarray.length;i++){
imgarray[i].style.left=imgarray[i].offsetLeft-yidong+"px";
if(imgarray[i].offsetLeft>zdleft){
zdleft=imgarray[i].offsetLeft;
}
}
for(var i=0;i<imgarray.length;i++){
if((imgarray[i].offsetLeft+imgarray[i].offsetWidth)<=0){
if((zdleft+300)>1100){
imgarray[i].style.left=zdleft+300+"px";
}else{
imgarray[i].style.left=1100+"px";
}
}
}
}
timer=setInterval(fnMove,50)
}
</script>
</head>
<body>
<div id="xsquyu" >
</div>
</body>
</html>
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：120
阅读量：131
阅读量：113
阅读量：168
阅读量：24