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

更新时间：2015年09月07日 17:13:04 投稿：lijiao

这篇文章主要为大家详细介绍了js带点自动图片轮播幻灯片特效，图片轮播效果特别适合做产品展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例讲述了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>

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

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

您可能感兴趣的文章:

js实现正方形颜色从下往上升的效果
大家有没有看到类似颜色从下往上升的效果，在本例将与大家介绍下此效果的具体实现
2014-08-08
js根据后缀判断文件文件类型的代码
这篇文章主要介绍了js根据后缀判断文件文件类型的代码，原来是获取文件的扩展名然后再判断属于什么类型，对于图片多个后缀的判断的实现也不是不错的思路，大家可以参考一下
2020-05-05
JavaScript 的继承
大家都知道，C#中使用的是传统的类继承是很简单，但在JS中，可就没这么简单了，因为它使用的是原型(prototype )继承，实现起来相对复杂了一点。
2011-10-10
CocosCreator如何实现划过的位置显示纹理
这篇文章主要介绍了CocosCreator纹理shader的一些知识，想了解shader的同学，一定要看下，并且亲自动手实践
2021-04-04
Bootstrap图片轮播组件Carousel使用方法详解
这篇文章主要为大家详细介绍了Bootstrap图片轮播组件Carousel使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
使用JS获取SessionStorage的值
这篇文章给大家介绍了使用js获取sessionstorage中的值，首先获取它是为了将获得的信息输出或者alert（),其次，在静态页面中，如果使用sessionStorage就相当于在动态页面里连接了数据库一样，具体内容详情大家参考下本文
2018-01-01
在element-ui的select下拉框加上滚动加载
这篇文章主要介绍了在element-ui的select下拉框加上滚动加载，本文以以element-ui中的select为例，给大家介绍的非常详细,需要的朋友可以参考下
2019-04-04
async/await让异步操作同步执行的方法详解
这篇文章主要给大家介绍了关于async/await让异步操作同步执行的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用async/await具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-11-11
JS+CSS实现Div弹出窗口同时背景变暗的方法
这篇文章主要介绍了JS+CSS实现Div弹出窗口同时背景变暗的方法,是一款比较典型的javascript操作弹出窗口的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
基于javascript实现根据身份证号码识别性别和年龄
这篇文章主要介绍了基于javascript实现根据身份证号码识别性别和年龄的相关资料,需要的朋友可以参考下
2016-01-01