/*
* hwslider内容滑动切换插件 - v1.0
* by 月光光
* http://www.helloweba.com
*/
;(function($, window, document, undefined) {
var hwslider = function(ele, opt){
var self = this;
self.$element = ele,
self.defaults = {
width: 1920, //初始宽度
height: 800, //初始高度
start: 1, //初始滑动位置,从第几个开始滑动
speed: 400, //滑动速度,单位ms
interval: 5000, //间隔时间,单位ms
autoplay: false, //是否自动滑动
dotshow: true, //是否显示圆点导航
arrshow: true, //是否显示左右方向箭头导航
touch: true, //是否支持触摸滑动
afterslider: function(){}
},
self.clickable = true, //是否已经点击了滑块在做滑动动画
self.options = $.extend({}, self.defaults, opt)
}
hwslider.prototype = {
init: function(){
var self = this,
ele = self.$element;
var sliderinder = ele.children('ul')
var hwsliderli = sliderinder.children('li');
var hwslidersize = hwsliderli.length; //滑块的总个数
var index = self.options.start;
var touchstarty = 0,touchstartx = 0;
//显示左右方向键
if(self.options.arrshow){
var arrelement = '
';
ele.append(arrelement);
}
for(i=1;i<=hwslidersize;i++){
if(index==i) hwsliderli.eq(index-1).addclass('active');
}
//显示圆点导航
if(self.options.dotshow){
var dot = '';
for(i=1;i<=hwslidersize;i++){
if(index==i){
dot += '';
}else{
dot += '';
}
}
var dotelement = ''+dot+'
';
ele.append(dotelement);
}
//初始化组件
var resize = function(){
var pct = self.options.height/self.options.width; //宽高比
var swidth = ele.width();
//根据滑块宽度等比例缩放高度
var sheight = ele.width()*pct;
ele.css('height',sheight);
if(self.options.arrshow){
var arroffset = (sheight-40)/2;
ele.find(".arr").css('top',arroffset+'px'); //导航箭头位置
}
if(self.options.dotshow){
/*
var dotwidth = hwslidersize*20;
var dotoffset = (swidth-dotwidth)/2;
ele.find(".dots").css('left',dotoffset+'px'); //导航圆点位置
*/
}
}
ele.css('height',self.options.height);
resize();
//窗口大小变换时自适应
$(window).resize(function(){
resize();
});
if(self.options.arrshow){
//点击右箭头
ele.find('.next').on('click', function(event) {
event.preventdefault();
if(self.clickable){
if(index >= hwslidersize){
index = 1;
}else{
index += 1;
}
self.moveto(index,'next');
}
});
//点击左箭头
ele.find(".prev").on('click', function(event) {
event.preventdefault();
if(self.clickable){
if(index == 1){
index = hwslidersize;
}else{
index -= 1;
}
self.moveto(index,'prev');
}
});
}
//点击导航圆点
if(self.options.dotshow){
ele.find(".dots span").on('click', function(event) {
event.preventdefault();
if(self.clickable){
var dotindex = $(this).data('index');
if(dotindex > index){
dir = 'next';
}else{
dir = 'prev';
}
if(dotindex != index){
index = dotindex;
self.moveto(index, dir);
}
}
});
}
//自动滑动
if(self.options.autoplay){
var timer;
var play = function(){
index++;
if(index > hwslidersize){
index = 1;
}
self.moveto(index, 'next');
}
timer = setinterval(play, self.options.interval); //设置定时器
//鼠标滑上时暂停
ele.hover(function() {
timer = clearinterval(timer);
}, function() {
timer = setinterval(play, self.options.interval);
});
};
//触摸滑动
if(self.options.touch){
hwsliderli.on({
//触控开始
'touchstart': function(e) {
touchstarty = e.originalevent.touches[0].clienty;
touchstartx = e.originalevent.touches[0].clientx;
},
//触控结束
'touchend': function(e) {
var touchendy = e.originalevent.changedtouches[0].clienty,
touchendx = e.originalevent.changedtouches[0].clientx,
ydiff = touchstarty - touchendy,
xdiff = touchstartx - touchendx;
//判断滑动方向
if ( math.abs( xdiff ) > math.abs( ydiff ) ) {
if ( xdiff > 5 ) {
if(index >= hwslidersize){
index = 1;
}else{
index += 1;
}
self.moveto(index,'next');
} else {
if(index == 1){
index = hwslidersize;
}else{
index -= 1;
}
self.moveto(index,'prev');
}
}
touchstarty = null;
touchstartx = null;
},
//触控移动
'touchmove': function(e) {
if(e.preventdefault) { e.preventdefault(); }
}
});
}
},
//滑动移动
moveto: function(index,dir){
var self = this,
ele = self.$element;
var clickable = self.clickable;
var dots = ele.find(".dots span");
var sliderinder = ele.children('ul');
var hwsliderli = sliderinder.children('li');
if(clickable){
self.clickable = false;
//位移距离
var offset = ele.width();
if(dir == 'prev'){
offset = -1*offset;
}
//当前滑块动画
sliderinder.children('.active').stop().animate({
left: -offset},
self.options.speed,
function() {
$(this).removeclass('active');
});
//下一个滑块动画
hwsliderli.eq(index-1).css('left', offset + 'px').addclass('active').stop().animate({
left: 0},
self.options.speed,
function(){
self.clickable = true;
});
//文字展播动画
hwsliderli.find('.intro').removeclass('fadeindown');
hwsliderli.find('img.fangda').removeclass('fangda');
hwsliderli.eq(index-1).find('.intro').addclass('fadeindown');
hwsliderli.eq(index-1).find('img').addclass('img_fangda');
self.options.afterslider.call(self);
//显示可切换的圆点
dots.removeclass('active');
dots.eq(index-1).addclass('active');
}else{
return false;
}
}
}
$.fn.hwslider = function(options) {
var hwslider = new hwslider(this, options);
return this.each(function () {
hwslider.init();
});
};
})(jquery, window, document);