一個仿騰訊娛樂頻道焦點圖輪播的插件
ui3g.js
/*
頂部大圖捲動
*/
var Slide = (function() {
varquadEaseOut;
var doc = 文檔;
var $ = 函數{
return document.getElementById(s);
}
/**
取得索引值，工具類別
@param {Element} current 目前元素
@param {Object} obj 元素集合
**/
var getIndex = function(current, obj) {
for (var i=0; i
if (obj[i] == 目前) {
回我；
}
}
};
/**
@param {Element} el 目標元素
**/
var 兄弟姊妹 = function(el) {
var r = [],
n = el.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== el ) {
r.push( n );
}
}
回 r;
};
/**
設定 Slide 寬高
@param {Element} el Slide 元素
@param {Number} width Slide 寬度
@param {Number} height Slide 高度
**/
var setSlideWH = 函數(el, 寬度, 高度) {
var styleW,
式H;
if (width == '100%') { // 自適應寬度
styleW = '100%';
} else { //定寬
styleW = 寬度 'px';
}
if (height == '100%') { // 自適應高度
styleH = '100%';
} else { //定高
styleH = 高度 'px';
}
el.style.width = styleW;
el.style.height = styleH;
};
var readStyle = function(obj, name){
if(obj.style[名稱]){
return obj.style[姓名];
}else if(obj.currentStyle){
返回 obj.currentStyle[姓名]
}else if(document.defaultView && document.defaultView.getCompulatedStyle){
var d=document.defaultView.getComputedStyle(obj,null);
return d.getPropertyValue(name)
}其他{
返回 null
}
};
var 樣式 = {
setOpacity : 函數(obj,不透明度){
if(typeof(obj.style.opacity) != '未定義'){
obj.style.opacity = 不透明度;
}其他{
obj.style.filter = 'Alpha(Opacity=' (opacity*100) ')';
};
}
};
/* 動畫 */
var 擴充 = {
/**
漸顯元素
@param {Element} target 目標元素
**/
fadeIn : 函數(obj,時間){
if(readStyle(obj, 'display') == 'none'){
obj.style.display = '區塊';
};
style.setOpacity(obj,0);
時間=時間|| 200；
var 不透明度 = 0,步長 = 時間 / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(不透明度 >= 1) { style.setOpacity(obj,1);回傳; }
不透明度=1/步驟；
style.setOpacity(obj,不透明度);
obj.showT = setTimeout(arguments.callee,20);
},20);
},
/**
漸隱元素
@param {Element} target 目標元素
**/
fadeOut : 函數(obj,時間){
時間=時間|| 200；
style.setOpacity(obj,1);
var 不透明度 = 1,步長 = 時間 / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(不透明度
obj.style.display = '無';
style.setOpacity(obj,0);
返回；
};
不透明度 -= 1/步；
obj.showT = setTimeout(arguments.callee,20);
},20);
},
/**
動畫元素
@param {Element} target 目標元素
@param {String} 關鍵目標樣式
@param {Number} start key初始值
@param {Number} end key結束值
@param {Number} 速率
@param {Function} endFn 結束時的回呼
@param {String} u 樣式單位
**/
actPX : 函數(obj,key,開始,結束,速率,endFn,u){
if(typeof(u) == '未定義'){u = 'px'};
clearTimeout(obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut']);
if(開始>結束){
速率 = - Math.abs(速率);
}其他{
速率 = Math.abs(速率);
};
var now = 開始;
var length = 結束 - 開始;
obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(function(){
現在=速率；
var space = 結束 - 現在;
if(開始
if(空格
speed = Math.ceil(space/3);
};
if(空格
obj[key] = end u;
if(endFn){endFn()};
返回；
};
}其他{
if(空格>長度/3){
speed = Math.floor(space/3);
};
if(空格 >= 0){
obj[key] = end u;
if(endFn){endFn()};
返回；
};
};
obj[key] = now u;
obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(arguments.callee,20);
},20);
}
}
/**
設定
**/
var config = {
imgData: [], //初步使用圖片資訊
imgTargetId: '', // 初使化投影片目標 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
}
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
slideList[i].className = '';
slideList[i].getElementsByTagName("p")[0].style.display = 'none';
}
for(var i=0; i
dotList[i].className = '';
}
e = e 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
// 找到目前觸發器
if (slideList[i].className == 'cur') {
// 取得目前觸發器的指標
config.index = getIndex(slideList[i], slideList);
}
}
var autoFun = function() {
if (config.goSwitch) {
config.index = config.index == 5 ?0 : config.index;
if(!b){
b = true;
config.index = 0;
}
if(config.index == 3 && !c){
clearInterval(timerA);
timerA = setInterval(autoFun, 10000);
c = true;
}else if(c){
c = false;
clearInterval(timerA);
timerA = setInterval(autoFun, config.imgInterval);
}
//console.log(config.index);
run(config.index, !1);
config.index = 1;
}
};
timerA = setInterval(autoFun, config.imgInterval);
};
/**
手指事件
**/
var touchFun = function(evt){
var $ = function(o){ 回傳 document.querySelector(o)}, $$ = function(o){ 回傳 document.querySelectorAll(o)}, touchInfo = {startX:0, endX:0}, slip = $( '#slide'), btnL = $('#sliderL'), btnR = $('#sliderR');
Slide.addEventListener('touchstart', function(evt) {
evt.preventDefault();
if(evt.changedTouches.length == 0) return;
touchInfo.startX = evt.changedTouches[0].pageX;
}，假）；
Slide.addEventListener('touchend', function(evt) {
evt.preventDefault();
if(evt.changedTouches.length == 0) return;
touchInfo.endX = evt.changedTouches[0].pageX;
var offset = touchInfo.endX - touchInfo.startX;
if(偏移量
運行（config.index，！1）
} else if(offset > 0) {
運行（--config.index，！0）
}其他{
if(evt.target.parentNode.parentNode.className == 'cur'){
window.open(evt.target.parentNode.getAttribute('href'), '_blank');
}其他{
返回；
}
}
},假);
btnL.addEventListener('touchend', function() {run( config.index, !1)}, false)
btnR.addEventListener('touchend', function() {run(--config.index, !0)}, false)
};
返回{
初始化：函數（obj，e）{
// 取得設定資訊
config.imgData = obj.data; // 設定圖片資訊
config.imgTargetId = obj.targetId; // 投影片目標 ID
config.imgWidth = obj.width || config.imgWidth； // 設定圖片寬度
config.imgHeight = obj.height || config.imgHeight； // 設定圖片高度
config.imgAuto = obj.auto ||配置.imgAuto; // 設定自動播放
config.imgInterval = obj.interval || config.imgInterval;//設定間隔時間
//config.imgDataLen = config.imgData.length; // 設定圖片數
// 產生投影片結構
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(){
清除間隔(timerA);
config.index = 1;
以（config.index，！1）
}
btnL.onclick = function(){
清除間隔(timerA);
config.index -= 1;
以（config.index，！0）
}
$('slide').onmouseover = function(event){
清除間隔(timerA);
計時器A = null;
event.stopPropagation();
}
$('slide').onmouseout = function(event){
if (config.imgAuto) {
自動切換();
}
config.index = config.curImg;
event.stopPropagation();
}
if(/ipad;/i.test(navigator.userAgent.toLowerCase())){
touchFun(e);
}
// 自動切換
if (config.imgAuto) {
自動切換();
}
dotList = $("focus_dot").getElementsByTagName('li');
var n;
for(n = 0; 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){
運行(this.index-1, !1);
}其他{
運行(this.index-1, !0)
}
config.curImg = this.index;
}
}
}
}
})();
html
<script><br />
var $ = function(s){<br />
return document.getElementById(s);<br />
}<br />
//參數設定<br />
slide.init({<br />
//width: 100%, // 焦點圖寬度（非必須，且預設值自適應)<br />
height: 390, // 焦點圖高度（非必須，且預設值自適應）<br />
auto: true, // 是否以自動切換（非必須，預設值 false)<br />
interval: 5000, //切換間隔時間（且必須，預設值 3000，並在 auto 為 true 時有效)<br />
targetId: 'slide', // html 對應的焦點圖 ID（必須）<br />
data: $('_slide').getElementsByTagName('li').length// 焦點圖資料（必須）<br />
});<br />
</script>
<script>window.onerror=function(){return true;};</script>
以上就是給大家分享的jQuery仿騰訊娛樂頻道焦點圖特效的全部內容，希望大家能夠喜歡。
