当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » JavaScript  » 网页设计与交互
分享到: 
收藏 +0
1
特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定默认显示第N张,自由设定,代码简洁,运行效率高,用户体验良好:) !!感谢各位朋友的热心反馈!! =update log==2015.01.23 新增:播放顺序为12341234 修复:频繁悬停后,滚动错乱 =update log==2014.04.30 新增:按键鼠标经过阻止事件冒泡 修复:频繁悬停后,滚动错乱 =update log==2013.03.14 新增:可手动设置尺寸,若未设置,自动采用第一张图片尺寸 修复:鼠标经过再离开时,增加一个延时时长,再循环到下一张 =update log==2012.08.09 新增:底栏可设置隐藏 修复:滚动方式由原来的1-2-3-4-1-2-3-4... 修改为 1-2-3-4-3-2-1...,滚动效果更平滑 =update log==2012.07.05 修复:设置各LI元素为第一张图片的尺寸,防止后续若有小图导致整体位置错乱 =update log==2012.06.30 修复:IE下显示边框,滚动重叠问题 新增:点选按键隐藏设置,默认2秒后隐藏,按键样式,可圆可方(IE8-只方不圆) 演示地址:http://ishere.cn/demo/jquery.slideBox/
标签: jQuery

代码片段(8) [全屏查看所有代码]

1. [图片] 方形按键,显示    

2. [图片] 按键自动隐藏    

3. [图片] 圆形按键    

4. [图片] 隐藏底栏    

5. [代码]jquery.slideBox.css     跳至 [5] [6] [7] [全屏预览]

@charset "utf-8";
html, body { font-family:"微软雅黑"}
/*
 * jQuery图片轮播(焦点图)插件
 * ADD.JENA.201206291027
 * EDIT.JENA.201206300904
 * Author: jena
 * Demo: http://ishere.cn/demo/jquery.slidebox/
 */
