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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
Vue入门之animate过渡动画效果
Apr 08 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时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
javascript实现时钟动画
2020/12/03 Javascript
python实现定时播放mp3
2015/03/29 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python 多线程重启方法
2019/02/18 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Pandas的数据过滤实现
2021/01/15 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
大学应届生的自我评价
2014/03/06 职场文书
青蓝工程实施方案
2014/03/27 职场文书
个人租房协议书范本
2014/09/30 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
小学英语教学随笔
2015/08/14 职场文书
mysql函数之截取字符串的实现
2022/08/14 MySQL