Jquery best practices-imgslide plugin V1.0

In May last June, when the company's website was revised, considering Seo and page performance, a flash image carousel on the home page needs to be replaced by JS image carousel, so I wrote this plug-in called imgslide in cooperation with a Web Dev buddy. Currently, image carousel plug-ins may be a lot more versatile. Why don't they just take it? The main reason is that we want the imgslide plug-in to achieve a special effect: the image title background is translucent, but the title text itself cannot be translucent! Each jquery plug-in has a certain limitation on the DOM structure. The Dom structure of other image carousel plug-ins cannot meet our pursuit ~

Let's take a look at jquery. imgslide's:

For practical application, visit our website m18.com.

The following describes the APIs of jquery. imgslide,

1. simple HTML Dom conventions

 <! -- Imgslider --> 
 <  Div   ID  = "Home_slide"   Class  = "Slides"  > 
 <  Ul   Class = "Slide-pic"  > 
 <  Li   Class  = "Cur"  > <  A   Href  = "Http://vivasky.com"   Target  = "_ Blank"  > 
 <  IMG   ALT  = "Http://vivasky.com"   SRC  = "App_themes/white/img/imgslide1.jpg" /> </  A  > </  Li  > 
 <  Li  > <  A   Href  = "Http://vivasky.com"   Target  = "_ Blank"  > 
 <  IMG   ALT  = "Http://vivasky.com"   SRC  = "App_themes/white/img/imgslide2.jpg" /> </  A  > </  Li  > 
 <  Li  > <  A   Href  = "Http://vivasky.com"   Target  = "_ Blank"  > 
 <  IMG   ALT  = "Http://vivasky.com"   SRC  = "App_themes/white/img/imgslide3.jpg" /> </  A  > </  Li  > 
 <  Li  > <  A   Href  = "Http://vivasky.com"   Target  = "_ Blank"  > 
 <  IMG   ALT  = "Http://vivasky.com"   SRC  = "App_themes/white/img/imgslide4.jpg" /> </  A  > </  Li  > 
 </  Ul  > 
 <  Ul   Class  = "Slide-Li op"  > 
 <  Li   Class  = "Cur"  > </  Li  > 
<  Li  > </  Li  > 
 <  Li  > </  Li  > 
 <  Li  > </  Li  > 
 </  Ul  > 
 <  Ul  Class  = "Slide-Li slide-TXT"  > 
 <  Li   Class  = "Cur"  > <  A   Href  = "Http://vivasky.com"   Target  = "_ Blank"  > I'm Chun ge. </  A  > </  Li  > 
 < Li  > <  A   Target  = "_ Blank"   Href  = "Http://vivasky.com"  > I'm Feng Jie. </  A  > </  Li  > 
 <  Li  > <  A   Href  = "Http://vivasky.com"   Target = "_ Blank"  > I am Ru Hua </  A  > </  Li  > 
 <  Li  > <  A   Href  = "Http://vivasky.com"   Target  = "_ Blank"  > I am a dream </  A  > </  Li > 
 </  Ul  > 
 </  Div  > 
 <! --/Imgslider-> 

2. CSS is also very simple ~

 /* slider */ 
. slides {overflow: hidden; position: relative; Height: 302px ;}< br>. slide_pic {width: 960px; overflow: hidden ;}< br>. slide_pic Li {display: None ;}< br>. slide-pic IMG {width: 960px; Height: 302px; Border: 1px solid # e4e4e4;} 
. slide-pic Li. cur {display: block ;}< br>. slide-Li {position: absolute; left: 0; bottom: 0 ;}< br>. slide-Li { float : Left; width: 175px; Height: 30px; line-Height: 30px; margin-right: 1px; text-align: center ;}< br>. slide-li a {display: block; width: 174px; Height: 30px; font-size: 14px; color: # FFF; text-Decoration: none;} 
. slide-li. cur ,. slide-li a: hover {color: #333; text-Decoration: None ;}< br>. OP Li {Background: #666; opacity: 0.6; filter: alpha (opacity = 60) ;}< br>. OP Li. cur {Background: # fff ;}< br>. slide-TXT span {display: None ;}

3. ExampleCode

 
To use jquey. imgslide, you only need the HTML, 2 CSS of the above 1, jquery. js (tested in Version 1.3.2 or later), and jquery. imgslide. js.
 

<SCRIPT type ='Text/JavaScript'Src ='Http: // yoursite/assets/JS/jquery. imgslide. js'> </SCRIPT>
<SCRIPT type ="Text/JavaScript">
// <! [CDATA [
$ ("# Home_slide"). Imgslide ({});
//]>
</SCRIPT>
 

 
As shown above, the imgslide usage is $ ("Imgslide_css_selector"). Imgslide (OPTs );
 

 
Opts is the configuration parameter. The main configuration items are:
 

  // public defaults.  
 $. FN. imgslide. defaults = {
 On:  'cur' ,  // activate the CSS class of the image  
 T:  'ul. slide-TXT> li ',  // Title selector-title CSS selector  
 TBG:  'ul. OP> li ',  // Title background selector-title backgrounds CSS selector  
 I:  'ul. slide-pic li' ,  // slideshow Dom element-slide items CSS selector  
 interval: 5000,  // carousel interval (MS)  
 fadein: 300,  // fade-in time ms (displayed)  
 fadeout: 200  // fade-out time ms (disappear)  
}; 

4. Download source code

Download the source code:

Http://www.vivasky.com/tools.aspx

The source code contains the parameter demo. then, we will describe the parameter. The parameters of jquery.imgslide.css and jquery. imgslide. js are described. Other CSS and JS are examples!

In addition, I would like to thank the buddy of Web Dev for providing imgslide HTML and CSS. Welcome to Levin's personal website