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