js图片轮播特效代码分享_javascript技巧-js教程-PHP中文网

js图片轮播特效代码分享_javascript技巧

php中文网

发布： 2016-05-16 15:40:19

原创

1542人浏览过

本文实例讲述了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">
     @@##@@
    </a>
    <p></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1994">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6cf912aa3f199.png" alt="绘蛙-多图成片">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1994">绘蛙-多图成片</a>
                            <p>绘蛙新推出的AI图生视频工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="绘蛙-多图成片">
                                <span>133</span>
                            </div>
                        </div>
                        <a href="/ai/1994" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="绘蛙-多图成片">
                        </a>
                    </div>
                
    <h2><a target="_blank" href="#">盛华厚：得天独"厚"的多面</a></h2>
   </div>
   <div class="event-item3" style="display: none;">
    <a target="_blank" href="#" class="banner">
     @@##@@
    </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">
     @@##@@
    </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">
     @@##@@
    </a>
    <p></p>
    <h2><a target="_blank" href="#">盛华厚：得天独"厚"的多面</a></h2>
   </div>
   <div class="switch-tab3">
    <a href="#" onclick="return false;" class="current3">@@##@@</a><a href="#" onclick="return false;">@@##@@</a><a href="#" onclick="return false;">@@##@@</a><a href="#" onclick="return false;">@@##@@</a>
   </div>
  </div>
  <script type="text/javascript">
  $('#inner3').nav3({ t: 4000, a: 1000 });//参数t:是间隔轮换时间，参数a:是轮换所需要时间
  </script>
 </div>
  </div>
 

</body>
</html>

登录后复制

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

立即学习“Java免费学习笔记（深入）”；