脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-js实现幻灯片效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 在网站中使用幻灯片效果的目前很普遍，如何实现，自己经过一番研究，本以为很复杂，想不到却很简单。有现成的jquery插件jquery.KinSlideshow.js。

  使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果

  htm代码：

[htML]  

<p id="focusNews" style="visibilITy:hidden;" class="ifocus" >  

    <a href="test.aspx" target="_blank"><img src="images/1.jpg" alt="标题一" /></a>  

    <a href="test.aspx" target="_blank"><img src="images/2.jpg" alt="标题二" /></a>  

    <a href="test.aspx" target="_blank"><img src="images/3.jpg" alt="标题三" /></a>  

    <a href="test.aspx" target="_blank"><img src="images/4.jpg" alt="标题四" /></a>  

    <a href="test.aspx" target="_blank"><img src="images/5.jpg" alt="标题五" /></a>  

    <a href="test.aspx" target="_blank"><img src="images/6.jpg" alt="标题六" /></a>  

</p>  

 

js代码：

[javascript]  

$(function () {         

              $("#focusNews").KinSlideshow({  

             //   moveStyle:"down",         //设置切换方向为向下 [默认向左切换]  

                intervalTime:8,         //设置间隔时间为8秒  [默认为5秒]  

                mouseEvent:";mouseover",     //设置鼠标事件为“鼠标滑过切换”  [默认鼠标点击时切换]  

                titleFont:{TitleFont_Size:14,TitleFont_color:"#FF0000"} //设置标题文字大小为14px，颜色：#FF0000  

            });  

             

        })  

 

设置图片大小的CSS

[css]  

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

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

 

最终效果图

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-js实现幻灯片效果全部内容，希望文章能够帮你解决javascript代码实例教程-js实现幻灯片效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。