The jquery. smallslider. js plug-in can also be used to achieve the slide effect.
The htm code is as follows:
Copy codeThe Code is as follows:
<Div id = "flashbox" class = "smallslider">
<Ul style = "position: absolute; top: 0px; width: 3225px;">
<Li class = "" style = "float: left; "> <a> </a> </li>
<Li class = "" style = "float: left; "> <a> </a> </li>
<Li class = "current-li" style = "float: left; "> <a> </a> </li>
<Li class = "" style = "float: left; "> <a> </a> </li>
<Li class = "" style = "float: left; "> <a> </a>
</Li> </ul>
</Div>
Js Code:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ('# Flashbox '). smallslider ({onImageStop: true, switchEffect: 'weight', switchEase: 'easeoutsine ', switchPath: 'left', switchMode: 'hover', showText: true, textSwitch: 2 });
});
Sample: jquery-1.7.2.min.js, jquery.smallslider.js, smallslider.css