怎样用JS实现图片上下滚动

JavaScript08

怎样用JS实现图片上下滚动,第1张

问的不是很清楚哦,上下是指从上到下,从下到上,上去了再下来,还是什么,

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>

<!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>

推荐使用<marquee>实现图片滚动,示例:

<marquee

scrolldelay="100"

direction="up"

onmouseover="this.stop()"

onmouseout="this.start()"><img

src="xxxxxxx"></marquee>

其中scrolldelay="100"

===>指滚动延迟时间,单位是毫秒ms,默认为90ms

direction="up"

===>指滚动方向,默认从左往右,可取的值为:up,down,left,right

onmouseover="this.stop()"

===>指鼠标悬停在图片上时,图片静止

onmouseout="this.start()"

===>指鼠标离开图片时,图片运动

希望对您有所帮助