js带点自动图片轮播幻灯片特效代码分享
作者：lijiao 时间：2024-10-17 17:53:23
本文实例讲述了javascript带点自动图片轮播幻灯片特效。分享给大家供大家参考。具体如下：
这是一款基于javascript实现带点自动图片轮播幻灯片特效代码，实现过程很简单。
运行效果图：
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
（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="//www.jb51.net/" target="_blank">
<img src="images/1.png" width="470" height="315" />
</a></li>
<li><a href="//www.jb51.net/" target="_blank">
<img src="images/2.png" width="470" height="315" />
</a></li>
<li><a href="//www.jb51.net/" target="_blank">
<img src="images/3.png" width="470" height="315" />
</a></li>
<li><a href="//www.jb51.net/" target="_blank">
<img src="images/1.png" width="470" height="315" />
</a></li>
<li><a href="//www.jb51.net/" 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>
标签：js,图片轮播,幻灯片
0
投稿猜你喜欢
再谈Python中的字符串与字符编码（推荐）
2023-06-15 23:25:08
PyCharm+PyQt5+QtDesigner配置详解
2023-09-11 12:40:03
Mysql的列修改成行并显示数据的简单实现
2024-01-24 01:39:54
python实现忽略大小写对字符串列表排序的方法
2021-09-23 04:17:11
Python实现的Kmeans++算法实例
2023-01-05 22:28:36
使用vue与jquery实时监听用户输入状态的操作代码
2023-07-02 17:08:02
VUEJS实战之构建基础并渲染出列表（1）
2024-05-29 22:14:46
Vue+Axios实现文件上传自定义进度条
2024-05-29 22:24:57
Ajax：拥抱JSON，让XML走开
2007-10-12 20:01:00
python使用Flask操作mysql实现登录功能
2024-01-21 02:20:00
python函数运行内存时间等性能检测工具
2021-04-08 02:24:00
javascript面向对象编程（三）
2008-03-07 13:19:00
发现一个不错的11px字体：PMingLiu
2008-09-06 12:49:00
Django实现文件上传下载
2022-03-17 18:42:48
mysql 安装使用小记
2011-02-23 12:33:00
c#操作sqlserver数据库的简单示例
2024-01-28 11:25:23
javascript获取wx.config内部字段解决微信分享
2024-04-23 09:15:50
CSS制作圆角导航的另一思路
2008-11-06 11:39:00
Python 函数装饰器详解
2021-11-20 04:34:16
Laravel框架执行原生SQL语句及使用paginate分页的方法
2023-11-24 00:27:24