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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
js异或加解密效果代码
Jun 25 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
javascript简易画板开发
Apr 12 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
一起深入理解js中的事件对象
Feb 06 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
php foreach、while性能比较
2009/10/15 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
深入理解React高阶组件
2017/09/28 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
python实现360的字符显示界面
2014/02/21 Python
详解Python字符串对象的实现
2015/12/24 Python
Python下载指定页面上图片的方法
2016/05/12 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Python bytes string相互转换过程解析
2020/03/05 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
培训主管岗位职责
2014/02/01 职场文书
辩论赛主持词
2014/03/18 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
采购员岗位职责
2015/02/03 职场文书
党员违纪检讨书
2015/05/05 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Minikube搭建Kubernetes集群
2022/03/31 Servers