轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery图片轮播(焦点图)插件</title>
<link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.slideBox.js" type="text/javascript"></script>
<script>
jQuery(function($){
$('#demo1').slideBox();
$('#demo2').slideBox({
direction : 'top',//left,top#方向
duration : 0.3,//滚动持续时间，单位：秒
easing : 'linear',//swing,linear//滚动特效
delay : 5,//滚动延迟时间，单位：秒
startIndex : 1//初始焦点顺序
});
$('#demo3').slideBox({
duration : 0.3,//滚动持续时间，单位：秒
easing : 'linear',//swing,linear//滚动特效
delay : 5,//滚动延迟时间，单位：秒
hideClickBar : false,//不自动隐藏点选按键
clickBarRadius : 10
});
$('#demo4').slideBox({
hideBottomBar : true//隐藏底栏
});
});
</script>
</head>
<body>
<h3>一、左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点第1张，点选按键自动隐藏，按键边框半径（IE8-只方不圆）5px（以上各项为默认设置值）</h3>
<div id="demo1" class="slideBox">
<ul class="items">
<li><a href="http://www.jb51.net/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<h3>二、上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第2张，点选按键自动隐藏</h3>
<div id="demo2" class="slideBox">
<ul class="items">
<li><a href="http://www.jb51.net/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<h3>三、左右轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第1张，点选按键不隐藏，按键边框半径10px（圆形）</h3>
<div id="demo3" class="slideBox">
<ul class="items">
<li><a href="http://www.jb51.net/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<h3>四、隐藏底栏</h3>
<div id="demo4" class="slideBox">
<ul class="items">
<li><a href="http://www.jb51.net/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<!--可删除-->
<script src="http://www.jb51.net/js/jq.js"></script>
<!--ecd 可删除-->
</body>
</html>
以上内容是有关轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码，希望对大家有所帮助！
相关推荐
-
基于JQuery实现图片轮播效果(焦点图)
自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize. 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改. 效果图如下: Html代码如下: <html> <head> <meta charset="utf-8"> <title&
-
基于JQuery的实现图片轮播效果(焦点图)
完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu
-
jQuery焦点图轮播插件KinSlideshow用法分析
本文实例讲述了jQuery焦点图轮播插件KinSlideshow用法.分享给大家供大家参考,具体如下: <!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"
-
jQuery焦点图轮播效果实现方法
本文实例讲述了jQuery焦点图轮播效果实现方法.分享给大家供大家参考,具体如下: 前面一篇<JS实现焦点图轮播效果的方法详解>详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧. 核心代码如下: $(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_num=$(".list-num a"); var $banner=$(
-
jquery实现焦点轮播效果
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/lunbo.css" rel="external nofollow" >
-
jQuery右侧选项卡焦点图片轮播特效代码分享
本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-
-
jQuery焦点图轮播特效代码分享（3款）
本文实例讲述了jQuery焦点图轮播特效代码.分享给大家供大家参考.具体如下: jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码,是一段拥有三种不同风格和效果的焦点图轮播代码,其中有两款最有意思,一款是在将焦点图图片分成了四块,每个图片都连接到不同的地址,并且还拥有鼠标悬浮内图时,其它图片都变暗了的效果,另外一款是,带有带缩略图和文字描述效果的焦点图轮播代码. 运行效果图: ----------------------查看效果 源码下载---------------------
-
基于jquery实现轮播焦点图插件
直接上代码,可能不是最好的,欢迎吐槽. /** * Created by Steven on 2015/07/10/0010. * @email zhuttymore@126.com */ (function ($) { $.fn.slider = function (opt) { opt = $.extend({ speed:'fast', auto: false, interval: 1000 }, opt); var _this = this; var index = 0; _this.f
-
jQuery插件实现带圆点的焦点图片轮播切换
这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <base target="_blank" /> <
-
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css
-
jquery带下拉菜单和焦点图代码分享
jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码.感兴趣的朋友快来学习学习吧 运行效果图: ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery带下拉菜单和焦点图如下 <head> <meta http-equiv="Content-Type"
-
jQuery插件slicebox实现3D动画图片轮播切换特效
漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度.autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码. 使用方法: 1.加载插件和jQuery <link type="text/css" rel="stylesheet&
-
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码.分享给大家供大家参考.具体如下: 这里介绍的jQuery ajax投票特效,带动画效果 类似进度条风格的柱状图,以你最喜欢的编程语言是哪一种为例来演示投票效果,以Ajax方式无刷新投票,每点击一次,横向的柱状图就会增长一节.如果在火狐或chrome下浏览,那些柱状图横条是圆角的,在IE8下则无此效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head>
-
基于cssSlidy.js插件实现响应式手机图片轮播效果
cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap
-
jQuery实现的网站banner图片无缝轮播效果完整实例
本文实例讲述了jQuery实现的网站banner图片无缝轮播效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>图片轮播</title&g
-
jQuery实现标题有打字效果的焦点图代码
本文实例讲述了jQuery实现标题有打字效果的焦点图代码.分享给大家供大家参考,具体如下: 给大家分享一款基于jQuery标题有打字效果的焦点图,具有标题打字形式逐渐显示的功能.这款焦点图适用浏览器有:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-title-print-style-flash-codes/ 完整实例代码代码点击此处本站
-
jQuery超精致图片轮播幻灯片特效代码分享
本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"
-
jQuery图片轮播滚动切换代码分享
本文实例讲述了jQuery图片轮播滚动切换特效.分享给大家供大家参考.具体如下: jQuery图片轮播滚动切换代码是一款简单的jquery四张图片轮播滚动切换效果代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" type="text/css" h