编程 Javascript

jQuery+css实现图片滚动效果(附源码)

Posted in Javascript onMarch 18, 2013

jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明：
move：每次滚动移动图片的数量，默认为4。
display_num：展示图片的数量，默认为4。
speed：图片滚动速度，默认为500毫秒。
margin：图片间的间距，默认为0。
auto：是否自动滚动，默认为false。
auto_interval：当设为自动滚动时，每次滚动的时间间隔（毫秒），默认为2000毫秒即2秒。
auto_dir：自动滚动的方向，默认为next，你可以试下prev。
next_image：向右滚方向按钮图片，可以用CSS设置。
prev_image：向左滚方向按钮图片，可以用CSS设置。
auto_hover：滚动时，鼠标滑上图片时是否停止滚动，默认为false。
controls：是否显示左右滚动按钮图片，默认为true。

<!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="图片滚动,jquery插件" /> 
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" /> 
<title>jQuery+CSS实现的图片滚动效果</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 href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div> 
</div> 
<div id="main"> 
<h2 class="top_title"><a href="http://www.helloweba.com/view-blog-139.html">jQuery+CSS实现的图片滚动效果</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 允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p> 
</div> 
</body> 
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)

Mar 01 Javascript

JS事件在IE与FF中的区别详细解析

Nov 20 Javascript

JS嵌套函数调用上下文的问题解决

Mar 26 Javascript

详解WordPress开发中get_current_screen()函数的使用

Jan 11 Javascript

如何在JS中实现相互转换XML和JSON

Jul 19 Javascript

浅谈AngularJs指令之scope属性详解

Oct 24 Javascript

简单三步实现报表页面集成天气

Dec 15 Javascript

SVG描边动画

Feb 23 Javascript

jQuery使用EasyUi实现三级联动下拉框效果

Mar 08 Javascript

Vue实现动态创建和删除数据的方法

Mar 17 Javascript

从零开始封装自己的自定义Vue组件

Oct 09 Javascript

highcharts.js数据绑定方式代码实例

Nov 13 Javascript

jquery获取特定name所有选中的checkbox,支持IE9标准模式

Mar 18 #Javascript

javascript定时变换图片实例代码

Mar 17 #Javascript

JS前端框架关于重构的失败经验分享

Mar 17 #Javascript

利用jQuery的deferred对象实现异步按顺序加载JS文件

Mar 17 #Javascript

提交表单时执行func方法实现代码

Mar 17 #Javascript

javascript中this做事件参数相关问题解答

Mar 17 #Javascript

获取客户端网卡MAC地址和IP地址实现JS代码

Mar 17 #Javascript