javascript實現列表滾動的方法

2024-05-06 16:24:06

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript實現列表滾動的方法,較為詳細的分析了javascript實現列表滾動的頁面布局及javascript滾動效果的實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了javascript實現列表滾動的方法。分享給大家供大家參考。具體如下：

index.html如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="css/global.css" />

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

<script type="text/javascript" src="js/scroll_img.js"></script>

<title>圖片列表滾動</title>

</head>

<body>

<div class="scroll_img_wrap clearfix">

<a href="javascript:void(0)"><img src="images/btn.jpg" /></a>

<div id="scroll_img">

<ul class="scroll_img_list clearfix">

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information1</a>

</li>

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information2</a>

</li>

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information3</a>

</li>

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information4</a>

</li>

<li>

<a href="#"><img src="images/2.jpg" alt="#" /></a>

<a href="#">information5</a>

</li>

<li>

<a href="#"><img src="images/2.jpg" alt="#" /></a>

<a href="#">information6</a>

</li>

<li>

<a href="#"><img src="images/2.jpg" alt="#" /></a>

<a href="#">information7</a>

</li>

<li>

<a href="#"><img src="images/2.jpg" alt="#" /></a>

<a href="#">information8</a>

</li>

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information9</a>

</li>

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information10</a>

</li>

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information11</a>

</li>

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information12</a>

</li>

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information13</a>

</li>

<li>

<a href="#"><img src="images/1.jpg" alt="#" /></a>

<a href="#">information14</a>

</li>

</ul>

</div>

<a href="javascript:void(0)"><img src="images/btn.jpg" /></a>

</div>

</body>

<script type="text/javascript">

(function(){

var test=new scroll_img('scroll_img',150,590,140,10);

test.initialize();

$('.left_btn').click(function(){

test.stop();

test.left();

test.autoplay();

});

$('.right_btn').click(function(){

test.stop();

test.right();

test.autoplay();

});

})();

</script>

</html>

scroll_img.js如下：

function scroll_img(target,distance,show_width,li_width,mr){

this.distance=distance; //每次移動距離

this.target=$("#"+target);

this.show_width=show_width; //顯示區域寬度

this.li_width=li_width; //items寬度

this.mr=mr; //items間距

this.scrollbar=$("#"+target).find('ul');

this.position=0;

this.direction=1;

}

scroll_img.prototype={

version:1.00,

author:"yangfeifei",

date:2011-11-21,

initialize:function(){

var t=this;

t.scrollbar.css('position','relative');

//初始動作

t.autoplay();

t.scrollbar.mouseover(function(){t.stop();}); //鼠標移到圖片上停止自動播放

t.scrollbar.mouseout(function(){t.autoplay();}); //鼠標移出圖片開始自動播放

},

right:function(){

var t=this;

(-t.position)<t.total_length()?t.position-=t.distance:t.position=t.position;

if((-t.position)<t.total_length()){

t.scrollbar.animate({left:t.position},500);

t.direction=1;

}

if((-t.position)==t.total_length()){

t.scrollbar.animate({left:t.position},500);

t.direction=-1;

}

},

left:function(){

var t=this;

(-t.position)>0?t.position+=t.distance:t.position=t.position;

if((-t.position)>0){

t.scrollbar.animate({left:t.position},500);

t.direction=-1;

}

if((-t.position)==0){

t.scrollbar.animate({left:t.position},500);

t.direction=1;

}

},

total_length:function(){

var t=this,

total_num=t.scrollbar.find('li').length;

return total_num*(t.li_width+t.mr)-(t.mr+t.show_width);

},

autoplay:function(){

var t=this;

t.setInt=setInterval(function(){

t.direction==1?t.right():t.left();

},3000);

},

stop:function(){

var t=this;

clearInterval(t.setInt);

}

}

global.css如下：

/*CSS reset*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-family:arial,"宋體";}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:bold;}

ol,ul{list-style-type:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}/*font-size:100%;的作用主要是改變它默認的大小，繼承父體的字體大小*/

q:before,q:after{content:' ';}

abbr,acronym{border:0;}

.cb{clear:both;}

.cl{clear:left;}

.cr{clear:right;}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-block;}

* html .clearfix{height:1%;}

.clearfix{display:block;}

/*主體css*/

.scroll_img_wrap{width:612px;margin: 10px auto;}

#scroll_img{width:590px;overflow:hidden;float:left;*position:relative;border: 1px #ccc solid;}/*可視區域寬度*/

.scroll_img_list{width:9999px;}

.scroll_img_list li{float:left;width:140px;margin-right:10px;}/*items*/

.scroll_img_list li p{text-align:center;}

.scroll_img_list li p a{text-decoration:none;color:#666;}

.left_btn,.right_btn{float:left;}