首页 > 编程 > JavaScript > 正文

js图片轮播特效代码分享

2019-11-20 11:35:46
字体:
来源:转载
供稿:网友

本文实例讲述了js图片轮播特效,分享给大家供大家参考。具体如下:
这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题。
运行效果图:                    -------------------查看效果-------------------

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js图片轮播特效代码如下

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>js图片轮播特效</title><link rel="stylesheet" type="text/css" href="common.css" /><link href="zixun.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="jquery-1.5.min.js"></script><!--焦点图 js--><script src="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 class="newtu">   <div id="inner3">  <div class="hot-event3">   <div class="switch-nav3">    <a href="#" onclick="return false;" class="prev">     <i class="ico i-prev"></i>    </a>    <a href="#" onclick="return false;" class="next">     <i class="ico i-next"></i>    </a>     </div>   <div class="event-item3" style="display: block;">    <a target="_blank" href="#" class="banner">     <img src="img_01.jpg"/>    </a>    <p></p>    <h2><a target="_blank" href="#">盛华厚:得天独"厚"的多面</a></h2>   </div>   <div class="event-item3" style="display: none;">    <a target="_blank" href="#" class="banner">     <img src="img_02.jpg" />    </a>    <p></p>    <h2><a target="_blank" href="#">2盛华厚:得天独"厚"的多面</a></h2>   </div>   <div class="event-item3" style="display: none;">    <a target="_blank" href="#" class="banner">     <img src="img_03.jpg" />    </a>    <p></p>    <h2><a target="_blank" href="#">3盛华厚:得天独"厚"的多面</a></h2>   </div>   <div class="event-item3" style="display: block;">    <a target="_blank" href="#" class="banner">     <img src="img_01.jpg"/>    </a>    <p></p>    <h2><a target="_blank" href="#">盛华厚:得天独"厚"的多面</a></h2>   </div>   <div class="switch-tab3">    <a href="#" onclick="return false;" class="current3"><img src="img_01.jpg"/></a><a href="#" onclick="return false;"><img src="img_02.jpg"/></a><a href="#" onclick="return false;"><img src="img_03.jpg"/></a><a href="#" onclick="return false;"><img src="img_01.jpg"/></a>   </div>  </div>  <script type="text/javascript">  $('#inner3').nav3({ t: 4000, a: 1000 });//参数t:是间隔轮换时间,参数a:是轮换所需要时间  </script> </div>  </div> </body></html>

以上就是为大家分享的javascript图片轮播特效代码,希望大家可以喜欢,并应用到实践中。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表