Based on jquery plug in to achieve common slide effects

The use of slide effects in the site is now very common, how to achieve their own research, thought it was very complex, but surprisingly simple. There is an off-the-shelf jquery plugin jquery.kinslideshow.js.

Using jquery. Kinslideshow. js can be very easy to achieve the slideshow effect

HTM code:

 
<div id="focusNews" style="visibility:hidden;" class="ifocus" > 
<a href="test.aspx" target="_blank"><img src="images/1.jpg" alt=" A title " /></a> 
<a href="test.aspx" target="_blank"><img src="images/2.jpg" alt=" Title 2 " /></a> 
<a href="test.aspx" target="_blank"><img src="images/3.jpg" alt=" The title three " /></a> 
<a href="test.aspx" target="_blank"><img src="images/4.jpg" alt=" The title four " /></a> 
<a href="test.aspx" target="_blank"><img src="images/5.jpg" alt=" The title of five " /></a> 
<a href="test.aspx" target="_blank"><img src="images/6.jpg" alt=" The title six " /></a> 
</div> 

Js code:

 
$(function () { 
$("#focusNews").KinSlideshow({ 
// moveStyle:"down", // Set the toggle direction to down  [ Default left ] 
intervalTime:8, //Set the interval time to 8 seconds (default is 5 seconds)
mouseEvent:"mouseover", //Set the mouse event to "mouse over switch" [switch when mouse is clicked by default]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //Set the title text size to 14px and color to #FF0000
}); 

}) 

CSS for setting image size

 
.ifocus{width:400px;height:300px;visibility:hidden;} 
.ifocus img{width:700px;height:400px; } 

Final rendering
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311011655041.png? 2013101165654 ">