/**
* $.yxmobileslider
* @charset utf-8
* @extends jquery.1.9.1
* @fileoverview 创建一个焦点轮播插件,兼容pc端和移动端,若引用请保留出处,谢谢!
* @author 李玉玺
* @version 1.0
* @date 2013-11-12
* @example
* $(".container").yxmobileslider();
*/
(function($){
$.fn.yxmobileslider = function(settings){
var defaultsettings = {
width: 640, //容器宽度
height: 320, //容器高度
during: 5000, //间隔时间
speed:30 //滑动速度
}
settings = $.extend(true, {}, defaultsettings, settings);
return this.each(function(){
var _this = $(this), s = settings;
var startx = 0, starty = 0; //触摸开始时手势横纵坐标
var tempos; //滚动元素当前位置
var icurr = 0; //当前滚动屏幕数
var timer = null; //计时器
var omover = $("ul", _this); //滚动元素
var oli = $("li", omover); //滚动单元
var num = oli.length; //滚动屏幕数
var oposition = {}; //触点位置
var movewidth = s.width; //滚动宽度
//初始化主体样式
_this.width(s.width).height(s.height).css({
position: 'relative',
overflow: 'hidden',
margin:'0 auto'
}); //设定容器宽高及样式
omover.css({
position: 'absolute',
left: 0
});
oli.css({
float: 'left',
display: 'inline'
});
$("img", oli).css({
width: s.width,
height: s.height
});
//初始化焦点容器及按钮
_this.append('
');
var ofocuscontainer = $(".focus", _this);
for (var i = 0; i < num; i++) {
$("div", ofocuscontainer).append("");
}
var ofocus = $("span", ofocuscontainer);
ofocuscontainer.css({
minheight: $(this).find('span').height() * 2,
position: 'absolute',
bottom: 0,
background: 'rgba(0,0,0,0.5)'
})
$("span", ofocuscontainer).css({
display: 'block',
float: 'left',
cursor: 'pointer'
})
$("div", ofocuscontainer).width(ofocus.outerwidth(true) * num).css({
position: 'absolute',
right: 10,
top: '50%',
margintop: -$(this).find('span').width() / 2
});
ofocus.first().addclass("current");
//页面加载或发生改变
$(window).bind('resize load', function(){
if (ismobile()) {
mobilesettings();
bindtochuevent();
}
oli.width(_this.width()).height(_this.height());//设定滚动单元宽高
omover.width(num * oli.width());
ofocuscontainer.width(_this.width()).height(_this.height() * 0.15).css({
zindex: 2
});//设定焦点容器宽高样式
_this.fadein(300);
});
//页面加载完毕banner自动滚动
automove();
//pc机下焦点切换
if (!ismobile()) {
ofocus.hover(function(){
icurr = $(this).index() - 1;
stopmove();
domove();
}, function(){
automove();
})
}
//自动运动
function automove(){
timer = setinterval(domove, s.during);
}
//停止自动运动
function stopmove(){
clearinterval(timer);
}
//运动效果
function domove(){
icurr = icurr >= num - 1 ? 0 : icurr + 1;
doanimate(-movewidth * icurr);
ofocus.eq(icurr).addclass("current").siblings().removeclass("current");
}
//绑定触摸事件
function bindtochuevent(){
omover.get(0).addeventlistener('touchstart', touchstartfunc, false);
omover.get(0).addeventlistener('touchmove', touchmovefunc, false);
omover.get(0).addeventlistener('touchend', touchendfunc, false);
}
//获取触点位置
function touchpos(e){
var touches = e.changedtouches, l = touches.length, touch, tagx, tagy;
for (var i = 0; i < l; i++) {
touch = touches[i];
tagx = touch.clientx;
tagy = touch.clienty;
}
oposition.x = tagx;
oposition.y = tagy;
return oposition;
}
//触摸开始
function touchstartfunc(e){
clearinterval(timer);
touchpos(e);
startx = oposition.x;
starty = oposition.y;
tempos = omover.position().left;
}
//触摸移动
function touchmovefunc(e){
touchpos(e);
var movex = oposition.x - startx;
var movey = oposition.y - starty;
if (math.abs(movey) < math.abs(movex)) {
e.preventdefault();
omover.css({
left: tempos + movex
});
}
}
//触摸结束
function touchendfunc(e){
touchpos(e);
var movex = oposition.x - startx;
var movey = oposition.y - starty;
if (math.abs(movey) < math.abs(movex)) {
if (movex > 0) {
icurr--;
if (icurr >= 0) {
var movex = icurr * movewidth;
doanimate(-movex, automove);
}
else {
doanimate(0, automove);
icurr = 0;
}
}
else {
icurr++;
if (icurr < num && icurr >= 0) {
var movex = icurr * movewidth;
doanimate(-movex, automove);
}
else {
icurr = num - 1;
doanimate(-(num - 1) * movewidth, automove);
}
}
ofocus.eq(icurr).addclass("current").siblings().removeclass("current");
}
}
//移动设备基于屏幕宽度设置容器宽高
function mobilesettings(){
movewidth = $(window).width();
var iscale = $(window).width() / s.width;
_this.height(s.height * iscale).width($(window).width());
omover.css({
left: -icurr * movewidth
});
}
//动画效果
function doanimate(itarget, fn){
omover.stop().animate({
left: itarget
}, _this.speed , function(){
if (fn)
fn();
});
}
//判断是否是移动设备
function ismobile(){
if (navigator.useragent.match(/android/i) || navigator.useragent.indexof('iphone') != -1 || navigator.useragent.indexof('ipod') != -1 || navigator.useragent.indexof('ipad') != -1) {
return true;
}
else {
return false;
}
}
});
}
})(jquery);