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 相关文章推荐
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
paypal即时到账php实现代码
2010/11/28 PHP
探讨如何把session存入数据库
2013/06/07 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
详解JS函数stack size计算方法
2018/06/18 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
python常用知识梳理(必看篇)
2017/03/23 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
python Zmail模块简介与使用示例
2020/12/19 Python
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
大学信息公开实施方案
2014/03/09 职场文书
中药专业自荐信范文
2014/03/18 职场文书
研修心得体会
2014/09/04 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
文明倡议书
2015/01/19 职场文书
大学生入党群众意见书
2015/06/02 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
浅谈Python协程asyncio
2021/06/20 Python
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
MySQL Server 层四个日志
2022/03/31 MySQL