说明
之前写过一个jQuery的焦点图插件http://blog.csdn.net/qinshenxue/article/details/9199619,最近项目用到了seajs,为了符合模块开发的原则,把插件改造为CMD模块
演示
源码
html代码
<div id="banner" class="slider">
<ul class="slider-box">
<li style="background: url(/static/img/banner1.jpg) no-repeat center center"></li>
<li style="background: url(/static/img/banner2.jpg) no-repeat center center"></li>
<li style="background: url(/static/img/banner3.jpg) no-repeat center center"></li>
</ul>
<ul class="slider-nav">
<li data-no="0"></li>
<li data-no="1"></li>
<li data-no="2"></li>
</ul>
</div>
css代码
.slider{position:relative;overflow:hidden;width:100%;height:420px}
.slider-box{position:relative;margin:0;padding:0;list-style:none}
.slider-box li{position:absolute;top:0;left:0;display:none;margin:0;padding:0;width:100%;height:420px;list-style:none}
.slider-nav{position:relative;top:400px;display:table;margin:0 auto;padding:5px;list-style:none}
.slider-nav li{float:left;margin-right:3px;margin-left:3px;width:100px;height:8px;background:#ddd;text-align:center;font-size:12px;line-height:24px;cursor:pointer}
.slider-nav li.focus{background:#ff7f00}
js代码
define(function(require, exports, module) {
var $ = require('jquery');
var Slider = function(options) {
var task;
var no = 0;
var defaults = {
id : 'slider',
changeSpeed : 4000, // 图片切换的间隔时间
animateSpeed : 1000
};
$.extend(defaults, options);
// 包含的图片
var slider = $('#' + defaults.id);
var items = slider.find('.slider-box li');
var navs = slider.find('.slider-nav li');
// 显示默认
$(items[no]).show();
$(navs[no]).addClass('focus');
var focus = function() {
$(items[no]).stop(true, true).fadeOut(defaults.animateSpeed);
$(navs[no]).removeClass('focus');
};
var blur = function() {
$(items[no]).stop(true, true).fadeIn(defaults.animateSpeed);
$(navs[no]).addClass('focus');
};
slider.find('.slider-nav').on({
click : function() {
stop();
focus();
no = $(this).data('no');
blur();
},
mouseenter:function(){
stop();
},
mouseleave:function(){
start();
}
}, 'li');
var start = function() {
task = setTimeout(function() {
focus();
no++;
if (no == items.length) {
no = 0;
}
blur();
start();
}, defaults.changeSpeed);
};
// 终止循环
var stop = function() {
clearTimeout(task);
};
// 开始循环播放
start();
};
module.exports = Slider;
});