快捷導(dǎo)航

jQuery+css實(shí)現(xiàn)圖片滾動(dòng)效果(附源碼)

更新時(shí)間：2013年03月18日 12:01:23 作者：

圖片滾動(dòng)效果想必大家都已司空見(jiàn)慣了吧，接下來(lái)本文介紹下jQuery+CSS實(shí)現(xiàn)圖片滾動(dòng)，感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你

bxCarousel參數(shù)說(shuō)明：
move：每次滾動(dòng)移動(dòng)圖片的數(shù)量，默認(rèn)為4。
display_num：展示圖片的數(shù)量，默認(rèn)為4。
speed：圖片滾動(dòng)速度，默認(rèn)為500毫秒。
margin：圖片間的間距，默認(rèn)為0。
auto：是否自動(dòng)滾動(dòng)，默認(rèn)為false。
auto_interval：當(dāng)設(shè)為自動(dòng)滾動(dòng)時(shí)，每次滾動(dòng)的時(shí)間間隔（毫秒），默認(rèn)為2000毫秒即2秒。
auto_dir：自動(dòng)滾動(dòng)的方向，默認(rèn)為next，你可以試下prev。
next_image：向右滾方向按鈕圖片，可以用CSS設(shè)置。
prev_image：向左滾方向按鈕圖片，可以用CSS設(shè)置。
auto_hover：滾動(dòng)時(shí)，鼠標(biāo)滑上圖片時(shí)是否停止?jié)L動(dòng)，默認(rèn)為false。
controls：是否顯示左右滾動(dòng)按鈕圖片，默認(rèn)為true。

復(fù)制代碼代碼如下:

 
<!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 name="keywords" content="圖片滾動(dòng),jquery插件" /> 
<meta name="description" content="Helloweba演示平臺(tái)，演示XHTML、CSS、jquery、PHP案例和示例" /> 
<title>jQuery+CSS實(shí)現(xiàn)的圖片滾動(dòng)效果</title> 
<style type="text/css"> 
ul{margin:0;padding:0;} 
.demo{width: 650px;height: 134px;margin: 60px auto;clear: both;position: relative;border:1px solid #d3d3d3} 
.bx_wrap {margin-left: 10px; margin-top:10px} 
.bx_wrap ul img { border: 2px solid #ddd; } 
.bx_wrap ul li{text-align:center} 
.bx_wrap ul li a:hover{text-decoration:none; color:#f30} 
.bx_wrap a.prev {width:20px;height:24px;line-height:24px;outline-style:none;outline-width: 0;position:absolute; top:45px; left:-2px; text-indent:-999em; background: url(img/arr_left.gif) no-repeat;} 
.bx_wrap a.next {width:20px;height:24px;line-height:24px; left:626px;position: absolute;top:45px; text-indent:-999em; background:url(img/arr_right.gif) no-repeat;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="bxCarousel.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('#demo1').bxCarousel({ 
display_num: 4, 
move: 1, 
auto: true, 
controls: false, 
margin: 10, 
auto_hover: true 
}); 
$('#demo2').bxCarousel({ 
display_num: 4, 
move: 4, 
margin: 10 
}); 
}); 
</script> 
</head> 
<body> 
<div id="header"> 
<div id="logo"><h1><a  title="返回helloweba首頁(yè)">helloweba</a></h1></div> 
</div> 
<div id="main"> 
<h2 class="top_title"><a >jQuery+CSS實(shí)現(xiàn)的圖片滾動(dòng)效果</a></h2> 
<div class="demo"> 
<div class="bx_wrap"> 
<div class="bx_container"> 
<ul id="demo1"> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s1.jpg"><br/>圖片1</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s2.jpg"><br/>圖片2</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s3.jpg"><br/>圖片3</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s4.jpg"><br/>圖片4</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s5.jpg"><br/>圖片5</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s6.jpg"><br/>圖片6</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s7.jpg"><br/>圖片7</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s1.jpg"><br/>圖片1</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s2.jpg"><br/>圖片2</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s3.jpg"><br/>圖片3</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s4.jpg"><br/>圖片4</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s5.jpg"><br/>圖片5</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s6.jpg"><br/>圖片6</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s7.jpg"><br/>圖片7</a></li> 
</ul> 
</div> 
</div> 
</div> 
<div class="demo"> 
<div class="bx_wrap"> 
<div class="bx_container"> 
<ul id="demo2"> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s1.jpg"><br/>圖片1</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s2.jpg"><br/>圖片2</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s3.jpg"><br/>圖片3</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s4.jpg"><br/>圖片4</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s5.jpg"><br/>圖片5</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s6.jpg"><br/>圖片6</a></li> 
</ul> 
</div> 
</div> 
</div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
</div> 
<div id="footer"> 
<p>Powered by helloweba.com 允許轉(zhuǎn)載、修改和使用本站的DEMO，但請(qǐng)注明出處：<a >www.helloweba.com</a></p> 
</div> 
</body> 
</html> 