一个仿腾讯娱乐频道焦点图轮播的插件
ui3g.js
代码如下:
SEOut;
var doc = document;
var $ = function(s){
return document.getElementById(s);
}
/**
获取索引值，工具类
@param {Element} current 当前元素
@param {Object} obj 元素集合
**/
var getIndex = function(current,obj) {
for (var i=0; i= 1) { style.setOpacity(obj,1); return; }
opacity +=1/step;
style.setOpacity(obj,opacity);
obj.showT = setTimeout(arguments.callee,20);
},
/**
渐隐元素
@param {Element} target 目标元素
**/
fadeOut : function(obj,time){
time = time || 200;
style.setOpacity(obj,1);
var opacity = 1,step = time / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(opacity <= 0){
obj.style.display = 'none';
style.setOpacity(obj,0);
return;
};
opacity -= 1/step;
obj.showT = setTimeout(arguments.callee,
/**
动画元素
@param {Element} target 目标元素
@param {String} key target样式
@param {Number} start key初始值
@param {Number} end key结束值
@param {Number} speed 速度
@param {Function} endFn 结束时的回调
@param {String} u 样式单位
**/
actPX : function(obj,key,start,end,speed,endFn,u){
if(typeof(u) == 'undefined'){u = 'px'};
clearTimeout(obj['_extend_actPX' + key.replace(/\-\.\=/,'_') + '_timeOut']);
if(start > end){
speed = - Math.abs(speed);
}else{
speed = Math.abs(speed);
};
var now = start;
var length = end - start;
obj['_extend_actPX' + key.replace(/\-\.\=/,'_') + '_timeOut'] = setTimeout(function(){
now += speed;
var space = end - now;
if(start < end){
if(space < length/3){
speed = Math.ceil(space/3);
};
if(space <= 0){
obj[key] = end + u;
if(endFn){endFn()};
return;
};
}else{
if(space > length/3){
speed = Math.floor(space/3);
};
if(space >= 0){
obj[key] = end + u;
if(endFn){endFn()};
return;
};
};
obj[key] = now + u;
obj['_extend_actPX' + key.replace(/\-\.\=/,'_') + '_timeOut'] = setTimeout(arguments.callee,20);
}
}
/**
配置
**/
var config = {
imgData: [],// 初使化图片信息
imgTargetId: '',// 初使化 Slide 目标 ID
imgWidth: '100%',// 初使化图片宽度
imgHeight: '100%',// 初使化图片高度
imgAuto: false,// 初使化自动播放
imgInterval: 3000,// 初使化间隔时间
imgDataLen: 0,// 初使化图片数量
goSwitch: true,// 鼠标悬停时切换状态
index: 4,// 焦点所在索引值
_index: 0,
curImg: 5,
indexShow : 5
};
/**
生成并插入 Slide 结构
**/
var buildSlide = function() {
// 注入 Slide 结构
var panelHtml = $('_slide').getElementsByTagName('ul')[0].innerHTML;
var aLi = $('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
$('_slide').getElementsByTagName('ul')[0].innerHTML = panelHtml + panelHtml;
// 设置宽高
setSlideWH($(config.imgTargetId),config.imgWidth,config.imgHeight);
$('_slide').getElementsByTagName('ul')[0].style.left = '-' + aLi[0].offsetWidth * 4 + 'px';
};
quadEaSEOut = function (t,b,c,d,s) {
return -c *(t/=d)*(t-2) + b;
};
var move = function(){
//var e = this;
clearTimeout(config.timer),
config.t < 50 ? (BoxMoveTo(Math.round(quadEaSEOut(config.t += 3,config.b,config.c,50))),config.timer=setTimeout(function(){move()},30)) : BoxMoveTo(config.target)
}
var BoxMoveTo = function(e){
$('slide_list').style.left = e+"px"
}
//var dotNum = 0;
var d = false;
var run = function(e,t){
var slideList = $('slide_list').getElementsByTagName('li');
dotList = $("focus_dot").getElementsByTagName('li');
slideList[config._index].className = '';
for(var i=0; i config.imgData ? 1 : e,
config.target = -Math.abs(slideList[0].offsetWidth)*(config.index = e),
config.t = 0,
config.b = t ? config.target - slideList[0].offsetWidth : config.target + slideList[0].offsetWidth,
config.c = config.target - config.b,
move();
config.curImg = config.index + 1 > 6 ? 1 : (config.index + 1);
slideList[config.curImg].className = 'cur';
var dotN = 0;
if(config.index >= 4){
dotN = config.index - 4;
}else{
dotN = config.curImg;
}
dotList[dotN].className = "current";
slideList[config.curImg].getElementsByTagName("p")[0].style.display = 'block';
config._index = config.curImg;
}
/**
自动切换
**/
var b = false,c = false,timerA = null;
var autoSwitch = function() {
var slideList = $('slide_list').getElementsByTagName('li');
// 遍历触发器
for (var i=0; i 0) {
run(--config.index,!0)
}else{
if(evt.target.parentNode.parentNode.className == 'cur'){
window.open(evt.target.parentNode.getAttribute('href'),'_blank');
}else{
return;
}
}
},false);
btnL.addEventListener('touchend',function() {run(++config.index,!1)},false)
btnR.addEventListener('touchend',function() {run(--config.index,!0)},false)
};
return {
init: function(obj,e) {
// 获取配置信息
config.imgData = obj.data; // 设置图片信息
config.imgTargetId = obj.targetId; // 设置 Slide 目标 ID
config.imgWidth = obj.width || config.imgWidth; // 设置图片宽度
config.imgHeight = obj.height || config.imgHeight; // 设置图片高度
config.imgAuto = obj.auto || config.imgAuto; // 设置自动播放
config.imgInterval = obj.interval || config.imgInterval;// 设置间隔时间
//config.imgDataLen = config.imgData.length; // 设置图片数量
// 生成 Slide 结构
buildSlide();
var slideList = $('slide_list').getElementsByTagName('li');
$('slide_list').style.width = slideList[0].offsetWidth*slideList.length + 'px';
slideList[config.curImg].className = 'cur';
var btnL = $('sliderL'),btnR = $('sliderR'),btnClose = $('slidClosed');
btnR.onclick = function(){
clearInterval(timerA);
config.index += 1;
run(config.index,!1)
}
btnL.onclick = function(){
clearInterval(timerA);
config.index -= 1;
run(config.index,!0)
}
$('slide').onmouSEOver = function(event){
config.index = Math.ceil(Math.abs(parseInt($('_slide').getElementsByTagName('ul')[0].style.left)/slideList[0].offsetWidth));
clearInterval(timerA);
timerA = null;
event.stopPropagation();
}
$('slide').onmouSEOut = function(event){
if (config.imgAuto) {
autoSwitch();
}
config.index = config.curImg;
event.stopPropagation();
}
if(/ipad;/i.test(navigator.userAgent.toLowerCase())){
touchFun(e);
}
// 自动切换
if (config.imgAuto) {
autoSwitch();
}
dotList = $("focus_dot").getElementsByTagName('li');
var n;
for(n = 0; n < dotList.length; n++ ){
dotList[n].index = n;
dotList[n].onclick = function() {
if(config.curImg == this.index || config.curImg == this.index + 5) return;
var n = 0;
n = config.curImg > 4 ? 0 : config.curImg;
if(this.index > n){
run(this.index-1,!1);
}else{
run(this.index-1,!0)
}
config.curImg = this.index;
}
}
}
}
})();
html
代码如下:
相关文章
jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。 兼容性如图： ht...
css代码： js代码：
一、什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异...
AMD 模块 AMD（异步模块定义，Asynchronous Module Definition）格式总体的目标是为现在的开发者提供一...