首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 22, 2016

本文实例讲述了JS实现的多张图片轮流播放幻灯片效果。分享给大家供大家参考，具体如下：

<body style="width: 715px; height: 95px;">
<script language="javascript" type="text/javascript">
<!--
/**************************************************
名称: 图片轮播类
创建时间: 2010-07-11  zhangty
示例:
  页面中已经存在名为imgPlayer(或者别的ID也行)的节点.
  PImgPlayer.addItem( "test", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo5.jpg");
  PImgPlayer.addItem( "test2", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo4.jpg");
  PImgPlayer.addItem( "test3", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo3.jpg");
  PImgPlayer.init( "imgPlayer", 200, 230 );
备注:
  适用于一个页面只有一个图片轮播的地方.
***************************************************/
var PImgPlayer = {
  _timer : null,
  _items : [],
  _container : null,
  _index : 0,
  _imgs : [],
  intervalTime : 5000,  //轮播间隔时间
  init : function( objID, w, h, time ){
    this.intervalTime = time || this.intervalTime;
    this._container = document.getElementById( objID );
    this._container.style.display = "block";
    this._container.style.width = w + "px";
    this._container.style.height = h + "px";
    this._container.style.position = "relative";
    this._container.style.overflow = "hidden";
    //this._container.style.border = "1px solid #fff";
    var linkStyle = "display: block; TEXT-DECORATION: none;";
    if( document.all ){
      linkStyle += "FILTER:";
      linkStyle += "progid:DXImageTransform.Microsoft.Barn(duration=0.5, motion='out', orientation='vertical') ";
      linkStyle += "progid:DXImageTransform.Microsoft.Barn ( duration=0.5,motion='out',orientation='horizontal') ";
      linkStyle += "progid:DXImageTransform.Microsoft.Blinds ( duration=0.5,bands=10,Direction='down' )";
      linkStyle += "progid:DXImageTransform.Microsoft.CheckerBoard()";
      linkStyle += "progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=0)";
      linkStyle += "progid:DXImageTransform.Microsoft.GradientWipe ( duration=1,gradientSize=1.0,motion='reverse' )";
      linkStyle += "progid:DXImageTransform.Microsoft.Inset ()";
      linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=out )";
      linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=in )";
      linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=DIAMOND,motion=in )";
      linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=SQUARE,motion=in )";
      linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=0.5,irisStyle=STAR,motion=in )";
      linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=CLOCK )";
      linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=WEDGE )";
      linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=horizontal )";
      linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=vertical )";
      linkStyle += "progid:DXImageTransform.Microsoft.RandomDissolve ()";
      linkStyle += "progid:DXImageTransform.Microsoft.Spiral ( duration=0.5,gridSizeX=16,gridSizeY=16 )";
      linkStyle += "progid:DXImageTransform.Microsoft.Stretch ( duration=0.5,stretchStyle=PUSH )";
      linkStyle += "progid:DXImageTransform.Microsoft.Strips ( duration=0.5,motion=rightdown )";
      linkStyle += "progid:DXImageTransform.Microsoft.Wheel ( duration=0.5,spokes=8 )";
      linkStyle += "progid:DXImageTransform.Microsoft.Zigzag ( duration=0.5,gridSizeX=4,gridSizeY=40 ); width: 100%; height: 100%";
    }
    //
    var ulStyle = "margin:0;width:"+w+"px;position:absolute;z-index:999;right:5px;FILTER:Alpha(Opacity=30,FinishOpacity=90, Style=1);overflow: hidden;bottom:-1px;height:16px; border-right:1px solid #fff;";
    //
    var liStyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;";
    //
    var baseSpacStyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体';opacity: 0.6;";
    baseSpacStyle += "border:1px solid #fff;border-right:0;border-bottom:0;";
    baseSpacStyle += "color:#fff;text-align:center; cursor:pointer; ";
    //
    var ulHTML = "";
    for(var i = this._items.length -1; i >= 0; i--){
      var spanStyle = "";
      if( i==this._index ){
        spanStyle = baseSpacStyle + "background:#ff0000;"; //初始化底部数字的颜色
      } else {
        spanStyle = baseSpacStyle + "background:#c0c0c0;"; //初始化底部数字的背景颜色
      }
      ulHTML += "<li style=\""+liStyle+"\">";
      ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);\" onmouseout=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>";
      ulHTML += "</li>";
    }
    //
    var html = "<a href=\""+this._items[this._index].link+"\" title=\""+this._items[this._index].title+"\" target=\"_blank\" style=\""+linkStyle+"\"></a><ul style=\""+ulStyle+"\">"+ulHTML+"</ul>";
    this._container.innerHTML = html;
    var link = this._container.getElementsByTagName("A")[0];
    link.style.width = w + "px";
    link.style.height = h + "px";
    link.style.background = 'url(' + this._items[0].img + ') no-repeat center center';
    //
    this._timer = setInterval( "PImgPlayer.play()", this.intervalTime );
  },
  addItem : function( _title, _link, _imgURL ){
    this._items.push ( {title:_title, link:_link, img:_imgURL } );
    var img = new Image();
    img.src = _imgURL;
    this._imgs.push( img );
  },
  play : function( index ){
    if( index!=null ){
      this._index = index;
      clearInterval( this._timer );
      this._timer = setInterval( "PImgPlayer.play()", this.intervalTime );
    } else {
      this._index = this._index<this._items.length-1 ? this._index+1 : 0;
    }
    var link = this._container.getElementsByTagName("A")[0];
    if(link.filters){
      var ren = Math.floor(Math.random()*(link.filters.length));
      link.filters[ren].Apply();
      link.filters[ren].play();
    }
    link.href = this._items[this._index].link;
    link.title = this._items[this._index].title;
    link.style.background = 'url(' + this._items[this._index].img + ') no-repeat center center';
    //
    var liStyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;";
    var baseSpacStyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体'; opacity: 0.6;";
    baseSpacStyle += "border:1px solid #fff;border-right:0;border-bottom:0;";
    baseSpacStyle += "color:#fff;text-align:center; cursor:pointer; ";
    var ulHTML = "";
    for(var i = this._items.length -1; i >= 0; i--){
      var spanStyle = "";
      if( i==this._index ){
        spanStyle = baseSpacStyle + "background:#ff0000;";    //数字的颜色
      } else {
        spanStyle = baseSpacStyle + "background:#c0c0c0;";    //数字的背景颜色
      }
      ulHTML += "<li style=\""+liStyle+"\">";
      ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);\" onmouseout=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>";
      ulHTML += "</li>";
    }
    this._container.getElementsByTagName("UL")[0].innerHTML = ulHTML;
  },
  mouseOver : function(obj){
    var i = parseInt( obj.innerHTML );
    if( this._index!=i-1){
      obj.style.color = "#ff0000";
    }
  },
  mouseOut : function(obj){
    obj.style.color = "#fff";
  }
}
-->
</script>
<div id="imgADPlayer"></div>
<script>
  PImgPlayer.addItem( "拉手网", "http://www.lashou.com/", "./images/1001.jpg");
  PImgPlayer.addItem( "糯米网", "http://www.nuomi.com/", "./images/1002.jpg");
  PImgPlayer.addItem( "美团网", "http://www.meituan.com/", "./images/1003.jpg");
  PImgPlayer.init( "imgADPlayer", 715, 95 );
</script>
</body>

希望本文所述对大家JavaScript程序设计有所帮助。

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

- Author -

Youngerchen

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
Vue列表渲染的示例代码
Nov 01 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 #Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 #Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 #Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 #Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 #Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 #Javascript
Javascript字符串常用方法详解
Jul 21 #Javascript
短信验证码(1) pytz(1) SQLite3(1) Selenium(1) 分布式锁(3) reduce(2) filter(1) dockerfile(1) Django(9) Tsmoothie(1)
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
php curl常用的5个经典例子
2017/01/20 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
不错的一个日期输入 动态
2006/11/06 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
简单了解python的break、continue、pass
2019/07/08 Python
TensorFlow车牌识别完整版代码（含车牌数据集）
2019/08/05 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
教育技术学专业职业规划书
2014/03/03 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
围城读书笔记
2015/06/26 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis