js圖片輪播特效程式碼分享_javascript技巧
- WBOY原創
- 2016-05-16 15:40:191403瀏覽
本文範例講述了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圖片輪播特效程式碼，希望大家可以喜歡，並應用在實作上。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn