圖片左右滾動(可自動,有左右按鈕)
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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>圖片滾動</title>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;}
img{border:0;}
.scroll{width:358px;height:63px;}
.scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg) no-repeat;float:left;}
.scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg) left no-repeat;float:left;}
.pic{width:312px;height:73px;float:left;overflow-x:scroll;overflow-y:hidden;}
.pic ul{display:block;}
.pic li{float:left;display:inline;width:104px;text-align:center;}
</style>
</head>
<body>
<div style="margin:100px auto;width:358px;">
<div class="scroll">
<div class="scroll_left" id="LeftArr"></div>
<div class="pic" id="scrollPic">
<ul>
<li><a href="#" target="_blank" title=""><img src="images/pic01.png" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic02.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic03.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic04.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic05.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic06.jpg" width="100" height="63" alt="" /></a></li>
</ul>
</div>
<div class="scroll_right" id="RightArr"></div>
</div>
</div>
</body>
</html>
<script src="scrollPic.js" type="text/javascript"></script>
js代碼如下:
var scrollPic = new ScrollPic();
scrollPic.scrollContId = "scrollPic";
scrollPic.arrLeftId = "LeftArr";
scrollPic.arrRightId = "RightArr";
scrollPic.frameWidth = 312;
scrollPic.pageWidth = 104;
scrollPic.speed = 10;
scrollPic.space = 10;
scrollPic.autoPlay = false;
scrollPic.autoPlayTime = 3;
scrollPic.initialize();
參數說明:
var scrollPic = new ScrollPic(); //定義變量,並初始化方法
scrollContId //滾動容器的ID
arrLeftId //左按鈕ID
arrRightId //右按鈕ID
frameWidth //顯示框寬度
pageWidth //翻頁寬度
speed //移動速度(單位毫秒,越小越快)
space //每次移動像素(單位px,越大越快)
autoPlay //自動播放
autoPlayTine //自動播放間隔時間(秒)
initialize() //初始化
PS:一定要添加<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,否則IE8下面有問題。
最後附上下載地址:http://download.csdn.net/detail/athrunzero/4452419
PS2:博客搬家了,以後不再 CSDN 更新了,見諒。最新博客地址:http://www.cnblogs.com/yjzhu/