【javascript】图片左右滚动（可自动，有左右按钮）

前端空间 · 发表于 2012-12-22 21:29:04

<div id="cnblogs_post_body">html代码：

<div class="cnblogs_code"><!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><script type="text/javascript">window.onload = function(){ scrollPic();}function scrollPic() { 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();}</script>

		自动登录	找回密码
密码			立即注册