本文实例讲述了js图片轮播特效，分享给大家供大家参考。具体如下：
这是一款基于javascript实现的图片轮播特效代码，有缩略图和标题，可以自定义标题。
运行效果图： --------------------------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的js图片轮播特效代码如下
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js图片轮播特效</title> <link type="text/css" href="https://www.jb51.net/common.css" /> <link href="https://www.jb51.net/zixun.css" type="text/css" /> <script type="text/javascript" src="https://www.jb51.net/jquery-1.5.min.js"></script> <!--焦点图 js--> <script src="https://www.jb51.net/zhanlan_qh.js" type="text/javascript"></script> </head> <body> <style> ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;} ul#bcty365_nav li{float:left; display:inline; margin:10px;} ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;} ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微软雅黑";} ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;} </style> <!--焦点图--> <div> <div> <div> <div> <a href="#"> <i></i> </a> <a href="#"> <i></i> </a> </div> <div> <a target="_blank" href="#"> <img src="https://www.jb51.net/img_01.jpg"/> </a> <p></p> <h2><a target="_blank" href="#">盛华厚：得天独"厚"的多面</a></h2> </div> <div> <a target="_blank" href="#"> <img src="https://www.jb51.net/img_02.jpg" /> </a> <p></p> <h2><a target="_blank" href="#">2盛华厚：得天独"厚"的多面</a></h2> </div> <div> <a target="_blank" href="#"> <img src="https://www.jb51.net/img_03.jpg" /> </a> <p></p> <h2><a target="_blank" href="#">3盛华厚：得天独"厚"的多面</a></h2> </div> <div> <a target="_blank" href="#"> <img src="https://www.jb51.net/img_01.jpg"/> </a> <p></p> <h2><a target="_blank" href="#">盛华厚：得天独"厚"的多面</a></h2> </div> <div> <a href="#"><img src="https://www.jb51.net/img_01.jpg"/></a><a href="#"><img src="https://www.jb51.net/img_02.jpg"/></a><a href="#"><img src="https://www.jb51.net/img_03.jpg"/></a><a href="#"><img src="https://www.jb51.net/img_01.jpg"/></a> </div> </div> <script type="text/javascript"> $('#inner3').nav3({ t: 4000, a: 1000 });//参数t:是间隔轮换时间，参数a:是轮换所需要时间 </script> </div> </div> </body> </html>
以上就是为大家分享的javascript图片轮播特效代码，希望大家可以喜欢，并应用到实践中。
您可能感兴趣的文章: