A copy of Tencent Entertainment channel focus Map Carousel Plug-in
Ui3g.js
Copy Code code as follows:
/*
Top Big picture scrolling
*/
var slide = (function () {
var quadeaseout;
var doc = document;
var $ = function (s) {
return document.getElementById (s);
}
/**
Get index value, tool class
@param {element} current element
@param {Object} obj element collection
**/
var getindex = function (current, obj) {
for (var i=0; i<obj.length; i++) {
if (obj[i] = = current) {
return i;
}
}
};
/**
@param {element} el Target Element
**/
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;
};
/**
Set Slide width and height
@param {element} el Slide element
@param {Number} width Slide width
@param {Number} height Slide
**/
var setslidewh = function (el, width, height) {
var Stylew,
Styleh;
if (width = = ' 100% ') {//Adaptive width
Stylew = ' 100% ';
} else {//fixed width
Stylew = width + ' px ';
}
if (height = = ' 100% ') {//Adaptive height
Styleh = ' 100% ';
} else {//fixed high
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) + ') ';
};
}
};
/* Animation * *
var extend = {
/**
Fade element
@param {element} target destination Element
**/
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);
Opacity +=1/step;
Style.setopacity (obj,opacity);
Obj.showt = settimeout (arguments.callee,20);
},20);
},
/**
Fade element
@param {element} target destination Element
**/
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);
},
/**
Animation elements
@param {element} target destination Element
@param {String} key target style
@param {Number} start key initial value
@param {Number} End key ending value
@param {number} speed speed
@param {Function} ENDFN at end of callback
@param {String} u style Unit
**/
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);
}
}
/**
Configuration
**/
var config = {
Imgdata: [],///first-order picture information
Imgtargetid: ',//first Slide target ID
ImgWidth: ' 100% ',///first-made picture width
ImgHeight: ' 100% ',//initial height of the image
Imgauto:false,//initial automatic playback
imginterval:3000,//Initial time interval
imgdatalen:0,///initial number of images made
Goswitch:true,//toggle state during mouse hover
Index:4,//Focus index value
_index:0,
Curimg:5,
Indexshow:5
};
/**
Build and insert the SLIDE structure
**/
var buildslide = function () {
Injection of Slide structure
var panelhtml = $ (' _slide '). getElementsByTagName (' ul ') [0].innerhtml;
var aLi = $ (' _slide '). getElementsByTagName (' ul ') [0].getelementsbytagname (' Li ');
$ (' _slide '). getElementsByTagName (' ul ') [0].innerhtml = panelhtml + panelhtml;
Set width height
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? (Math.Round (quadeaseout (config.t = 3, config.b, CONFIG.C, Boxmoveto)), Config.timer=settimeout (function () {Move ( )): 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*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? Config.imgdata-1: 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;
}
/**
Automatic switching
**/
var B = False, c = false, Timera = null;
var autoswitch = function () {
var slidelist = $ (' slide_list '). getElementsByTagName (' Li ');
Traversal triggers
for (var i=0; i<config.imgdatalen; i++) {
Find the current Trigger
if (slidelist[i].classname = = ' cur ') {
Get the index of the current trigger
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);
};
/**
Finger Events
**/
var touchfun = function (evt) {
var $ = function (o) {return document.queryselector (o)}, $$ = function (o) {return Document.queryselectorall (o)}, Touchinfo = {startx:0, endx:0}, Slide = $ (' #slide '), BTNL = $ (' #sliderL '), Btnr = $ (' #sliderR ');
Slide.addeventlistener (' Touchstart ', function (evt) {
Evt.preventdefault ();
if (Evt.changedTouches.length = = 0) return;
Touchinfo.startx = Evt.changedtouches[0].pagex;
}, False);
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 (Offset < 0) {
Run (++config.index,! 1)
else if (Offset > 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) {
Get configuration information
Config.imgdata = Obj.data; Set Picture information
Config.imgtargetid = Obj.targetid; Set Slide target ID
Config.imgwidth = Obj.width | | Config.imgwidth; Set Picture width
Config.imgheight = Obj.height | | Config.imgheight; Set Picture height
Config.imgauto = Obj.auto | | Config.imgauto; Set auto Play
Config.imginterval = Obj.interval | | config.imginterval;//Set time interval
Config.imgdatalen = Config.imgData.length; Set the number of pictures
Generate Slide structure
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);
}
Automatic switching
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
Copy Code code as follows:
<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= "images/demo1.jpg" width= "830" height= "" border= "0" >
<p class= "St_ty" > "Northern Ireland" Chen Sixing kiss Ceria Princess accidentally emptied </p>
</a>
<div class= "SLIDE_BG" ></div>
</li>
<li bosszone= "Jdt" >
<a href= "#" class= "pic" > <img src= "images/demo2.jpg" width= "830" height= "" border= "0" >
<p class= "St_ty" > Lin Chi-ling fished gold crow's feet to reproduce the man touching back bear embarrassed squeeze smile </p>
</a>
<div class= "SLIDE_BG" ></div>
</li>
<li bosszone= "Jdt" >
<a href= "#" class= "pic" > <img src= "images/demo3.jpg" width= "830" height= "" border= "0" >
<p class= "St_ty" > Furong sister big Pendulum S-style show thin waist long legs molested reporters: Want to pursue me? </p>
</a>
<div class= "SLIDE_BG" ></div>
</li>
<li bosszone= "Jdt" >
<a href= "#" title= "" class= "pic" > <img src= "images/demo4.jpg" width= "830" height= "" border= "0" >
<p class= "St_ty" > Liu Yan: Consume me you can't see a flower in front of my chest </p>
</a>
<div class= "SLIDE_BG" ></div>
</li>
<li>
<dl>
<dd id= "Ad1" bosszone= "JdtAd1" >
<a href= "#" class= "pic" > <img src= "images/89854294.jpg" width= "363" height= "" border= "0" >
<p class= "St_ty" > Meng sister teach you white body </p>
</a> </dd>
<dd id= "ad2" bosszone= "JdtAd2" >
<a href= "#" class= "pic" > <img src= "images/90233983.jpg" width= "156" height= "" border= "0" >
<p class= "St_ty" > I press 3 points to change big chest </p>
</a> </dd>
<dd id= "Ad3" bosszone= "JdtAd3" >
<a href= "#" class= "pic" > <img src= "images/89854500.jpg" width= "156" height= "" border= "0" >
<p class= "St_ty" > Men Love "bad" women </p>
</a> </dd>
<dd id= "Ad4" bosszone= "JdtAd4" >
<a href= "#" class= "pic" > <img src= "images/89858252.jpg" width= "156" height= "" border= "0" >
<p class= "St_ty" > Goddess Self-exposure beauty chest technique </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);
}
Parameter configuration
Slide.init ({
width:100%,//Focus chart width (not required, default value adaptive)
height:390,//Focus graph height (not required, default value adaptive)
Auto:true,//whether automatically switch (not required, default value false)
interval:5000,//Toggle time interval (not required, default value 3000, valid when Auto is true)
Targetid: ' Slide ',//html corresponding focus diagram ID (required)
Data: $ (' _slide '). getElementsByTagName (' Li '). length//Focus Graph data (required)
});
</script>
<script>window.onerror=function () {return true;}; </script>
The above is to share the jquery imitation Tencent Entertainment channel focus on the full content of special effects, I hope you can enjoy.
