This article introduces the jQuery focus chart switching special effect plug-in encapsulation instance. If you need it, you can refer to the website focus chart as a form of website content display, it can be simply understood that one or more images are displayed on the webpage as the focus of the website. At a very obvious position on the website, the video is played in combination with images. Similar to the Focus News, only images are added. It is usually used on the homepage of a website or on the homepage of a channel. Because it is in the form of images, it has a certain degree of attraction and visual attraction. Visitors are easy to click. According to the survey of foreign design institutions, the click rate of the website focus chart is significantly higher than that of pure text, and the conversion rate is 5 times higher than that of the text title. From this point of view, the focus chart can greatly improve tourists' first impression on the company. Next we will introduce a full screen focus chart encapsulated in our project. As shown in:
You can add multiple images, set the image link, move the navigation with the mouse to switch the image, and compress the image a little distorted when publishing the article.
To use this special effect, you must first introduce jquery. The plug-in has been encapsulated into a jquery function. The Code is as follows:
The Code is as follows:
/*
* JQuery image carousel (focus chart) plugin
*/
(Function ($ ){
$. Fn. slideBox = function (options ){
Var defaults = {
Direction: 'left ',
Duration: 0.6,
Easing: 'swing ',
Delay: 3,
StartIndex: 0,
HideClickBar: true,
ClickBarRadius: 5,
HideBottomBar: false
};
Var settings = $. extend (defaults, options || {});
Var wrapper = $ (this ),
Ul = wrapper. children ('ul. items '),
Lis = ul. find ('lil '),
FirstPic = lis. first (). find ('img ');
Var li_num = lis. size (),
Li_height = 0,
Li_width = 0;
Var order_by = 'asc ';
Var init = function (){
If (! Wrapper. size () return false;
Li_height = lis. first (). height ();
Li_width = lis. first (). width ();
Wrapper.css ({
Width: li_width + 'px ',
Height: li_height + 'px'
});
Lis.css ({
Width: li_width + 'px ',
Height: li_height + 'px'
});
If (settings. direction = 'left '){
Ul.css ('width', li_num * li_width + 'px ')
} Else {
Ul.css ('height', li_num * li_height + 'px ')
};
Ul. find ('li: eq ('+ settings. startIndex +'). addClass ('active ');
If (! Settings. hideBottomBar ){
Var tips = $ ('
'Privacy .css ('opacity ', 0.6). appendTo (wrapper );
Var title = $ ('
'0000.html (function (){
Var active = ul. find ('Li. active'). find ('A '),
Text = active. attr ('title '),
Href = active. attr ('href ');
Return $ (''). attr ('href ', href). text (text)
}). AppendTo (tips );
Var nums = $ ('
'). Hide (). appendTo (tips );
Lis. each (function (I, n ){
Var a = $ (n). find ('A '),
Text = a. attr ('title '),
Href = a. attr ('href '),
Css = '';
I = settings. startIndex & (css = 'active ');
$ (''). Attr ('href ', href0000.text(text).addclass(css).css ('borderradius ',
Settings. clickBarRadius + 'px '). mouseover (function (){
$ (This). addClass ('active'). siblings (). removeClass ('active ');
Ul. find ('li: eq ('+ $ (this). index () +'). addClass ('active'). siblings
(). RemoveClass ('active ');
Start ();
Stop ()
}). AppendTo (nums)
});
If (settings. hideClickBar ){
Tips. hover (function (){
Nums. animate ({
Top: '0px'
},
'Fast ')
},
Function (){
Nums. animate ({
Top: tips. height () + 'px'
},
'Fast ')
});
Nums. show (). delay (2000). animate ({
Top: tips. height () + 'px'
},
'Fast ')
} Else {
Nums. show ()
}
};
Lis. size ()> 1 & start ()
};
Var start = function (){
Var active = ul. find ('Li. active '),
Active_a = active. find ('A ');
Var index = active. index ();
If (settings. direction = 'left '){
Offset = index * li_width *-1;
Param = {
'Left': offset + 'px'
}
} Else {
Offset = index * li_height *-1;
Param = {
'Top': offset + 'px'
}
};
Wrapper. find ('. nums'). find ('a: eq (' + index + '). addClass ('active'). siblings (). removeClass
('Active ');
Wrapper. find ('. title'). find ('A'). attr ('href', active_a.attr ('href '). text (active_a.attr
('Title '));
Ul. stop (). animate (param, settings. duration * 1000, settings. easing,
Function (){
Active. removeClass ('active ');
If (order_by = 'asc '){
If (active. next (). size ()){
Active. next (). addClass ('active ')
} Else {
Order_by = 'desc ';
Active. prev (). addClass ('active ')
}
} Else if (order_by = 'desc '){
If (active. prev (). size ()){
Active. prev (). addClass ('active ')
} Else {
Order_by = 'asc ';
Active. next (). addClass ('active ')
}
}
});
Wrapper. data ('timeid', window. setTimeout (start, settings. delay * 1000 ))
};
Var stop = function (){
Window. clearTimeout (wrapper. data ('timeid '))
};
Wrapper. hover (function (){
Stop ()
},
Function (){
Start ()
});
Var imgLoader = new Image ();
ImgLoader. onload = function (){
ImgLoader. onload = null;
Init ()
};
ImgLoader. src = firstPic. attr ('src ')
}
}) (JQuery );
The following is the css style of the image focus chart;
The Code is as follows:
P. slideBox {position: relative; height: 300px; overflow: hidden; margin: 0 auto ;}
P. slideBox ul. items {position: absolute; float: left; background: none; list-style: none; padding: 0px; margin: 0px ;}
P. slideBox ul. items li {float: left; background: none; list-style: none; padding: 0px; margin: 0px ;}
P. slideBox ul. items li a {float: left; line-height: normal! Important; padding: 0px! Important; border: none/* For IE. ADD. JENA.201206300844 */;}
P. slideBox ul. items li a img {margin: 0px! Important; padding: 0px! Important; display: block; border: none/* For IE. ADD. JENA.201206300844 */;}
P. slideBox p. tips {position: absolute; bottom: 0px; width: 100%; height: 50px; background-color: #000; overflow: hidden ;}
P. slideBox p. tips p. title {position: absolute; left: 0px; top: 0px; height: 100% ;}
P. slideBox p. tips p. title a {color: # FFF; font-size: 18px; line-height: 50px; margin-left: 10px; text-decoration: none ;}
P. slideBox p. tips p. title a: hover {text-decoration: underline! Important ;}
P. slideBox p. tips p. nums {position: absolute; right: 0px; top: 0px; height: 100% ;}
P. slideBox p. tips p. nums a {display: inline-block;> float: left/* For IE. ADD. JENA.201206300844 */; width: 20px; height: 20px; background-color: # FFF; text-indent:-99999px; margin: 15px 10px 0px 0px ;}
P. slideBox p. tips p. nums a. active {background-color: #093 ;}
Page Configuration:
The Code is as follows:
