首页
所有分类
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 相关文章推荐
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 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
openGauss(1) cypress(1) ant design(2) 太阳码(1) 延时任务(1) 弹窗(1) JDBC(3) Eclipse(1) 变量提升(1) pdf(1)
You might like
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
使javascript也能包含文件
2006/10/26 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
跨浏览器开发经验总结（四） 怎么写入剪贴板
2010/05/13 Javascript
js计算精度问题小结
2013/04/22 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
react基本安装与测试示例
2020/04/27 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
Python画图学习入门教程
2016/07/01 Python
python 接口返回的json字符串实例
2018/03/27 Python
python实现微信小程序自动回复
2018/09/10 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python实现支付宝转账接口
2019/05/07 Python
Python中print函数简单使用总结
2019/08/05 Python
Python进程，多进程，获取进程id，给子进程传递参数操作示例
2019/10/11 Python
Python实现数值积分方式
2019/11/20 Python
如何写python的配置文件
2020/06/07 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Aerosoles爱柔仕官网：美国舒软女鞋品牌
2017/07/17 全球购物
时尚、社区、科技：SEVENSTORE
2019/04/26 全球购物
Tessabit日本：集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
公务员个人自我评价分享
2013/11/06 职场文书
项目经理任命书
2014/06/04 职场文书