jQuery焦点图轮播slide插件
需求示例：
一、插件API
1、插件使用
$.slide( container, contentCls, triggerCls [,config] );
2、必选参数
container: selector, // 外围盒子选择器 contentCls: selector, // 内容面板父容器ClassName triggerCls: selector, // 触发器父容器ClassName
3、config配置可选参数，例 :
{ autoplay: true, // 是否自动轮播，默认false delay: 4000, // 自动轮播延迟时间，默认4000，单位毫秒 interval: 4000, // 自动轮播间隙时间，默认4400，单位毫秒 duration: 400, // 轮播动画持续时间，默认400，单位毫秒 easing: 'linear', // 轮播过渡方式，默认swing activeCls: 'current' // 触发器激活样式，默认slide-active }
二、插件源码
$.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_childs = $(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_childs[curIndex]).addClass(config.activeCls).siblings().removeClass(config.activeCls); } else { $(trigger_childs[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(){ //first_CtnElem.css({ position: '', left: '' }); first_CtnElem.removeAttr('style'); content_box.css({ left: 0 }); }); } // 定时器 if (!!config.autoplay) { setTimeoutId = setTimeout(autoSlide, config.delay); } } // 初始化操作 content_box.css({ width: total_w + 'px', position: 'absolute', top: 0, left: 0}); // 是否自动轮播 if (!!config.autoplay) { setTimeoutId = setTimeout(autoSlide, config.delay); } // 触发器绑定事件 $(trigger_childs).bind('mouseover', function(e){ var curTarget = e.currentTarget, idx = trigger_childs.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: '' }); first_CtnElem.removeAttr('style'); // 轮播到最后一项时，第一个内容子元素更新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事件所触发的定时器 if (!!config.autoplay) { clearTimeout(setTimeoutId); } }); // 触发mouseleave事件，增加定时器，自动轮播得以继续 container_box.bind('mouseleave', function(e){ if (!!config.autoplay) { setTimeoutId = setTimeout(autoSlide, config.delay); } }); return this; } });
三、示例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery Slide</title> <script src="http://code.jquery.com/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.com/tps/i4/T1Ei5gXENcXXbsjuY7-520-320.png"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img01.taobaocdn.com/tps/i1/T1bT4MXEJgXXbsjuY7-520-320.png"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img02.taobaocdn.com/tps/i2/T1d4ibXvFaXXbsjuY7-520-320.png"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img04.taobaocdn.com/tps/i4/T11Tt_XstbXXbsjuY7-520-320.png"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img03.taobaocdn.com/tps/i3/T1uqOfXxxaXXcQhuY7-520-320.jpg"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img03.taobaocdn.com/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样式必须为相对定位