div.slideBox{ position:relative; width:670px; height:300px; overflow:hidden;}
div.slideBox ul.items{ position:absolute; float:left; background:none; list-style:none; padding:0px; margin:0px;}
div.slideBox ul.items li{ float:left; background:none; list-style:none; padding:0px; margin:0px;}
div.slideBox ul.items li a{ float:left; line-height:normal !important; padding:0px !important; border:none/*For IE.ADD.JENA.201206300844*/;}
div.slideBox ul.items li a img{ margin:0px !important; padding:0px !important; display:block; border:none/*For IE.ADD.JENA.201206300844*/;}
div.slideBox div.tips{ position:absolute; bottom:0px; width:100%; height:50px; background-color:#000; overflow:hidden;}
div.slideBox div.tips div.title{ position:absolute; left:0px; top:0px; height:100%;}
div.slideBox div.tips div.title a{ color:#FFF; font-size:18px; line-height:50px; margin-left:10px; text-decoration:none;}
div.slideBox div.tips div.title a:hover{ text-decoration:underline !important;}
div.slideBox div.tips div.nums{ position:absolute; right:0px; top:0px; height:100%;}
div.slideBox div.tips div.nums a{ display:inline-block; >float:left/*For IE.ADD.JENA.201206300844*/; width:20px; height:20px; background-color:#FFF; text-indent:-99999px; margin:15px 10px 0px 0px;}
div.slideBox div.tips div.nums a.active{ background-color:#093;}

6. [代码]jquery.slideBox.js     跳至 [5] [6] [7] [全屏预览]

/*
 * jQuery图片轮播(焦点图)插件
 * ADD.JENA.201206291027
 * EDIT.JENA.201206300904
 * EDIT.JENA.201207051027
 * EDIT.JENA.201208090849
 * EDIT.JENA.201501231440
 * Version: 2.2.1440
 * Author: jena
 * Demo: http://ishere.cn/demo/jquery.slidebox/
 */
(function($) {
	$.fn.slideBox = function(options) {
		//默认参数
		var defaults = {
			direction : 'left',//left,top
			duration : 0.6,//unit:seconds
			easing : 'swing',//swing,linear
			delay : 3,//unit:seconds
			startIndex : 0,
			hideClickBar : true,
			clickBarRadius : 5,//unit:px
			hideBottomBar : false
		};
		var settings = $.extend(defaults, options || {});
		//计算相关数据
		var wrapper = $(this), ul = wrapper.children('ul.items'), lis = ul.find('li'), firstPic = lis.first().find('img');
		var li_num = lis.size(), li_height = 0, li_width = 0;
		//初始化
		var init = function(){
			if(!wrapper.size()) return false;
			wrapper.data('over', 0);
			
			li_height = lis.first().height();
			li_width = lis.first().width();
			
			wrapper.css({width: li_width+'px', height:li_height+'px'});
			lis.css({width: li_width+'px', height:li_height+'px'});//ADD.JENA.201207051027
			
			ul.append(ul.find('li:first').clone());
			li_num += 1;
			
			if (settings.direction == 'left') {
				ul.css('width', li_num * li_width + 'px');
			} else {
				ul.css('height', li_num * li_height + 'px');
			}			
			ul.find('li:eq('+settings.startIndex+')').addClass('active');
			
			if(!settings.hideBottomBar){//ADD.JENA.201208090859
				var tips = $('<div class="tips"></div>').css('opacity', 0.6).appendTo(wrapper);
				var title = $('<div class="title"></div>').html(function(){
					var active = ul.find('li.active').find('a'), text = active.attr('title'), href = active.attr('href');
					return $('<a>').attr('href', href).text(text);
				}).appendTo(tips);
				var nums = $('<div class="nums"></div>').hide().appendTo(tips);
				lis.each(function(i, n) {
					var a = $(n).find('a'), text = a.attr('title'), href = a.attr('href'), css = '';
					i == settings.startIndex && (css = 'active');
					$('<a>').attr('href', href).text(text).addClass(css).css('borderRadius', settings.clickBarRadius+'px').mouseover(function(){
						wrapper.data('over', 1);
						$(this).addClass('active').siblings().removeClass('active');
						ul.find('li:eq('+$(this).index()+')').addClass('active').siblings().removeClass('active');
						start();
					}).appendTo(nums);
				});
			
				if(settings.hideClickBar){//ADD.JENA.201206300847
					tips.hover(function(){
						nums.animate({top: '0px'}, 'fast');
					}, function(){
						nums.animate({top: tips.height()+'px'}, 'fast');
					});
					nums.show().delay(2000).animate({top: tips.height()+'px'}, 'fast');
				}else{
					nums.show();
				}
			}
			
			lis.size()>1 && start();
		};
		//开始轮播
		var start = function() {
			var active = ul.find('li.active'), active_a = active.find('a');
			var index = active.index();
			if(settings.direction == 'left'){
				offset = index * li_width * -1;
				param = {'left':offset + 'px' };
			}else{
				offset = index * li_height * -1;
				param = {'top':offset + 'px' };
			}
			
			wrapper.find('.nums').find('a:eq('+index+')').addClass('active').siblings().removeClass('active');
			wrapper.find('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr('title'));

			// EDIT.JENA.20150123
			ul.stop().animate(param, settings.duration*1000, settings.easing, function() {
				active.removeClass('active');
				if(active.next().size()==0){
					ul.css({top:0, left:0}).find('li:eq(1)').addClass('active');
					wrapper.find('.nums').find('a:first').addClass('active').siblings().removeClass('active');
				}else{
					active.next().addClass('active');
				}
				wrapper.data('over')==0 && wrapper.data('timeid', window.setTimeout(start, settings.delay*1000));
			});
		};
		//停止轮播
		var stop = function() {
			window.clearTimeout(wrapper.data('timeid'));
		};
		//鼠标经过事件
		wrapper.hover(function(){
			wrapper.data('over', 1);
			stop();
		}, function(){
			wrapper.data('over', 0);
			start();
		});	
		//首张图片加载完毕后执行初始化
		var imgLoader = new Image();
		imgLoader.onload = function(){
			imgLoader.onload = null;
			init();
		};
		imgLoader.src = firstPic.attr('src');
	};
})(jQuery);

7. [代码]index.html     跳至 [5] [6] [7] [全屏预览]

<!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
	});
});
</script>
</head>

<body>
<h3>一、左右轮播,滚动持续0.6秒,滚动延迟3秒,滚动效果swing,初始焦点第1张,点选按键自动隐藏,按键边框半径(IE8-不支持)5px(以上各项为默认设置值)</h3>
<div id="demo1" class="slideBox">
  <ul class="items">
    <li><a href="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="go/to/your/url.html" 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="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="go/to/your/url.html" 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="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div>
<h4>爱我的老婆孩子!献给香港回归祖国15周年,哈哈!!</h4>
</body>
</html>

8. [文件] jquery.slideBox.zip ~ 719KB     下载(1001)     [全屏预览]



开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(50)

  • 1楼:zplswf 发表于 2012-06-29 17:02 回复此评论
    不错!
  • 2楼:曾长付 发表于 2012-06-29 17:27 回复此评论
    非常不错
  • 3楼:谢小呆 发表于 2012-06-29 18:12 回复此评论
    牛!
  • 4楼:Jeedu 发表于 2012-06-30 00:06 回复此评论
    看了演示,貌似图片切换后,本张和前一张或者是下一张(第一张除外)会有重叠,或者说没有完全翻过去

    也没有演示图1中的可以点选功能?
  • 5楼:迦楠 发表于 2012-06-30 08:44 回复此评论

    引用来自“Jeedu”的评论

    看了演示,貌似图片切换后,本张和前一张或者是下一张(第一张除外)会有重叠,或者说没有完全翻过去

    也没有演示图1中的可以点选功能?
    嗯,bug已看到,原因是我使用了HTML5的标准,结果在ie和chrome下出现CSS解析不一致,我一直使用chrome开发....问题已经修复 另外,点选功能,初始加载完毕后,会停留2秒,然后隐藏,鼠标经过标题区域时,会显示:)
  • 6楼:PHP007 发表于 2012-06-30 09:32 回复此评论
    有老婆孩子的coder  做的东西就是成熟多了
  • 7楼:迦楠 发表于 2012-06-30 09:36 回复此评论

    引用来自“qee”的评论

    有老婆孩子的coder  做的东西就是成熟多了
    :)
  • 8楼:kuangkro 发表于 2012-07-02 09:23 回复此评论
    mark
  • 9楼:彭博 发表于 2012-07-09 15:53 回复此评论
    这也有演示地址 嘿嘿  http://www.osctools.net/jsbin/scpsjxtw/2
  • 10楼:noday 发表于 2012-07-11 14:03 回复此评论
    左右滚动是图片有变形,可能是我机器太烂了,不过上下滚动的挺好
  • 11楼:已注销账号 发表于 2012-08-01 10:19 回复此评论
    good
  • 12楼:liRobin 发表于 2012-08-22 12:11 回复此评论
    css代码太多了吧亲?
  • 13楼:markcn 发表于 2013-01-12 10:29 回复此评论
    好东西啊!!顶!
  • 14楼:love-Teddy 发表于 2013-01-12 19:17 回复此评论
    it's good!
  • 15楼:雪不语寒 发表于 2013-02-19 17:11 回复此评论
    样子很喜欢。已经用在项目中。
    有个问题是在slidebox.js中第122行最好改为(添加红色部分)
    lis.size()>1 && start();
    不然在只有一个图片时,轮播会出现白屏。最后十分感谢分享。
  • 16楼:迦楠 发表于 2013-03-14 13:26 回复此评论

    引用来自“雪不语寒”的评论

    样子很喜欢。已经用在项目中。
    有个问题是在slidebox.js中第122行最好改为(添加红色部分)
    lis.size()>1 && start();
    不然在只有一个图片时,轮播会出现白屏。最后十分感谢分享。
    已经添加:)
  • 17楼:祖哥 发表于 2013-03-17 20:04 回复此评论
    google、搜狗浏览器下   标题和切换按钮为半透明,标题不是纯白色。这个bug如何调?
  • 18楼:祖哥 发表于 2013-03-17 20:04 回复此评论

    引用来自“雪不语寒”的评论

    样子很喜欢。已经用在项目中。
    有个问题是在slidebox.js中第122行最好改为(添加红色部分)
    lis.size()>1 && start();
    不然在只有一个图片时,轮播会出现白屏。最后十分感谢分享。
    google、搜狗浏览器下 标题和切换按钮为半透明,标题不是纯白色。这个bug如何调?
  • 19楼:雪不语寒 发表于 2013-03-19 11:30 回复此评论

    引用来自“祖哥”的评论

    引用来自“雪不语寒”的评论

    样子很喜欢。已经用在项目中。
    有个问题是在slidebox.js中第122行最好改为(添加红色部分)
    lis.size()>1 && start();
    不然在只有一个图片时,轮播会出现白屏。最后十分感谢分享。
    google、搜狗浏览器下 标题和切换按钮为半透明,标题不是纯白色。这个bug如何调?
    不想要透明可以改js文件里的opacity 值
  • 20楼:thuai 发表于 2013-03-31 22:42 回复此评论
    这个写的比较精简。。正是我想要的。。感谢分享。
开源从代码分享开始 分享代码
迦楠的其它代码 全部(2)...