Das Beispiel in diesem Artikel beschreibt den js-Bildkarusselleffekt und ich möchte ihn als Referenz mit Ihnen teilen. Die Details lauten wie folgt:
Dies ist ein Bildkarussell-Spezialeffektcode, der auf Javascript basiert. Er verfügt über Miniaturansichten und Titel, und der Titel kann angepasst werden.
Laufende Renderings: ------------------ -------------------------------------------------- ---------------
Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
<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>
