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 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
Angular.JS中的this指向详解
May 17 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
Vue 中axios配置实例详解
Jul 27 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
element tree树形组件回显数据问题解决
Aug 14 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
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
python中xrange用法分析
2015/04/15 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
创伤外科专业推荐信范文
2013/11/19 职场文书
文字自荐书范文
2014/02/10 职场文书
员工工作表现评语
2014/04/26 职场文书
反邪教警示教育方案
2014/05/13 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
义卖募捐活动总结
2015/05/09 职场文书
难以忽视的真相观后感
2015/06/05 职场文书