首页
所有分类
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点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
webpack的移动端适配方案小结
Jul 25 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) Ubuntu Server(6) systemctl(1) Repository接口(3) Android(19) Spring Data JPA(4) JAVA(88) DHCP(2) 池化技术(1) 主题(1)
You might like
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
js输出列表实现代码
2010/09/12 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
时尚孕妇装：HATCH Collection
2019/09/24 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
小学生家长评语集锦
2014/01/30 职场文书
电子商务专业求职信
2014/03/08 职场文书
植树造林的宣传标语
2014/06/23 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
工作调动申请报告
2015/05/18 职场文书
小学教师教学随笔
2015/08/14 职场文书
幼儿园开学家长寄语（2016春季）
2015/12/03 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Django中celery的使用项目实例
2022/07/07 Python