js图片轮播特效代码分享


Posted in Javascript onSeptember 07, 2015

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

js图片轮播特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的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图片轮播特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
vue设置默认首页的操作
Aug 12 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 #Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 #Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 #Javascript
JavaScript简单下拉菜单实例代码
Sep 07 #Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 #Javascript
jQuery实现简单下拉导航效果
Sep 07 #Javascript
JS实现弹性菜单效果代码
Sep 07 #Javascript
You might like
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
关于js类的定义
2011/06/28 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
社会实践评语
2014/04/28 职场文书
商务经理岗位职责
2014/07/30 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js