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 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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
You might like
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
jQuery实现冻结表格行和列
2015/04/29 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
详解vue axios中文文档
2017/09/12 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
详解Python中的相对导入和绝对导入
2017/01/06 Python
python素数筛选法浅析
2018/03/19 Python
Python将图片转换为字符画的方法
2020/06/16 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
安全生产汇报材料
2014/02/17 职场文书
关于感谢信的范文
2015/01/23 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
高质量“欢迎词”
2019/04/03 职场文书