JS控件图片移动,无非常是setInterval,setTimeout来控件图片的位置,
示例代码:
<img src="a.jpg" style="position:absolutetop:0pxleft:40%" id="movpic">
<script>
var obj = document.getElementById("movpic")
var tops=0
function movs1()
{tops+=5<br/>obj.style.top = tops<br/>}
setInterval('movs1()',500)
</script>
<html><head>
<script language="javascript">
function moveImage(){
document.getElementById("div1").style.left = 0
document.getElementById("div1").style.top = document.body.scrollTop
}
var t1 = window.setInterval("moveImage()",100)
</script>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>图片位移</title>
</head>
<body bgcolor="#CCCC00">
<div id="div1" style="position:absolute"><img src="images/hair.png" id="image1" /></div>
</body>
</html>
上面的是你的要求。下面是一个小例子。可以实现图片在页面上滚动。
<script language="javascript">
var left = 0
var top = 0
function moveImage(){
if(left >(document.body.clientWidth)-(document.getElementById("div1").offsetWidth)-4){
left = -left
}
if(top >(document.body.clientHeight)-(document.getElementById("div1").offsetHeight)-4){
top = -top
}
left += 4
top += 4
document.getElementById("div1").style.left = Math.abs(left)
document.getElementById("div1").style.top = Math.abs(top)
}
var t1 = window.setInterval("moveImage()",100)
</script>
<!DOCTYPE html><html lange="en">
<head>
<title>点击左右按钮图片横向滚动</title>
<meta charset=utf-8" />
<style type="text/css">
* { margin:0padding:0}
body { font-size:12px}
.box {height:66pxfloat:leftwidth:440pxoverflow: hiddenposition:relative}
.box
li { display:blockfloat:leftmargin-left:5pxmargin-right:5px
width:100px
height:70pxbackground:#BBBfont-size:50pxcolor:#cccline-height:66pxtext-decoration:nonetext-align:center
cursor:pointer}
.box li:hover { color:#999}
.box li.active { background-position:-174px 0color:#555cursor:default}
a.prev,
a.next {background:url(http://www.shengyijie.net/images/left_02.png)
no-repeat 0 0display:blockwidth:23pxheight:43pxfloat:left
margin:15px 0 0 0cursor:pointer}
a.next { background-image:url(http://www.shengyijie.net/images/right_02.png)}
.scroll_list{ width:10000emposition:absolute}
</style>
<!-- 引入jQuery -->
<script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var page= 1
var i = 4//每版四个图片
//向右滚动
$(".next").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll")// 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list")//找到视频展示的区域
var v_cont = v_wrap.find(".box")//找到视频展示区域的外围区域
var v_width = v_cont.width()
var len = v_show.find("li").length//我的视频图片个数
var page_count = Math.ceil(len/i)//只要不是整数，就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow")
page =1
}else{
v_show.animate({left:'-='+v_width},"slow")
page++
}
}
})
//向左滚动
$(".prev").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll")// 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list")//找到视频展示的区域
var v_cont = v_wrap.find(".box")//找到视频展示区域的外围区域
var v_width = v_cont.width()
var len = v_show.find("li").length//我的视频图片个数
var page_count = Math.ceil(len/i)//只要不是整数，就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == 1){
v_show.animate({left:'-='+ v_width*(page_count-1)},"slow")
page =page_count
}else{
v_show.animate({left:'+='+ v_width},"slow")
page--
}
}
})
})
</script>
</head>
<body>
<!-- 例子 -->
<div class="scroll" style="margin:0 autowidth:550px">
<!-- "prev page" link -->
<a class="prev" href="#"></a>
<div class="box">
<div class="scroll_list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
</div>
<!-- "next page" link -->
<a class="next" href="#"></a>
</div>
</body>
</html>
