jQuery banner切换插件
今天学写了一个基于jQuery焦点图切换插件，有不对的地方还请多多指教，不多说下面是代码：
1、引jQuery库
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
2、Html部分
<!--Focus Html-->
<div class="s_focus">
<ul class="f_img">
<li style="background-image:url(http://www.cnhippo.com/images/new_room.jpg);"><a href="#"></a></li>
<li style="background-image:url(http://www.cnhippo.com/images/christmas_day.jpg);"><a href="#"></a></li>
<li style="background-image:url(http://www.cnhippo.com/images/reg_banner.jpg);"><a href="#"></a></li>
</ul>
</div>
3、CSS部分
<style>
/*Test - Can be deleted*/
* { margin:0; padding:0; list-style:none;}
body { padding-top:50px;} /*CSS*/
.s_focus { position:relative; z-index:1; width:100%; min-width:940px; height:350px; padding:1px 0; border:1px solid #d9d9d9; border-width:1px 0; overflow:hidden;}
.s_focus .f_img { display:block; position:relative; z-index:1; width:100%; height:100%;}
.s_focus .f_dot { display:block; position:absolute; z-index:3; left:50%; bottom:15px; width:100px; height:10px; overflow:hidden;}
.s_focus .f_d_bg { position:absolute; z-index:2; width:100%; height:40px; left:0; bottom:1px; _bottom:0; background:#FFF; filter:alpha(opacity=30); opacity:0.3; box-shadow:0 -1px 3px #999;}
.f_img li { display:none; position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; background:#fff no-repeat center 0;}
.f_img li.on { display:block;}
.f_img li a { display:block; width:100%; height:100%;}
.f_dot a { float:left; display:block; width:10px; height:100%; margin-right:10px; border-radius:50%; background:#ccc; filter:alpha(opacity=30); opacity:1; overflow:hidden;}
.f_dot a.on,
.f_dot a:hover { background:#09f;}
.s_focus .f_prev,
.s_focus .f_next { display:none; position:absolute; top:50%; filter:alpha(opacity=15); opacity:0.15; width:36px; height:70px; margin-top:-35px; background:#000; z-index:5; color:#fff; text-decoration:none; line-height:70px; text-align:center; font-family:"宋体"; font-size:18px;}
.s_focus .f_prev { left:50px;}
.s_focus .f_next { right:50px;}
.s_focus .f_next:hover,
.s_focus .f_prev:hover { filter:alpha(opacity=25); opacity:0.25;}
</style>
4、JS插件部分
<script>
/***
* Copyright (c) 2015 http://www.cnblogs.com/cymmint/
* Ver: SFocus() 0.1
* Date: 2015-01-05
* Author: cymmint
* Function: SFocus是基本jQuery的banner(焦点图)切换插件，可以通过参数配置Box宽高，
* 点的大小、位置，是否显示Prev,Next,Dot以及Dot背景条，
* 首次显示等几张banner等
*/
(function($){ $.fn.SFocus = function(opts){ var defaults = {
oBoxWidth : "100%", //Silde width
oBoxHeight: 350, //Silde heigh
isOpenDBg : false, //open dot background bar
isOpenDot : true, //open do
isOpenPN : true, //open prev/next
dotWidth : 10, //dot width
dotHeight : 10, //dot heigh
dotLeft : "50%", //dot left offse
dotBottom : 16, //dot bottom offse
time : 3500, //cut time interval
onset : 0, //Silde focus img onset index
cutEvent : "mouseenter" //Slide dot cut even }; var opts = $.extend(defaults, opts); return this.each(function(){
var obox = $(this),
img = obox.find("ul.f_img li"),
sum = img.length,
cur_id = opts.onset >= sum ? 0 : opts.onset,
new_id = cur_id == sum-1 ? 0 : cur_id+1,
T = 0; //Html init
init(obox, sum, cur_id); //Dot cut
if(opts.isOpenDot) {
var dot = obox.find("div.f_dot a"); dot.on(opts.cutEvent, function(){
clearInterval(T); if ($(this).hasClass("on")) {
return false;
}
cur_id = img.parent().find(".on").index();
new_id = $(this).index(); cut(cur_id, new_id, img, dot);
});
} //Prev&Next cut
if(opts.isOpenPN) {
var prev = obox.find("a.f_prev"),
next = obox.find("a.f_next"); prev.on("click", function(){
clearInterval(T);
cur_id = img.parent().find(".on").index();
new_id = cur_id - 1;
new_id = new_id < 0 ? sum-1 : new_id; cut(cur_id, new_id, img, dot);
}); next.on("click", function(){
clearInterval(T);
cur_id = img.parent().find(".on").index();
new_id = cur_id + 1;
new_id = new_id >= sum ? 0 : new_id; cut(cur_id, new_id, img, dot);
});
} obox.hover(function(){
clearInterval(T);
if(opts.isOpenPN) {
prev.show();
next.show();
}
}, function(){
T = setInterval(function(){ auto(img, dot, sum);}, opts.time);
if(opts.isOpenPN) {
prev.hide();
next.hide();
}
}); //Slide run auto
T = setInterval(function(){ auto(img, dot, sum);}, opts.time);
}); //Slide run auto
function auto(img, dot, sum){
var cur_id = img.parent().find(".on").index(),
new_id = cur_id + 1;
new_id = new_id >= sum ? 0 : new_id; cut(cur_id, new_id, img, dot);
} //Slide cut
function cut(cur_id, new_id, img, dot){
if(opts.isOpenDot) {
dot.removeClass("on").eq(new_id).addClass("on");
} img.eq(cur_id).stop(true, false).fadeOut(300);
img.eq(new_id).stop(true, true).fadeIn(300);
img.removeClass("on").eq(new_id).addClass("on");
} //Html init
function init(obox, sum, cur_id){
var htm = "",
dot,
img; if(opts.isOpenDBg) {
htm = '<div class="f_d_bg"></div>';
} if(opts.isOpenDot) {
htm += '<div class="f_dot">';
for(var i=0; i<sum; i++) {
htm += i == cur_id ? '<a class="on" href="javascript:;"></a>' : '<a href="javascript:;"></a>';
}
htm += '</div>';
} if(opts.isOpenPN) {
htm += '<a class="f_prev" href="javascript:;"><</a><a class="f_next" href="javascript:;">></a>';
} obox.append(htm);
img = obox.find("ul.f_img");
dot = obox.find("div.f_dot"); if (!$.support.leadingWhitespace) {
obox.find("a").attr("hidefocus", true);
}
obox.css({"width":opts.oBoxWidth, "height":opts.oBoxHeight});
img.children().removeClass("on").eq(cur_id).addClass("on")
dot.children().css({"width":opts.dotWidth, "height":opts.dotHeight});
dot.css({"width":dot.children().eq(0).outerWidth(true) * sum, "height":opts.dotHeight, "left":opts.dotLeft, "bottom":opts.dotBottom, "marginLeft": -(dot.width()-10)/2});
}
} })(jQuery);
</script>
5、引用插件
<script>
$(function(){
$("div.s_focus").SFocus({
oBoxWidth : 500,
oBoxHeight: 300
});
});
</script>
6、全部代码
这是最新修改后的代码，上面的就不改了
<!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" />
<title>Focus</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <!--Focus Html-->
<div class="s_focus">
<ul class="f_img">
<li style="background-image:url(http://www.cnhippo.com/images/new_room.jpg);"><a href="#"></a></li>
<li style="background-image:url(http://www.cnhippo.com/images/christmas_day.jpg);"><a href="#"></a></li>
<li style="background-image:url(http://www.cnhippo.com/images/reg_banner.jpg);"><a href="#"></a></li>
</ul>
</div> <style>
/*Test - Can be deleted*/
* { margin:0; padding:0; list-style:none; outline:none;}
body { padding-top:50px;} /*CSS*/
.s_focus { position:relative; z-index:1; width:100%; min-width:940px; height:350px; padding:1px 0; border:1px solid #d9d9d9; border-width:1px 0; overflow:hidden;}
.s_focus .f_img { display:block; position:relative; z-index:1; width:100%; height:100%;}
.s_focus .f_dot { display:block; position:absolute; z-index:3; left:50%; bottom:15px; width:100px; height:10px; overflow:hidden;}
.s_focus .f_d_bg { position:absolute; z-index:2; width:100%; height:40px; left:0; bottom:1px; _bottom:0; background:#FFF; filter:alpha(opacity=30); opacity:0.3; box-shadow:0 -1px 3px #999;}
.f_img li { display:none; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:#fff no-repeat center 0;}
.f_img li a { display:block; width:100%; height:100%;}
.f_dot a { float:left; display:block; width:10px; height:100%; margin-right:10px; border-radius:50%; background:#ccc; overflow:hidden;}
.f_dot a.on,
.f_dot a:hover { background:#09f;}
.s_focus .f_prev,
.s_focus .f_next { display:none; position:absolute; top:50%; filter:alpha(opacity=15); opacity:0.15; width:36px; height:70px; margin-top:-35px; background:#000; z-index:5; color:#fff; text-decoration:none; line-height:70px; text-align:center; font-family:"宋体"; font-size:18px;}
.s_focus .f_prev { left:50px;}
.s_focus .f_next { right:50px;}
.s_focus .f_next:hover,
.s_focus .f_prev:hover { filter:alpha(opacity=25); opacity:0.25;}
</style> <script>
$(function(){
$("div.s_focus").SFocus({
oBoxWidth : 500,
oBoxHeight: 300,
onset : 2
});
});
</script> <script>
/***
* Copyright (c) 2015 http://www.cnblogs.com/cymmint/
* Ver: SFocus() 0.2
* Date: 2015-01-06
* Author: cymmint
* Function: SFocus是基本jQuery的banner(焦点图)切换插件，可以通过参数配置Box宽高，
* 点的大小、位置，是否显示Prev,Next,Dot以及Dot背景条，
* 首次显示等几张banner等
*/
(function($){ $.fn.SFocus = function(opts){ var defaults = {
oBoxWidth : "100%", //Silde width
oBoxHeight: 350, //Silde heigh
isOpenDBg : false, //open dot background bar
isOpenDot : true, //open do
isOpenPN : true, //open prev/next
dotWidth : 10, //dot width
dotHeight : 10, //dot heigh
dotLeft : "50%", //dot left offse
dotBottom : 16, //dot bottom offse
time : 3500, //cut time interval
onset : 0, //Silde focus img onset index
cutEvent : "mouseenter" //Slide dot cut even }; var opts = $.extend(defaults, opts); return this.each(function(){
var obox = $(this),
img = obox.find("ul.f_img li"),
sum = img.length,
cur_id = opts.onset >= sum ? 0 : opts.onset,
new_id = cur_id == sum-1 ? 0 : cur_id+1,
T = 0; //Html init
init(obox, sum, cur_id); //Dot cut
if(opts.isOpenDot) {
var dot = obox.find("div.f_dot a"); dot.on(opts.cutEvent, function(){
clearInterval(T); if ($(this).hasClass("on")) {
return false;
}
cur_id = img.parent().find(".on").index();
new_id = $(this).index(); cut(cur_id, new_id, img, dot);
});
} //Prev&Next cut
if(opts.isOpenPN) {
var prev = obox.find("a.f_prev"),
next = obox.find("a.f_next"); prev.on("click", function(){
clearInterval(T);
cur_id = img.parent().find(".on").index();
new_id = cur_id - 1;
new_id = new_id < 0 ? sum-1 : new_id; cut(cur_id, new_id, img, dot);
}); next.on("click", function(){
clearInterval(T);
cur_id = img.parent().find(".on").index();
new_id = cur_id + 1;
new_id = new_id >= sum ? 0 : new_id; cut(cur_id, new_id, img, dot);
});
} obox.hover(function(){
clearInterval(T);
if(opts.isOpenPN) {
prev.show();
next.show();
}
}, function(){
T = setInterval(function(){ auto(img, dot, sum);}, opts.time);
if(opts.isOpenPN) {
prev.hide();
next.hide();
}
}); //Slide run auto
T = setInterval(function(){ auto(img, dot, sum);}, opts.time);
}); //Slide run auto
function auto(img, dot, sum){
var cur_id = img.parent().find(".on").index(),
new_id = cur_id + 1;
new_id = new_id >= sum ? 0 : new_id; cut(cur_id, new_id, img, dot);
} //Slide cut
function cut(cur_id, new_id, img, dot){
if(opts.isOpenDot) {
dot.removeClass("on").eq(new_id).addClass("on");
} img.finish();
img.removeClass("on");
img.eq(cur_id).css("zIndex", 1); img.eq(new_id).addClass("on").css("zIndex",2);
img.eq(new_id).stop(true, false).fadeIn(500, function(){
img.eq(cur_id).hide();
});
} //Html init
function init(obox, sum, cur_id){
var htm = "",
dot,
img; if(opts.isOpenDBg) {
htm = '<div class="f_d_bg"></div>';
} if(opts.isOpenDot) {
htm += '<div class="f_dot">';
for(var i=0; i<sum; i++) {
htm += i == cur_id ? '<a class="on" href="javascript:;"></a>' : '<a href="javascript:;"></a>';
}
htm += '</div>';
} if(opts.isOpenPN) {
htm += '<a class="f_prev" href="javascript:;"><</a><a class="f_next" href="javascript:;">></a>';
} obox.append(htm);
img = obox.find("ul.f_img");
dot = obox.find("div.f_dot"); if (!$.support.leadingWhitespace) {
obox.find("a").attr("hidefocus", true);
}
obox.css({"width":opts.oBoxWidth, "height":opts.oBoxHeight});
img.children().eq(cur_id).addClass("on").css({"display":"list-item", "zIndex":2});
dot.children().css({"width":opts.dotWidth, "height":opts.dotHeight});
dot.css({"width":dot.children().eq(0).outerWidth(true) * sum, "height":opts.dotHeight, "left":opts.dotLeft, "bottom":opts.dotBottom, "marginLeft": -(dot.width()-10)/2});
}
} })(jQuery);
</script> </body>
</html>
展开全部
jQuery banner切换插件的更多相关文章
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- FlexSlider是一个非常出色的jQuery滑动切换插件
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- jquery简单切换插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- [转]8款实用的jQuery/CSS3最新插件应用
今天给大家分享8款非常酷的最新jQuery/CSS3应用插件,废话少说,下面一起来看看这些插件吧. 1.HTML5重力感应积木游戏 这也是一款基于HTML5技术的重力感应游戏,一些积木从天而降,你可以 ...
- 基于jQuery的对象切换插件：soChange 1.5 (点击下载)
http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 所有参数: $(obj).soChange({ thumbObj:null, //导 ...
- jQuery动画切换引擎插件Velocity.js
Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...
随机推荐
- COM组件宏观认识
一直搞不清楚COM到底是个什么东西,记录一些个人感想,可能很多错误的,慢慢消化. 一.宏观认识: 1.COM(组件对象模型)是一种标准,规则,要求,即即于建筑设计指标要求. 2.语言无关性,因为是建立 ...
- 国内镜像pip
建议非清华大学校内的使用这个镜像: http://e.pypi.python.org/simple(这也是一个http://pypi.v2ex.com/simple),清华校内的就使用这个:http: ...
- 自动拆装箱（int，Integer）
包装类型Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个 ...
- uC/OS-II源码分析（三）
首先来了解下实时系统的基本概念: 1) 临界区,共享资源,任务(类似于进程),任务切换,任务调度,可剥夺型内核,可重入函数,动态优先级调度, 2) 如何处理优先级反转问题.这个问题描述如下:有三个任务 ...
- Tomcat加载servlet类文件
问题1:tomcat什么时候加载servlet? 有两种情况 一种是启动时加载 一种是请求时加载 第一种是在web.xml中的<servlet>节点下增加类似:<load-on-st ...
- 2012年浙大:Sharing
题目描述: To store English words, one method is to use linked lists and store a word letter by letter. T ...
- Promise API
Promise API 刚刚接触promise这个东西,网上看了很多博客,大部分是讲怎么用Promise,丝毫没提怎么实现Promise. 我不甘 心,可是真去看JQuery或者Angular ...
- 正则表达式 LINUX
正则表达式 热身 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 例如 g ...
- struts2+jquery+easyui+datagrid+j…
一.概述 struts2提供了针对json的插件支持.常规来讲我们将如何将对象数组转成json对象在客户端直接调用呢?尤其和jquery的easyui插件配合使用,这个可能会有很多的问题需要我们解决. ...
- 第一个PyQuery小demo
1.打开网址https://www.v2ex.com/,查看其源码. 2.打开PyCharm编译器,新建工程c3-11,新建python file,命名为v2ex.py,同时,新建file,命名为v2 ...