jQuery焦点图轮播slide插件
jQuery焦点图轮播slide插件
需求示例：
一、插件API
1、插件使用
$.slide( container, contentCls, triggerCls, config );
2、必选参数
container: selector, // 外围盒子选择器 contentCls: selector, // 内容面板父容器ClassName triggerCls: selector, // 触发器父容器ClassName
3、config配置可选参数，例 :
{
auto: true , // 是否自动轮播，默认false
delay: 4000, // 自动轮播延迟时间，默认4000，单位毫秒
interval: 4000, // 自动轮播间隙时间，默认4400，单位毫秒
duration: 400, // 轮播动画持续时间，默认400，单位毫秒
easing: 'linear', // 轮播过渡方式，默认swing
activeCls: 'current' // 触发器激活样式，默认slide-active
}
二、插件源码
/*
* @作者 华子yjh http://HdhCmsTestcnblogs测试数据/yangjunhua/
* @date 2013/04/23 11:00:00
* @source 博客园
*/
$.extend({
slide: function ( container, contentCls, triggerCls, config ){
// 外围盒子
var container_box = $(container),
// 内容父元素
content_box = $(contentCls, container),
// 触发器父元素
trigger_box = $(triggerCls, container),
// 内容子元素集合
content_childs = $(contentCls, container).children(),
// 第一个内容子元素
first_CtnElem = $(content_childs.get(0 )),
// 触发器子元素集合
trigger_elems = $(triggerCls, container).children(),
// 滚动步伐值(固定，每个内容子元素宽度相同)
fixed_steps = first_CtnElem.width(),
// 内容子元素长度
len = content_childs.length,
// 内容子元素总长度
total_w = fixed_steps* len,
// 初始化left变量
left = 0 ,
// 定时器
setTimeoutId,
// 默认配置
defaultConfig = {
auto: false ,
delay: 4000 ,
interval: 4400 ,
duration: 400 ,
easing: 'swing' ,
activeCls: 'slide-active'
};
// 配置项
config = $.isPlainObject(config)&&config ? $.extend( defaultConfig, config )&& defaultConfig : defaultConfig;
// 定时器绑定函数
function autoSlide(){
left = parseInt(content_box.get(0).style.left, 10 );
left = left - fixed_steps; // 获取下一次轮播left值
// 为当前触发器元素增加激活样式
var curIndex = Math.abs(left/fixed_steps);
if (curIndex <= len-1 ) {
$(trigger_elems[curIndex]).addClass(config.activeCls).siblings().removeClass(config.activeCls);
} else {
$(trigger_elems[ 0 ]).addClass(config.activeCls).siblings().removeClass(config.activeCls);
}
// 轮播计算
if (Math.abs(left) < total_w) {
content_box.stop( true , true ).animate({ left: left + 'px' }, config.duration, config.easing, function (){
// 轮播到最后一项时，第一个内容子元素更新position，left属性值
if (Math.abs(left) === (total_w- fixed_steps)) {
first_CtnElem.css({ position: 'relative', left: total_w + 'px' });
}
});
}
else {
// 动画left为负的total_w像素时，重置第一个内容子元素和其自身样式
content_box.stop( true , true ).animate({ left: left + 'px' }, config.duration, config.easing, function (){
$(content_childs.get( 0)).css({ position: '', left: '' });
content_box.css({ left: 0 });
});
}
// 定时器
setTimeoutId = setTimeout(autoSlide, config.interval);
}
// 初始化操作
content_box.css({ total_w + 'px', position: 'absolute', top: 0, left: 0 });
// 是否自动轮播
if (!! config.auto) {
setTimeoutId = setTimeout(autoSlide, config.delay);
}
// 触发器绑定事件
$(trigger_elems).bind('mouseover', function (e){
var curTarget = e.currentTarget,
idx = trigger_elems.index(curTarget);
left = -(total_w/len)*idx;
$(curTarget).addClass(config.activeCls).siblings().removeClass(config.activeCls);
content_box.stop( true , true ).animate({ left: left + 'px' }, config.duration, config.easing, function (){
first_CtnElem.css({ position: '', left: '' });
// 轮播到最后一项时，第一个内容子元素更新position，left属性值
if (Math.abs(left) === (total_w- fixed_steps)) {
first_CtnElem.css({ position: 'relative', left: total_w + 'px' });
}
});
});
// 外围盒子绑定事件
// 触发mouseover事件，取消在各种情景中正在执行的定时器，避免与触发器元素所触发的事件代码冲突
container_box.bind('mouseover', function (e){
// 第一次触发mouseover事件时，如果延迟时间还没过时，则取消定时器setTimeoutId
// 第一次触发mouseover事件时，如果延迟已过，则取消正在执行的定时器setTimeoutId
// 如果超过一次触发mouseover事件时，则取消由mouseleave事件所触发的定时器
clearTimeout(setTimeoutId);
});
// 触发mouseleave事件，增加定时器，自动轮播得以继续
container_box.bind('mouseleave', function (e){
setTimeoutId = setTimeout(autoSlide, config.interval);
});
return this ;
}
});
三、示例
<! doctype html >
< html >
< head >
< meta charset ="utf-8" >
< title > jQuery Slide </ title >
< script src ="http://code.jquery测试数据/jquery-1.9.1.js" ></ script >
< style >
* { margin : 0 ; padding : 0 ; }
img { display : block ; border : none ; }
body { font-size : 12px ; font-family : '微软雅黑' ; }
ul { list-style : none ; }
.clear-fix:after { content : ' ' ; display : block ; height : 0 ; visibility : hidden ; clear : both ; }
.clear-fix { zoom : 1 ; }
#container { margin : 0 auto ; width : 520px ; height : 320px ; overflow : hidden ; position : relative ; }
.content li { width : 520px ; height : 320px ; float : left ; }
.trigger { position : absolute ; bottom : 10px ; right : 10px ; }
.trigger li { float : left ; display : inline ; margin-left : 10px ; color : #333 ; font-size : 18px ; line-height : 18px ; overflow : hidden ; cursor : pointer ; }
.trigger li.current { color : red ; }
</ style >
</ head >
< body >
< div id ="container" >
< ul class ="clear-fix content" >
< li >
< a href ="" target ="_blank" >
< img width ="520" height ="320" src ="http://img04.taobaocdn测试数据/tps/i4/T1Ei5gXENcXXbsjuY7-520-320.png" >
</ a >
</ li >
< li >
< a href ="" target ="_blank" >
< img width ="520" height ="320" src ="http://img01.taobaocdn测试数据/tps/i1/T1bT4MXEJgXXbsjuY7-520-320.png" >
</ a >
</ li >
< li >
< a href ="" target ="_blank" >
< img width ="520" height ="320" src ="http://img02.taobaocdn测试数据/tps/i2/T1d4ibXvFaXXbsjuY7-520-320.png" >
</ a >
</ li >
< li >
< a href ="" target ="_blank" >
< img width ="520" height ="320" src ="http://img04.taobaocdn测试数据/tps/i4/T11Tt_XstbXXbsjuY7-520-320.png" >
</ a >
</ li >
< li >
< a href ="" target ="_blank" >
< img width ="520" height ="320" src ="http://img03.taobaocdn测试数据/tps/i3/T1uqOfXxxaXXcQhuY7-520-320.jpg" >
</ a >
</ li >
< li >
< a href ="" target ="_blank" >
< img width ="520" height ="320" src ="http://img03.taobaocdn测试数据/tps/i3/T1o7l8XCRbXXbsjuY7-520-320.png" >
</ a >
</ li >
</ ul >
< ul class ="clear-fix trigger" >
< li class ="current" > ● </ li >
< li > ● </ li >
< li > ● </ li >
< li > ● </ li >
< li > ● </ li >
< li > ● </ li >
</ ul >
</ div >
< script >
// 此处为插件源码，省略
$( function (){
$.slide( ' #container ' , ' .content ' , ' .trigger ' ,
{
auto: true ,
delay: 4000 ,
interval: 4000 ,
duration: 400 ,
easing: 'linear ' ,
activeCls: ' current '
}
);
});
</ script >
</ body >
</ html >
PS：各个内容面板宽度必须一致，还有外围container容器CSS样式必须为相对定位
作者： 华子yjh ，转载时请注明出处并附上 原文链接
css常见两列布局方案
一、固定宽度两列布局
1.侧栏在左
<div id = "wrapper" >
<div id = "header" > header </div>
<div id = "container" class = "cls" >
<div id = "aside" >
<div class = "inner" > aside </div>
</div>
<div id = "main" >
<div class = "inner" > main </div>
</div>
</div>
<div id = "footer" > footer </div>
</div>
#header{ 980px; height: 90px; margin: 0 auto; background: #f60;}
#container{ 980px; height: 500px; margin: 0 auto;}
#aside{ float: left; 240px; height: 500px; background: #ccc;}
#main{ float: left; 740px; height: 500px; background: orange;}
#footer{ 980px; height: 90px; margin: 0 auto; background: #08f;}
点击查看demo
2.侧栏在右
<div id = "wrapper" >
<div id = "header" > header </div>
<div id = "container" class = "cls" >
<div id = "main" >
<div class = "inner" > main </div>
</div>
<div id = "aside" >
<div class = "inner" > aside </div>
</div>
</div>
<div id = "footer" > footer </div>
</div>
#header{ 980px; height: 90px; margin: 0 auto; background: #f60;}
#container{ 980px; height: 500px; margin: 0 auto;}
#main{ float: left; 740px; height: 500px; background: orange;}
#aside{ float:left; 240px; height: 500px; background: #ccc;}
#footer{ 980px; height: 90px; margin: 0 auto; background: #08f;}
点击查看demo
二、自适应布局
1.固定左栏右侧自适应
<div id = "wrapper" >
<div id = "header" > header </div>
<div id = "container" class = "cls" >
<div id = "aside" >
<div class = "inner" >
aside
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div id = "main" >
<div class = "inner" >
main
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
<div id = "footer" > footer </div>
</div>
#header{ 96%; height: 90px; margin: 0 auto; background: #f60;}
#container{ 96%; margin: 0 auto;}
#aside{ float: left; 240px; background: #ccc;}
#main{ margin-left: 240px; background: orange; }
#footer{ 96%; height: 90px; margin: 0 auto; background: #08f;}
点击查看demo
2.固定右栏左侧自适应
<div id = "wrapper" >
<div id = "header" > header </div>
<div id = "container" class = "cls" >
<div id = "main" >
<div class = "inner" >
main
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div id = "aside" >
<div class = "inner" >
aside
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
<div id = "footer" > footer </div>
</div>
#header{ 96%; height: 90px; margin: 0 auto; background: #f60;}
#container{ 96%; height: 500px; margin: 0 auto;}
#main{ float: left; 100%; background: orange;}
#main .inner{ padding-right: 240px;}
#aside{ float: left; 240px; margin-left: -240px; background: #ccc;}
#footer{ 96%; height: 90px; margin: 0 auto; background: #08f;}
点击查看demo
相关文章
【迟早得学】CSS3特效之透明:rgba
【迟早得学】CSS3特效之文字阴影:text-shadow
【迟早得学】CSS3特效之盒阴影:box-shadow
【迟早得学】CSS3特效之渐变:linear-gradient
【迟早得学】CSS3特效之转换:transform
【迟早得学】CSS3特效之过渡:transition
【迟早得学】CSS3特效之动画:animation
【总结】怎样用css实现图片垂直居中(兼容IE6/IE7)
【总结】css常见两列布局方案
【总结】css常见三列布局方案
【jquery】简单选项卡插件开发实战
【jquery】简单轮播图(焦点图)插件开发实战
【jquery】placeholder插件开发实战
分类: html&css
分类: JavaScript , jQuery插件
VS2010 生成的程序在其他电脑上不运行的问题
如果您也出现了这样的情况：
win7 sp1 64位操作系统，自己用visual studio 2010 旗舰版写了一个财务管理软件，在自己电脑上运行完全没有问题，但是拷
贝到其他人电脑上之后不管双击还是以管理身份运行，均没有反应，进程管理器中相关进程也只是一闪而过。之后在网上搜得说是改为使用
mfc静态链接，我也相应的改了，然后生成的release，可是还是在其他人电脑上没有反应。
无奈，只好在网上继续搜索结果，最后定在是不是.net framework版本的问题上，网上说改为2.0版本可以解决，然后我就打开项目属性
，悲剧的发现目标Framework 直接显示的4.0，连下拉条都没有...而且我的通用属性的配置及平台选项均是不适用状态...我又新建一mfc工
程，在新建菜单时上方有可以选择的.net 版本，我选择了2.0版本，但是新建之后打开属性它还是显示的4.0！ 继续在网上搜索之后，得知
安装.net framework 3.5 sp1之后可以解决问题，然后我就开始安装.net 3.5 sp1，但是无论是下载在线安装版还是完整安装版，都安装不
起，有三种状况：
1、无论点击那个安装都没有反应....也没有相应进程
2、多次重启之后终于有了反应，但是打开没一会就提示我必须使用“打开或关闭windows功能”才可以安装或配置.net 3.5，我也照着
做了，在“打开或关闭...”中不断地勾上它，重启，打开vs2010，没有变化，去掉它，重启，打开vs2010，新建项目时就只有4.0一个选项
了。然后再去掉它，重启，打开vs，又恢复原来的样子，还是不行，重复了多遍之后，彻底无语了。
3，继续搜啊搜，发现win7 是自带了.net 3.5的，但是我就是不能用呢！！然后我继续在“打开关闭windows功能”中去掉.net 3.5的勾
，重启，安装.net 3.5 sp1，他终于进入安装了，但是在安装到一半多的时候被程序兼容性助手阻止了！！说.net framework 3.5 sp1
language pack包会导致什么系统不能启动....随后我自己去官网下载了.net framework 3.5 sp1 language pack 64位安装包，单独安装也
是被阻止！（此处引用百度知道）
1、首先你做一个最简单的程序去测试，看看能否发布成功。如果能，第二步，检查程序。第三步，拷到具有相同环境的机器上，看能否运行。（如果不能，说明你的环境有问题）
2、如果不能发布成功，检查你的环境，或者你的vs配置。
我碰到的问题如下：
1、在本机上可以运行，但是放到其它机器上不能运行，大概会在线程中出现十秒的样子，然后自动被干掉，估计就是程序的问题了。然后把代码拷到别人机器上运行，
靠竟然出现了绝对路径（我觉得自己很SB）然后我弱弱的注释掉了。就这样一直不行一直调试，直到天黑。
你发现什么问题了吧，对就是我的路径，我怎么用绝对路径了呢，是大意了还是水平不行吧。
2、值得注意的是，我竟然还有资源文件没有拷贝进去，copy,past,搞定
总结：1、碰到问题从最简单的开始测试
2、千万不要写绝对路径，会死人的
3、想好了再动手，出问题了不能敷衍，没搞好问题的根源就在那，想想为什么报错。
4、打开文件的地方（这里被我忽略了），数据连接的地方必须抛出异常。
分类: 学习笔记
标签: winForm
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于jQuery焦点图轮播slide插件的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did46010