一个仿腾讯娱乐频道焦点图轮播的插件
ui3g.js
复制代码 代码如下:
/*
顶部大图滚动
*/
var slide = (function() {
var quadEaseOut;
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<obj.length; i++) {
if (obj[i] == current) {
return i;
}
}
};
/**
@param {Element} el 目标元素
**/
var siblings = function(el) {
var r = [],
n = el.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== el ) {
r.push( n );
}
}
return r;
};
/**
设置 Slide 宽高
@param {Element} el Slide 元素
@param {Number} width Slide 宽度
@param {Number} height Slide 高度
**/
var setSlideWH = function(el, width, height) {
var styleW,
styleH;
if (width == '100%') { // 自适应宽度
styleW = '100%';
} else { // 定宽
styleW = width + 'px';
}
if (height == '100%') { // 自适应高度
styleH = '100%';
} else { // 定高
styleH = height + 'px';
}
el.style.width = styleW;
el.style.height = styleH;
};
var readStyle = function(obj, name){
if(obj.style[name]){
return obj.style[name];
}else if(obj.currentStyle){
return obj.currentStyle[name]
}else if(document.defaultView && document.defaultView.getComputedStyle){
var d=document.defaultView.getComputedStyle(obj,null);
return d.getPropertyValue(name)
}else{
return null
}
};
var style = {
setOpacity : function(obj,opacity){
if(typeof(obj.style.opacity) != 'undefined'){
obj.style.opacity = opacity;
}else{
obj.style.filter = 'Alpha(Opacity=' + (opacity*100) + ')';
};
}
};
/* 动画 */
var extend = {
/**
渐显元素
@param {Element} target 目标元素
**/
fadeIn : function(obj,time){
if(readStyle(obj, 'display') == 'none'){
obj.style.display = 'block';
};
style.setOpacity(obj,0);
time = time || 200;
var opacity = 0,step = time / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(opacity >= 1) { style.setOpacity(obj,1); return; }
opacity +=1/step;
style.setOpacity(obj,opacity);
obj.showT = setTimeout(arguments.callee,20);
},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,20);
},20);
},
/**
动画元素
@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);
},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 "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*2; i++){
slideList[i].className = '';
slideList[i].getElementsByTagName("p")[0].style.display = 'none';
}
for(var i=0; i<config.imgData; i++){
dotList[i].className = '';
}
e = e < 0 "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<config.imgDataLen; i++) {
// 找到当前触发器
if (slideList[i].className == 'cur') {
// 获得当前触发器的索引
config.index = getIndex(slideList[i], slideList);
}
}
var autoFun = function() {
if (config.goSwitch) {
config.index = config.index == 5 "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 "codetitle">复制代码 代码如下:
<div class="slider-container" id="slide" style="width: 100%; height: 480px;">
<div id="_slide" class="slider-wrap">
<ul id="slide_list">
<li bosszone="Jdt">
<a href="#" class="pic"> <img src="/UploadFiles/2021-04-02/demo1.jpg">
<p class="st_ty">《北爱》陈思诚激吻佟丽娅 公主抱不慎走光</p>
</a>
<div class="slide_Bg"></div>
</li>
<li bosszone="Jdt">
<a href="#" class="pic"> <img src="/UploadFiles/2021-04-02/demo2.jpg">
<p class="st_ty">林志玲捞金鱼尾纹再现 遭男子摸背熊抱尴尬挤笑</p>
</a>
<div class="slide_Bg"></div>
</li>
<li bosszone="Jdt">
<a href="#" class="pic"> <img src="/UploadFiles/2021-04-02/demo3.jpg">
<p class="st_ty">芙蓉姐姐大摆S型秀瘦腰长腿 调戏记者：想追求我？</p>
</a>
<div class="slide_Bg"></div>
</li>
<li bosszone="Jdt">
<a href="#" title="" class="pic"> <img src="/UploadFiles/2021-04-02/demo4.jpg">
<p class="st_ty">柳岩：消费我 你们在我胸前也看不出一朵花来</p>
</a>
<div class="slide_Bg"></div>
</li>
<li>
<dl>
<dd id="ad1" bosszone="jdtAd1">
<a href="#" class="pic"> <img src="/UploadFiles/2021-04-02/89854294.jpg">
<p class="st_ty">萌妹教你白全身</p>
</a> </dd>
<dd id="ad2" bosszone="jdtAd2">
<a href="#" class="pic"> <img src="/UploadFiles/2021-04-02/90233983.jpg">
<p class="st_ty">学我按3穴位变大胸</p>
</a> </dd>
<dd id="ad3" bosszone="jdtAd3">
<a href="#" class="pic"> <img src="/UploadFiles/2021-04-02/89854500.jpg">
<p class="st_ty">男人更爱“坏”女人</p>
</a> </dd>
<dd id="ad4" bosszone="jdtAd4">
<a href="#" class="pic"> <img src="/UploadFiles/2021-04-02/89858252.jpg">
<p class="st_ty">女神自曝美胸手法</p>
</a> </dd>
</dl>
<div class="slide_Bg"></div>
</li>
</ul>
</div>
<a href="javascript:void(0);" class="slider-btn slider-btn-l" id="sliderL" bosszone="photoPre"></a>
<a href="javascript:void(0);" class="slider-btn slider-btn-r" id="sliderR" bosszone="photoNext"></a>
<ul id="focus_dot">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
var $ = function(s){
return document.getElementById(s);
}
//参数配置
slide.init({
//width: 100%, // 焦点图宽度（非必须，默认值自适应）
height: 390, // 焦点图高度（非必须，默认值自适应）
auto: true, // 是否自动切换（非必须，默认值 false）
interval: 5000, // 切换间隔时间（非必须，默认值 3000，当 auto 为 true 时有效）
targetId: 'slide', // html 对应的焦点图 ID（必须）
data: $('_slide').getElementsByTagName('li').length// 焦点图数据（必须）
});
</script>
<script>window.onerror=function(){return true;};</script>
以上就是给大家分享的jQuery仿腾讯娱乐频道焦点图特效的全部内容，希望大家能够喜欢。
jQuery,焦点图,幻灯片
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。