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="http://www.jb51.net/" target="_blank">
 <img src="images/1.png" width="470" height="315" />
 </a></li>
 <li><a href="http://www.jb51.net/" target="_blank">
 <img src="images/2.png" width="470" height="315" />
 </a></li>
 <li><a href="http://www.jb51.net/" target="_blank">
 <img src="images/3.png" width="470" height="315" />
 </a></li>
      <li><a href="http://www.jb51.net/" target="_blank">
 <img src="images/1.png" width="470" height="315" />
 </a></li>
      <li><a href="http://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)

相关推荐

  • JS实现FLASH幻灯片图片切换效果的方法

    本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • js实现3D图片逐张轮播幻灯片特效代码分享

    js实现3D图片逐张轮播幻灯片特效代码分享

    本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现3D图片逐张轮播幻灯片特效代码如下 <head> <meta http-equiv="Content-Type

  • 原生JS实现幻灯片

    原生JS实现幻灯片

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type = "text/css"> *{ padding: 0; margin: 0; } li { list-style: none; } .box { width: 800px; height: 450px; margi

  • js 幻灯片的实现

    js 幻灯片的实现

    摒弃其他的效果,最简单的轮播也就只有一条语句: parent.appendChild(parent.firstChild),不断的把列表的一个元素添加到最后一个,appendChild会将节点从原来的位置移除,所以借此可以产生切换效果. 一点,IE对文本的文本节点与其他的浏览器不同,在获取子节点的时候需要注意,另外在不同版本的FF中,children这个属性也需要注意. 下面的demo没有设置#view的overflow:hidden. demo_1: 复制代码 代码如下: <!DOCTYPE

  • JS实现的多张图片轮流播放幻灯片效果

    本文实例讲述了JS实现的多张图片轮流播放幻灯片效果.分享给大家供大家参考,具体如下: <body style="width: 715px; height: 95px;"> <script language="javascript" type="text/javascript"> <!-- /************************************************** 名称: 图片轮播类 创建时

  • js实现幻灯片效果(基于jquery插件)

    使用jquery插件jquery.smallslider.js也能实现幻灯片效果. htm代码如下: 复制代码 代码如下: <div id="flashbox" class="smallslider"> <ul style="position: absolute; top: 0px; width: 3225px;"> <li class="" style="float: left;&qu

  • JS实现的幻灯片切换显示效果

    JS实现的幻灯片切换显示效果

    本文实例讲述了JS实现的幻灯片切换显示效果.分享给大家供大家参考,具体如下: html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • javascript实现图片切换的幻灯片效果源代码

    网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享 废话少说,看代码 复制代码 代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div

  • 原生Js实现按的数据源均分时间点幻灯片效果(已封装)

    原生Js实现按的数据源均分时间点幻灯片效果(已封装)

    建议在Chrom,Firefox,Opera,Safari等标准浏览器中查看. Ie下没有阴影及圆角. 实现了根据源数据(样例中是一个JSON数据组)总条数, 均分出时间点以平滑向右动画方式显示在时间线上, 当鼠标划过时间点时, 显示对应的日期及标题. 鼠标划过事件, 充分考虑了用户体验, 当用户快速(无意识移动)从时间点上划过时, 并不触发相应事件. 相关的方法说明及使用, 请参见下面的注释或发评论, 同时也欢迎大家找bug并提交. Js核心代码点此查看样例 复制代码 代码如下: var JS

  • js实现幻灯片播放图片示例代码

    1,在页面添加下面的元素.展示出置出图片文件列表文件. 复制代码 代码如下: <select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20"> <option value="图片的url">图片名字</option> </select> 2,播放文件列表的方法.主要是遍历文件列

随机推荐