首页
所有分类
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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
动态添加js事件实现代码
Mar 12 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
javascript实现倒计时（精确到秒）
Jun 26 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
js实现录音上传功能
Nov 22 Javascript
JS实现公告上线滚动效果
Jan 10 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
多线程(6) Spring-Retry(1) Fragment(1) muduo(1) pt-archiver(1) TcpServer(1) 忘记密码(1) EventBus(1) Spring Boot(5) ICF-5900W(2)
You might like
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
浅析PHP关键词替换的类(避免重复替换，保留与还原原始链接)
2015/09/22 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
使用js 设置url参数
2013/07/08 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
jQuery树控件zTree使用方法详解（一）
2017/02/28 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
python3使用QQ邮箱发送邮件
2020/05/20 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
django使用多个数据库的方法实例
2021/03/04 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
试述DBMS的主要功能
2016/11/13 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
社区个人对照检查材料（群众路线）
2014/09/26 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
MySQL数据库表约束讲解
2022/06/21 MySQL