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判断chrome浏览器的方法
Mar 26 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
JavaScript实现打字游戏
Feb 19 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 foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP的基本常识小结
2013/07/05 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php数组编码转换示例详解
2014/03/11 PHP
curl和libcurl的区别简介
2015/07/01 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
建筑施工实习自我鉴定
2013/09/19 职场文书
青年文明号复核材料
2014/02/11 职场文书
个人租房协议书
2014/04/09 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
学习十八大宣传标语
2014/10/09 职场文书
文明倡议书
2015/01/19 职场文书
工作简历自我评价
2015/03/11 职场文书
西安事变观后感
2015/06/12 职场文书
搞笑婚庆主持词
2015/06/29 职场文书