// javascript document
;(function($, window, document, undefined) {
var hwslider = function(ele, opt){
var self = this;
self.$element = ele,
self.defaults = {
width: 1920, //初始宽度
height: 800, //初始高度
start: 1, //初始滑动位置，从第几个开始滑动
speed: 1000, //滑动速度，单位ms
interval: 6000, //间隔时间，单位ms
autoplay: false, //是否自动滑动
dotshow: true, //是否显示圆点导航
arrshow: true, //是否显示左右方向箭头导航
touch: true, //是否支持触摸滑动
hover: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 swidth = ele.width();
//根据滑块宽度等比例缩放高度
var sheight
if($(window).width()>1200){
sheight = $(window).height()-$('.header').height();
}else{
sheight = self.options.height/self.options.width*swidth;
}
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); //设置定时器
//鼠标滑上时暂停
if(self.options.hover){
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();
var anima=100;
if(dir == 'prev'){
offset = -1*offset;
anima=-100
}
//当前滑块动画
hwsliderli.css({'z-index':'0','left':'0'});
sliderinder.children('.active').stop().animate({
'left': -anima
},self.options.speed,function() {
$(this).removeclass('active');
});
//下一个滑块动画
hwsliderli.eq(index-1).css({'left': offset + 'px','z-index':'9'});
if(hwsliderli.eq(index-1).find('video').size()>0 && !$('html').hasclass('lt9')){
hwsliderli.eq(index-1).find('video').get(0).currenttime = 1;
}
hwsliderli.eq(index-1).addclass('active').stop().animate({
left: 0},
self.options.speed,'easeoutcubic',
function(){
self.clickable = true;
if(hwsliderli.eq(index-1).find('video').size()>0 && !$('html').hasclass('lt9')){
hwsliderli.eq(index-1).find('video').get(0).play();
}
});
var olen=hwsliderli.eq(index-1).find('.img_hidden img').length
var rans1 = parseint(math.random() * olen);
var osrc=hwsliderli.eq(index-1).find('.img_hidden img').eq(rans1).attr('src');
hwsliderli.eq(index-1).find('.intro .all_img>img').attr('src',osrc);
if(hwsliderli.eq(index-1).data('position')=='p_left'){
hwsliderli.eq(index-1).find('.tqchina_banner_text').css({
'opacity':'0',
'left':'50%'
}).stop().delay(500).animate({
'opacity':'1',
'left':'30%'
},self.options.speed,'easeoutcubic');
}
if(hwsliderli.eq(index-1).data('position')=='p_right'){
hwsliderli.eq(index-1).find('.tqchina_banner_text').css({
'opacity':'0',
'left':'50%'
}).stop().delay(500).animate({
'opacity':'1',
'left':'75%'
},self.options.speed,'easeoutcubic');
}
gotol(6)
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);