The function annotation inside the document also writes very detailed (see Zoedylan.imgchange-1.0.1.js file), to the Netizen's study is very helpful, although the style is not very good-looking, everybody can write by oneself, make good use of oh ...
JS Code section:
Copy Code code as follows:
(function ($) {
var//DECLARE global variable
_eletemp,//Cache variables
_elethis = $ (this),//Current element
_eleimg = $ ('. Zd-imgchange-img '),//Picture Group element
_elecontroll = $ ('. Zd-imgchange-controll '),//Controller group element
_elechange = $ ('. Zd-imgchange-change '),/toggle Element
_icon = ' 0 ',//Dynamic icon
_imgtemplate = $ (document.createelement (' img ')),//Picture template '
_setting = {
height:100,//High
width:200,//width
Imgs:new Array (),//Picture address
links:null,//Click on the Address
tips:null,//Picture Description
timers:3000//Automatic Switching time
},//Configuration
_timers = null//Auto Switch save variable
$.fn.zoedylan_imagechange = function (OP) {
_elethis = $ (this);
_setting = $.extend (_setting, OP);//Set properties
Working with data (see if it is a legitimate range)
_setting.timers = _setting.timers!= null && _setting.timers!= undefined && _setting.timers > 1000? _setting.timers:1000;
_setting.height = parsefloat (_setting.height) < 100? 100:parsefloat (_setting.height);
_setting.width = parsefloat (_setting.width) < 200? 200:parsefloat (_setting.width);
Return This.each (function () {//initialization
Addtemplate ();
Addimg ();
Dissize ();
Discontroll ();
})
}
Add Template
function Addtemplate () {
_elethis.removeclass ();
_elethis.addclass (' Zd-imgchange ');
_eletemp = ' <button class= ' zd-imgchange-change zd-imgchange-change-left ' ><</button> ';
_elethis.append (_eletemp);
_eletemp = ' <div class= ' zd-imgchange-img ' > </div> ';
_elethis.append (_eletemp);
_eletemp = ' <div class= ' zd-imgchange-controll ' ></div> ';
_elethis.append (_eletemp);
_eletemp = ' <button class= ' zd-imgchange-change zd-imgchange-change-right ' >></button> ';
_elethis.append (_eletemp);
Assigning values to global variables
_eleimg = $ ('. Zd-imgchange-img ');
_elecontroll = $ ('. Zd-imgchange-controll ');
_elechange = $ ('. Zd-imgchange-change ');
}
Add a picture
function addimg () {
for (var i = 0; i < _setting.imgs.length; i++) {
Image
_eletemp = $ (document.createelement (' img '));
_eletemp.addclass (' Zd-imgchange-img-item ');
_eletemp.attr (' src ', _setting.imgs[i]);
_eleimg.append (_eletemp);
Icon
_elecontroll.append (' <span> ' + _icon[1] + ' </span> ');
Tips
$ (_eleimg.children (' img ') [i]). attr ({' title ': _setting.tips[i] + ' | ' + _setting.links[i]});
$ (_elecontroll.children (' span ') [i]). attr (' title ', _setting.tips[i]);
}
Dispose (0, ' Ttob ');
}
Handling Dimensions
function Dissize () {
_elethis.css ({' Height ': _setting.height, ' width ': _setting.width, ' font-size ': _setting.height * 0.2-2});
_elethis.children (' button '). css (' font-size ', _setting.height * 0.2-2);
_elechange.css ({' line-height ': _setting.height + ' px '});
}
Handling Action Events
function Discontroll () {
_eleimg.children (' img '). bind (' click ', function () {//click picture jump
document.location = ' http://' + $ (this). attr (' title '). Split (' | ') [$ (this). attr (' title '). Split (' | '). LENGTH-1];
});
_elechange.bind (' click ', function () {//Order toggle Picture
var nowimg = $ ('. Zd-imgchange-img-item-sel ');
_eletemp = _eleimg.children (' img ');
if ($ (this). Hasclass (' Zd-imgchange-change-left ')) {//left toggle
for (var i = 0; i < _eletemp.length; i++) {
if (nowimg.attr (' title ') = = $ (_eletemp[i]). attr (' title ') {
if ((I-1) < 0) {
Dispose (_eletemp.length-1, ' rtol ');
} else {
Dispose (i-1, ' rtol ');
}
Break
}
}
else if ($ (this). Hasclass (' zd-imgchange-change-right ')) {//Right Toggle
for (var i = 0; i < _eletemp.length; i++) {
if (nowimg.attr (' title ') = = $ (_eletemp[i]). attr (' title ') {
if ((i + 1) > _eletemp.length-1) {
Dispose (0, ' ltor ');
} else {
Dispose (i + 1, ' ltor ');
}
Break
}
}
} else {
return false;
}
});
_elecontroll.children (' span '). bind (' click ', function () {
for (var i = 0; i < _elecontroll.children (' span '). Length; i++) {
if ($ (_elecontroll.children (' span ') [i]). attr (' title ') = = $ (this). attr (' title ')) {
if ($ (_eleimg.children (' img ') [i]). attr (' src ')!= $ ('. Zd-imgchange-img-item-sel '). attr (' src ')) {//Determine whether to click on the same label
Dispose (i, ' Ttob ');
}
Break
}
}
});
}
Switching device
function Dispose (ENum, dir) {//Toggle Picture
Cleartimeout (_timers);
Disposeanm ();
$ (_elecontroll.children (' span ')). html (_icon[1]);
$ (_elecontroll.children (' span ') [ENum]). HTML (_icon[0]);
$ ('. Zd-imgchange-change-left '). attr (' title ', eNum-1 >= 0? $ (_elecontroll.children (' span ') [eNum-1]). attr (' title ') ): $ (_elecontroll.children (' span ') [_elecontroll.children (' span '). Length-1]). attr (' title '));
$ ('. Zd-imgchange-change-right '). attr (' title ', ENum + 1 <= _elecontroll.children (' span '). Length-1? $ (_ Elecontroll.children (' span ') [ENum + 1]). attr (' title '): $ (_elecontroll.children (' span ') [0]). attr (' title '));
_timers = settimeout (timers, _setting.timers);
Toggle Animation--Achieve visual effects based on Z-index
function Disposeanm () {
$ ('. Zd-imgchange-img-item '). Removeclass (' zd-imgchange-img-item-temp ');
$ ('. Zd-imgchange-img-item-sel '). Removeclass (' Zd-imgchange-img-item-sel '). addclass (' zd-imgchange-img-item-temp ') );
_eletemp = $ (_eleimg.children (' img ') [ENum]). addclass (' Zd-imgchange-img-item-sel ');
if (dir = = ' Ttob ') {
_eletemp.css (' top ',-_setting.height);
_eletemp.animate ({top:0}, 300);
else if (dir = = ' Rtol ') {
_eletemp.css (' left ', _setting.width);
_eletemp.animate ({left:0}, 300);
else if (dir = = ' Ltor ') {
_eletemp.css (' left ',-_setting.width);
_eletemp.animate ({left:0}, 300);
}
}
}
Auto Switch clock
function Timers () {
_timers = settimeout (timers, _setting.timers);
var nowimg = $ ('. Zd-imgchange-img-item-sel ');
_eletemp = _eleimg.children (' img ');
for (var i = 0; i < _eletemp.length; i++) {
if (nowimg.attr (' title ') = = $ (_eletemp[i]). attr (' title ') {
if ((I-1) < 0) {
Dispose (_eletemp.length-1, ' Ttob ');
} else {
Dispose (i-1, ' Ttob ');
}
Break
}
}
}
})($)
CSS Code section:
Copy Code code as follows:
. zd-imgchange {
position:relative;
Margin:auto;
padding:0px;
min-width:200px;
min-height:100px;
Background:rgba (0,0,0,0.5);
Color: #fff;
Cursor:pointer;
Overflow:hidden;
}
. zd-imgchange-change {
Cursor:pointer;
Color: #fff;
margin:0px;
padding:0px;
position:relative;
Background:rgba (0,0,0,0.5);
width:10%;
height:100%;
Text-align:center;
opacity:0.1;
Z-index:1;
-moz-transition:opacity 0.4s;
-o-transition:opacity 0.4s;
-webkit-transition:opacity 0.4s;
Transition:opacity 0.4s;
Border:none;
}
. zd-imgchange-change:hover {
Opacity:1;
}
. zd-imgchange-change-left {
Float:left;
}
. zd-imgchange-change-right {
Float:right;
}
. zd-imgchange-img {
z-index:0;
padding:0px;
Position:absolute;
top:0px;
left:0px;
Background:rgba (100,0,0,0.1);
width:100%;
height:100%;
}
. zd-imgchange-img-item {
Position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
Border:none;
-moz-background-size:cover;
-o-background-size:cover;
Background-size:cover;
-moz-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
-webkit-transition:opacity 0.5s;
Transition:opacity 0.5s;
Opacity:1;
Z-index:-1;
}
. zd-imgchange-img-item-temp{
z-index:0;
}
. Zd-imgchange-img-item-sel {
Z-index:1;
}
. zd-imgchange-controll {
Z-index:2;
padding:0px;
Position:absolute;
bottom:0px;
width:100%;
height:20%;
Background:rgba (0,0,0,0);
Text-align:center;
-moz-transition:background 0.4s;
-o-transition:background 0.4s;
-webkit-transition:background 0.4s;
Transition:background 0.4s;
text-shadow:0px 0px 5px #000;
opacity:0.7;
}
. zd-imgchange-controll:hover {
Background:rgba (0,0,0,0.5);
Opacity:1;
}
. zd-imgchange-controll span {
-moz-transition:color 0.4s;
-o-transition:color 0.4s;
-webkit-transition:color 0.4s;
Transition:color 0.4s;
}
. zd-imgchange-controll Span:hover {
Color:rgba (0,0,0,0.6);
}
HTML code section:
Copy Code code as follows:
<! DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta name= "viewport" content= "Width=device-width" >
<title> Picture Switching </title>
<script src= "Jquery-1.10.2.min.js" ></script>
<link href= "ZoeDylan.ImgChange.css" rel= "stylesheet"/>
<script src= "ZoeDylan.ImgChange.js" ></script>
<script>
var A_imgs = new Array (//Insert Picture address)
'./1 (1). jpg ',
'./1 (2). jpg ',
'./1 (3). jpg ',
'./1 (4). jpg '
),
A_links = new Array (//Click image to jump URL
' Www.baidu.com ',
' Www.qq.com ',
' Www.google.com ',
' Www.zol.com '
),
A_tips = new Array (//mouse docking prompt
' Baidu ',
' Tencent ',
' Google ',
Zhongguancun
);
$ (function () {
$ (' #imgc '). Zoedylan_imagechange ({//Set
WIDTH:500,
HEIGHT:300,
Imgs:a_imgs,
Links:a_links,
Tips:a_tips,
timers:2000
});
});
</script>
</head>
<body>
<div id= "IMGC" >
<!--<span class= "Zd-imgchange-change zd-imgchange-change-left" ><</span>
<div class= "Zd-imgchange-img" >
<img class= "Zd-imgchange-img-item" src= http://subject.9ria.com/html5game/images/t1f.jpg "alt=" Picture loading Error! "title=" Hint "/>
</div>
<div class= "Zd-imgchange-controll" ><span>d</></div>
<span class= "Zd-imgchange-change zd-imgchange-change-right" >></span>-->
</div>
</body>
</html>
PS: Try to use a high version of the browser, Visual Test browser: IE11 IE10 IE6 Google Cheetah Oupeng can run perfectly, IE6 transparent effect has lost
Code Download: Http://xiazai.jb51.net/201412/yuanma/zeodylanimgchange (jb51.net). rar
