JQuery focus chart switching special effect plug-in encapsulation instance

A website focus diagram is a form of website content display. It can be simply understood as a website focus diagram when one or more images are displayed on the webpage. 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:
Copy codeThe 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 = $ ('<div class = "tips"> </div> 'privacy .css ('opacity', 0.6). appendTo (wrapper );
Var title = $ ('<div class = "title"> </div> 'Role .html (function (){
Var active = ul. find ('Li. active'). find ('A '),
Text = active. attr ('title '),
Href = active. attr ('href ');
Return $ ('<a>'). attr ('href ', href). text (text)
}). AppendTo (tips );
Var nums = $ ('<div class = "nums"> </div>'). 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 ');
$ ('<A>'). 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;
Copy codeThe Code is as follows:
Div. slideBox {position: relative; height: 300px; overflow: hidden; margin: 0 auto ;}
Div. slideBox ul. items {position: absolute; float: left; background: none; list-style: none; padding: 0px; margin: 0px ;}
Div. slideBox ul. items li {float: left; background: none; list-style: none; padding: 0px; margin: 0px ;}
Div. slideBox ul. items li a {float: left; line-height: normal! Important; padding: 0px! Important; border: none/* For IE. ADD. JENA.201206300844 */;}
Div. slideBox ul. items li a img {margin: 0px! Important; padding: 0px! Important; display: block; border: none/* For IE. ADD. JENA.201206300844 */;}
Div. slideBox div. tips {position: absolute; bottom: 0px; width: 100%; height: 50px; background-color: #000; overflow: hidden ;}
Div. slideBox div. tips div. title {position: absolute; left: 0px; top: 0px; height: 100% ;}
Div. slideBox div. tips div. title a {color: # FFF; font-size: 18px; line-height: 50px; margin-left: 10px; text-decoration: none ;}
Div. slideBox div. tips div. title a: hover {text-decoration: underline! Important ;}
Div. slideBox div. tips div. nums {position: absolute; right: 0px; top: 0px; height: 100% ;}
Div. slideBox div. tips div. 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 ;}
Div. slideBox div. tips div. nums a. active {background-color: #093 ;}

Page Configuration:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script src = "Scripts/jquery-1.4.1.min.js" type = "text/javascript"> </script>
<Script src = "Scripts/sliderbox. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ (". SlideBox"). slideBox ();
})
</Script>
</Head>
<Body>
<Div class = "slideBox">
<Ul class = "items">
<Li> <a href = "#" title = "here is test title 1"> </a> </li>
<Li> <a href = "#" title = "here is the test title 2"> </a> </li>
<Li> <a href = "#" title = "here is the test title 3"> </a> </li>
<Li> <a href = "#" title = "here is the test title 4"> </a> </li>
<Li> <a href = "#" title = "here is the test title 5"> </a> </li>
</Ul>
</Div>
</Body>
</Html>

Just introduce js and call $ (selector) on the page ). slideBox (); to achieve the above effect, we can also specify operations in the sliebox ({}), such as the starting image and direction.

This is the image carousel plug-in used in a project some time ago. I feel that it can be used directly.