JS實現(xiàn)的多張圖片輪流播放幻燈片效果

當前位置：首頁 > 范文|應用文 > IT技術專欄 > 網絡編程

來源：易賢網閱讀：2326 次日期：2016-07-29 15:20:53

溫馨提示：易賢網小編為您整理了“JS實現(xiàn)的多張圖片輪流播放幻燈片效果”,方便廣大網友查閱！

本文實例講述了JS實現(xiàn)的多張圖片輪流播放幻燈片效果。分享給大家供大家參考，具體如下：

<!--

/**************************************************

名稱: 圖片輪播類

創(chuàng)建時間: 2010-07-11 zhangty

示例:

頁面中已經存在名為imgPlayer(或者別的ID也行)的節(jié)點.

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;"; //初始化底部數(shù)字的顏色

} else {

spanStyle = baseSpacStyle + "background:#c0c0c0;"; //初始化底部數(shù)字的背景顏色

}

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;"; //數(shù)字的顏色

} else {

spanStyle = baseSpacStyle + "background:#c0c0c0;"; //數(shù)字的背景顏色

}

ulHTML += "<li style=\""+liStyle+"\">";

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>

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程序設計有所幫助。

上一篇：Javascript基礎學習筆記(菜鳥必看篇)

下一篇：高效Web開發(fā)的10個jQuery代碼片段

易賢網手機網站地址：JS實現(xiàn)的多張圖片輪流播放幻燈片效果

由于各方面情況的不斷調整與變化，易賢網提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關閱讀網絡編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網移動網站

2026上岸·考公考編培訓報班

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合