首页
所有分类
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 25 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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
Hudi(1) sortInts(1) 数据重复(1) feDisplacementMap(1) Apache(17) Navigator(1) GUI(2) Pool(1) Tkinter(4) WebSockets(3)
You might like
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
vue iview实现动态新增和删除
2020/06/17 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
django创建简单的页面响应实例教程
2019/09/06 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
深入了解Python 变量作用域
2020/07/24 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
美国保健品专家：Life Extension
2018/05/04 全球购物
平面设计岗位职责
2013/12/14 职场文书
心得体会怎么写
2013/12/30 职场文书
最热门的自我评价
2013/12/30 职场文书
给领导的致歉信范文
2014/01/13 职场文书
销售业务员岗位职责
2014/01/29 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
对学校的意见和建议
2015/06/04 职场文书
品牌形象定位，全面分析
2019/07/23 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS