Home > Article > Web Front-end > js image carousel special effects code sharing_javascript skills
The example in this article describes the js image carousel effect, and I would like to share it with you for your reference. The details are as follows:
This is a picture carousel special effects code based on javascript. It has thumbnails and titles, and the title can be customized.
Running renderings: ----------------------------------------------------------------------------------------------------------------
Tips: If the browser does not work properly, you can try switching the browsing mode.
The js image carousel special effects code shared with you is as follows
<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>The above is the javascript image carousel special effects code shared with you. I hope you can like it and apply it in practice.