www.gusucode.com > 35：【198-4537】财税代理公司注册代理记账网站织梦模板（带手机端） > 35：【198-4537】财税代理公司注册代理记账网站织梦模板（带手机端）/www6/m/js/yxmobileslider.js
/**
* $.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: 800, //容器宽度
height: 508, //容器高度
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: '100%',
height: '100%'
});
//初始化焦点容器及按钮
_this.append('<div class="focus"><div></div></div>');
var oFocusContainer = $(".focus");
for (var i = 0; i < num; i++) {
$("div", oFocusContainer).append("<span></span>");
}
var oFocus = $("span", oFocusContainer);
oFocusContainer.css({
minHeight: $(this).find('span').height() * 2,
position: 'absolute',
bottom: 0,
})
$("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);