js带点自动图片轮播幻灯片特效代码分享


Posted in Javascript onSeptember 07, 2015

本文实例讲述了javascript带点自动图片轮播幻灯片特效。分享给大家供大家参考。具体如下:

这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单。

运行效果图:-------------------查看效果下载源码-------------------

js带点自动图片轮播幻灯片特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
(1)在head区域引入CSS样式:

<link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen" />

(2)js代码:

<script type="text/javascript" src="js/jquery-min-1.7.js" charset="utf-8"></script>
<script src="js/all_dfd5691e.js"></script>
<script>
$(function () {
new SlideShow({
nav: "#controller",
effect : "fade",
target: "#target",
activeClass: "active",
next: "#next",
prev: "#prev",
auto: true
})
})
</script>

为大家分享的js带点自动图片轮播幻灯片特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen" />
<title>js带点自动图片轮播幻灯片特效</title>
</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> 
<br>
<div id="main">
 <div class="content">
 <!--图片轮播-->
 <div class="hot_wrap">
 <div id="target" class="tbui_slideshow_container">
 <ul class="tbui_slideshow_list">
 <li><a href="//3water.com/" target="_blank">
 <img src="images/1.png" width="470" height="315" />
 </a></li>
 <li><a href="//3water.com/" target="_blank">
 <img src="images/2.png" width="470" height="315" />
 </a></li>
 <li><a href="//3water.com/" target="_blank">
 <img src="images/3.png" width="470" height="315" />
 </a></li>
   <li><a href="//3water.com/" target="_blank">
 <img src="images/1.png" width="470" height="315" />
 </a></li>
   <li><a href="//3water.com/" target="_blank">
 <img src="images/3.png" width="470" height="315" />
 </a></li>
 </ul>
 </div>
 <!--导航条的结构-->
 <ul id="controller">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul>
 
 </div>
 <div class="left-wrap">
 </div>
 </div>
<div class="clear">
</div>
</div>

<!-- end of #main-wrap -->
<script type="text/javascript" src="js/jquery-min-1.7.js" charset="utf-8"></script>
<script src="js/all_dfd5691e.js"></script>
<script>
$(function () {
new SlideShow({
nav: "#controller",
effect : "fade",
target: "#target",
activeClass: "active",
next: "#next",
prev: "#prev",
auto: true
})
})
</script>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是为大家分享的js带点自动图片轮播幻灯片特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 #Javascript
js图片轮播特效代码分享
Sep 07 #Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 #Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 #Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 #Javascript
JavaScript简单下拉菜单实例代码
Sep 07 #Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 #Javascript
You might like
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
python字典操作实例详解
2017/11/16 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
大学生自我鉴定范文
2013/12/28 职场文书
中学教师自我鉴定
2014/02/07 职场文书
超市活动计划书
2014/04/24 职场文书
安全月宣传标语
2014/10/07 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
oracle重置序列从0开始递增1
2022/02/28 Oracle
Java Spring Lifecycle的使用
2022/05/06 Java/Android