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 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
php之可变函数的实例详解
2017/09/13 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
python merge、concat合并数据集的实例讲解
2018/04/12 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python如何操作docker redis过程解析
2020/08/10 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
个人自我剖析材料
2014/02/07 职场文书
道路交通安全实施方案
2014/03/12 职场文书
学员自我鉴定
2014/03/19 职场文书
焦点访谈观后感
2015/06/11 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
Go语言并发编程 sync.Once
2021/10/16 Golang