Implement common slide effects based on jquery plug-in_javascript skills

It is very common to use slideshow effects on websites. After some research on how to implement it, I thought it would be complicated, but unexpectedly it turned out to be very simple. There is a ready-made jquery plug-in jquery.KinSlideshow.js.

Using jquery.KinSlideshow.js you can easily achieve the slideshow effect

htm code:

Copy code The code is as follows:

< ;img src="images/4.jpg" alt="Title Four" />

js code:

Copy code The code is as follows:

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

})

CSS to set image size

Copy code The code is as follows:

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

Final renderings