Implementation of common slide effect _javascript techniques based on jquery plug-ins

The use of the slide in the Web site is now very common, how to achieve, oneself after a study, this thought is very complex, unexpected but very simple. There are ready-made jquery plug-ins for jquery. Kinslideshow.js.

Use jquery. Kinslideshow.js can easily achieve the slide effect

HTM code:

Copy Code code as follows:

<div id= "Focusnews" style= "Visibility:hidden" class= "Ifocus" >
<a href= "test.aspx" target= "_blank" ></a>
<a href= "test.aspx" target= "_blank" ></a>
<a href= "test.aspx" target= "_blank" ></a>
<a href= "test.aspx" target= "_blank" ></a>
<a href= "test.aspx" target= "_blank" ></a>
<a href= "test.aspx" target= "_blank" ></a>
</div>

JS Code:

Copy Code code as follows:

$ (function () {
$ ("#focusNews"). Kinslideshow ({
Movestyle: "Down",//Set switch direction to down [default left toggle]
Intervaltime:8,//Set interval time is 8 seconds [default is 5 seconds]
MouseEvent: "MouseOver",//Set mouse event to "mouse over switch" [default mouse click Toggle]
Titlefont:{titlefont_size:14,titlefont_color: "#FF0000"}//Set caption text size to 14px, color: #FF0000
});

})

Set CSS for picture size

Copy Code code as follows:

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

Final effect Diagram