jquery 图片滚动 -

lichengyezi

浏览: 205690 次
性别:
来自: 齐齐哈尔

最近访客更多访客>>

devcang

budingmi

zjy_369

denny.zhao

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (50)

社区版块

存档分类

jquery 图片滚动

jQuery XHTML HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片上下滚动</title>
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
   oldonload();
   func();
}
}
}

// =S 图片向下滚动
function rollUp() {
var speed=30;
pic_box_r.innerHTML = pic_box.innerHTML;
function Marquee1(){
if(pic_box_r.offsetTop - butong_pic.scrollTop <= 0) {
   butong_pic.scrollTop -= pic_box.offsetHeight;
} else {
   butong_pic.scrollTop++;
}
}
var MyMar1 = setInterval(Marquee1,speed);
butong_pic.onmouseover = function() {
clearInterval(MyMar1);
}
butong_pic.onmouseout = function(){
MyMar1 = setInterval(Marquee1,speed)
}
}
addLoadEvent(rollUp); // =E 图片向下滚动

//　=S 图片向上滚动
function scrollDown() {
var speed = 30;
pic_box_r2.innerHTML = pic_box2.innerHTML;
butong_pic2.scrollTop = butong_pic2.scrollHeight;
function Marquee2(){
if(pic_box2.offsetTop - butong_pic2.scrollTop >= 0) {
   butong_pic2.scrollTop += pic_box_r2.offsetHeight;
}
else{
   butong_pic2.scrollTop--;
}
}
var MyMar2 = setInterval(Marquee2,speed);
butong_pic2.onmouseover = function() {
clearInterval(MyMar2);
}
butong_pic2.onmouseout = function() {
MyMar2=setInterval(Marquee2,speed);
}
}
addLoadEvent(scrollDown); //　=E 图片向上滚动

</script>

<style>
#butong_pic, #butong_pic2 {
overflow: hidden;
width: 75px;
height: 200px;
}
</style>
</head>

<body>

<div id="butong_pic">
<div id="pic_box">
<img src="pic1.gif" alt="图片1" />
<img src="pic2.gif" alt="图片2" />
<img src="pic3.gif" alt="图片3" />
<img src="pic4.gif" alt="图片4" />
<img src="pic5.gif" alt="图片5" />
<img src="pic6.gif" alt="图片6" />
<img src="pic7.gif" alt="图片7" />
<img src="pic8.gif" alt="图片8" />
</div>
<div id="pic_box_r"></div>
</div> 


<div id="butong_pic2">
<div id="pic_box2">
<img src="pic1.gif" alt="图片1" />
<img src="pic2.gif" alt="图片2" />
<img src="pic3.gif" alt="图片3" />
<img src="pic4.gif" alt="图片4" />
<img src="pic5.gif" alt="图片5" />
<img src="pic6.gif" alt="图片6" />
<img src="pic7.gif" alt="图片7" />
<img src="pic8.gif" alt="图片8" />
</div>
<div id="pic_box_r2"></div>
</div> 
</body>
</html>

分享到：