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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
浅析JS异步加载进度条
May 05 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
JS快速实现简单计算器
Apr 08 Javascript
JS实现公告上线滚动效果
Jan 10 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue实现通讯录功能
2018/07/14 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Python写的英文字符大小写转换代码示例
2015/03/06 Python
python选择排序算法实例总结
2015/07/01 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
学习python分支结构
2019/05/17 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
自动化专业本科毕业生求职信
2013/10/20 职场文书
司机辞职报告范文
2014/01/20 职场文书
调研座谈会发言材料
2014/08/23 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书