javascript实现图片播放功能

最新推荐文章于 2023-02-22 13:43:02 发布

beauty9235

最新推荐文章于 2023-02-22 13:43:02 发布

阅读量732

点赞数

文章标签： javascript transition opera aix ie function

本文链接：https://blog.csdn.net/beauty9235/article/details/2211159

版权

// javascript实现图片播放功能

< style type = " text/css " >

#imgp { float:left; margin:3px; width:405px; height:220px; text-align:center;}

#imgp img { border:10px solid #b4be99;}

</ style >

< table >

< tr >

< td >< div id = " imgp " >

</ div ></ td >

</ tr >

</ table >

< div id = div2 ></ div >

播放速度： & nbsp; < select name = " speedMenu " onchange = " changeSpeed(this.selectedIndex); " ID = " Select1 " >

< option value = " 0 " > 快速 </ option >

< option value = " 1 " selected > 中速 </ option >

< option value = " 2 " > 慢速 </ option >

</ select >

< a href = " javascript:play() " > 放映 </ a >

< a href = " javascript:stop() " > 停止 </ a >

< a href = " javascript:setButton(0); rewind(); " > 上一张 </ a >

< a href = " javascript:setButton(1); forward(); " > 下一张 </ a >

< script language = " javascript " >

<!--

var imageIDsArray = new Array( ' 4942182 ' , ' 4942181 ' , ' 4942180 ' );

var imageSrcArray = new Array( ' http://photo2.hexun.com/p/2006/0602/24710/b_211317F94CF6C932.jpg ' , ' http://photo2.hexun.com/p/2006/0602/24710/b_3C4067CEE679E853.jpg ' , ' http://photo2.hexun.com/p/2006/0602/24710/b_C5811785E17E0B1D.jpg ' );

var imageNameArray = new Array( ' 留下青春与幸福1 ' , ' 留下青春与幸福2 ' , ' 留下青春与幸福3 ' );

var imageWidthArray = new Array( ' 600 ' , ' 449 ' , ' 467 ' );

var imageHeightArray = new Array( ' 495 ' , ' 480 ' , ' 700 ' );

var SHOWINGSTRING = ' 第%slideNum / 3张 ' ;

var numImgs = 3 ;

var blogName = ' beauty9235 ' ;

var arrPreload = new Array();

var begImg = 0 ;

var arrPreload = new Array();

var spd = 2 ;

function init()

{

preloadRange(0,_PRELOADRANGE-1);

curImg = begImg;

if (curImg < 0 || curImg > numImgs - 1)

curImg = numImgs - 1;

changeSlide();

setTimeout("play()", 4000)

}

var curImg = 0 ;

var timerId = - 1 ;

var interval = 3500 ;

var imgIsLoaded = false ;

var current_transition = 15 ;

var flag = true ;

var bFirst = false ;

var agt = navigator.userAgent.toLowerCase();

// Note: On IE5, these return 4, so use is_ie5up to detect IE5.

var is_major = parseInt(navigator.appVersion);

var is_minor = parseFloat(navigator.appVersion);

// Note: Opera and WebTV spoof Navigator. We do strict client detection.

// If you want to allow spoofing, take out the tests for opera and webtv.

var is_nav = ((agt.indexOf( ' mozilla ' ) !=- 1 ) && (agt.indexOf( ' spoofer ' ) ==- 1 )

&& (agt.indexOf( ' compatible ' ) == - 1 ) && (agt.indexOf( ' opera ' ) ==- 1 )

&& (agt.indexOf( ' webtv ' ) ==- 1 ) && (agt.indexOf( ' hotjava ' ) ==- 1 ));

var is_nav2 = (is_nav && (is_major == 2 ));

var is_nav3 = (is_nav && (is_major == 3 ));

var is_nav4 = (is_nav && (is_major == 4 ));

var is_nav4up = (is_nav && (is_major >= 4 ));

var is_navonly = (is_nav && ((agt.indexOf( " ;nav " ) != - 1 ) ||

(agt.indexOf( " ; nav " ) != - 1 )) );

var is_nav6 = (is_nav && (is_major == 5 ));

var is_nav6up = (is_nav && (is_major >= 5 ));

var is_gecko = (agt.indexOf( ' gecko ' ) != - 1 );

var is_ie = ((agt.indexOf( " msie " ) != - 1 ) && (agt.indexOf( " opera " ) == - 1 ));

var is_ie3 = (is_ie && (is_major < 4 ));

var is_ie4 = (is_ie && (is_major == 4 ) && (agt.indexOf( " msie 4 " ) !=- 1 ) );

var is_ie4up = (is_ie && (is_major >= 4 ));

var is_ie5 = (is_ie && (is_major == 4 ) && (agt.indexOf( " msie 5.0 " ) !=- 1 ) );

var is_ie5_5 = (is_ie && (is_major == 4 ) && (agt.indexOf( " msie 5.5 " ) !=- 1 ));

var is_ie5up = (is_ie && ! is_ie3 && ! is_ie4);

var is_ie5_5up = (is_ie && ! is_ie3 && ! is_ie4 && ! is_ie5);

var is_ie6 = (is_ie && (is_major == 4 ) && (agt.indexOf( " msie 6. " ) !=- 1 ) );

var is_ie6up = (is_ie && ! is_ie3 && ! is_ie4 && ! is_ie5 && ! is_ie5_5);

// KNOWN BUG: On AOL4, returns false if IE3 is embedded browser

// or if this is the first browser window opened. Thus the

// variables is_aol, is_aol3, and is_aol4 aren't 100% reliable.

var is_aol = (agt.indexOf( " aol " ) != - 1 );

var is_aol3 = (is_aol && is_ie3);

var is_aol4 = (is_aol && is_ie4);

var is_aol5 = (agt.indexOf( " aol 5 " ) != - 1 );

var is_aol6 = (agt.indexOf( " aol 6 " ) != - 1 );

var is_opera = (agt.indexOf( " opera " ) != - 1 );

var is_opera2 = (agt.indexOf( " opera 2 " ) != - 1 || agt.indexOf( " opera/2 " ) != - 1 );

var is_opera3 = (agt.indexOf( " opera 3 " ) != - 1 || agt.indexOf( " opera/3 " ) != - 1 );

var is_opera4 = (agt.indexOf( " opera 4 " ) != - 1 || agt.indexOf( " opera/4 " ) != - 1 );

var is_opera5 = (agt.indexOf( " opera 5 " ) != - 1 || agt.indexOf( " opera/5 " ) != - 1 );

var is_opera5up = (is_opera && ! is_opera2 && ! is_opera3 && ! is_opera4);

var is_webtv = (agt.indexOf( " webtv " ) != - 1 );

var is_TVNavigator = ((agt.indexOf( " navio " ) != - 1 ) || (agt.indexOf( " navio_aoltv " ) != - 1 ));

var is_AOLTV = is_TVNavigator;

var is_hotjava = (agt.indexOf( " hotjava " ) != - 1 );

var is_hotjava3 = (is_hotjava && (is_major == 3 ));

var is_hotjava3up = (is_hotjava && (is_major >= 3 ));

// *** JAVASCRIPT VERSION CHECK ***

var is_js;

if (is_nav2 || is_ie3) is_js = 1.0 ;

else if (is_nav3) is_js = 1.1 ;

else if (is_opera5up) is_js = 1.3 ;

else if (is_opera) is_js = 1.1 ;

else if ((is_nav4 && (is_minor <= 4.05 )) || is_ie4) is_js = 1.2 ;

else if ((is_nav4 && (is_minor > 4.05 )) || is_ie5) is_js = 1.3 ;

else if (is_hotjava3up) is_js = 1.4 ;

else if (is_nav6 || is_gecko) is_js = 1.5 ;

// NOTE: In the future, update this code when newer versions of JS

// are released. For now, we try to provide some upward compatibility

// so that future versions of Nav and IE will show they are at

// *least* JS 1.x capable. Always check for JS version compatibility

// with > or >=.

else if (is_nav6up) is_js = 1.5 ;

// NOTE: ie5up on mac is 1.4

else if (is_ie5up) is_js = 1.3

// HACK: no idea for other browsers; always check for JS version with > or >=

else is_js = 0.0 ;

// *** PLATFORM ***

var is_win = ( (agt.indexOf( " win " ) !=- 1 ) || (agt.indexOf( " 16bit " ) !=- 1 ) );

// NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all

// Win32, so you can't distinguish between Win95 and WinNT.

var is_win95 = ((agt.indexOf( " win95 " ) !=- 1 ) || (agt.indexOf( " windows 95 " ) !=- 1 ));

// is this a 16 bit compiled version?

var is_win16 = ((agt.indexOf( " win16 " ) !=- 1 ) ||

(agt.indexOf( " 16bit " ) !=- 1 ) || (agt.indexOf( " windows 3.1 " ) !=- 1 ) ||

(agt.indexOf( " windows 16-bit " ) !=- 1 ) );

var is_win31 = ((agt.indexOf( " windows 3.1 " ) !=- 1 ) || (agt.indexOf( " win16 " ) !=- 1 ) ||

(agt.indexOf( " windows 16-bit " ) !=- 1 ));

var is_winme = ((agt.indexOf( " win 9x 4.90 " ) !=- 1 ));

var is_win2k = ((agt.indexOf( " windows nt 5.0 " ) !=- 1 ));

// NOTE: Reliable detection of Win98 may not be possible. It appears that:

// - On Nav 4.x and before you'll get plain "Windows" in userAgent.

// - On Mercury client, the 32-bit version will return "Win98", but

// the 16-bit version running on Win98 will still return "Win95".

var is_win98 = ((agt.indexOf( " win98 " ) !=- 1 ) || (agt.indexOf( " windows 98 " ) !=- 1 ));

var is_winnt = ((agt.indexOf( " winnt " ) !=- 1 ) || (agt.indexOf( " windows nt " ) !=- 1 ));

var is_win32 = (is_win95 || is_winnt || is_win98 ||

((is_major >= 4 ) && (navigator.platform == " Win32 " )) ||

(agt.indexOf( " win32 " ) !=- 1 ) || (agt.indexOf( " 32bit " ) !=- 1 ));

var is_os2 = ((agt.indexOf( " os/2 " ) !=- 1 ) ||

(navigator.appVersion.indexOf( " OS/2 " ) !=- 1 ) ||

(agt.indexOf( " ibm-webexplorer " ) !=- 1 ));

var is_mac = (agt.indexOf( " mac " ) !=- 1 );

// hack ie5 js version for mac

if (is_mac && is_ie5up) is_js = 1.4 ;

var is_mac68k = (is_mac && ((agt.indexOf( " 68k " ) !=- 1 ) ||

(agt.indexOf( " 68000 " ) !=- 1 )));

var is_macppc = (is_mac && ((agt.indexOf( " ppc " ) !=- 1 ) ||

(agt.indexOf( " powerpc " ) !=- 1 )));

var is_sun = (agt.indexOf( " sunos " ) !=- 1 );

var is_sun4 = (agt.indexOf( " sunos 4 " ) !=- 1 );

var is_sun5 = (agt.indexOf( " sunos 5 " ) !=- 1 );

var is_suni86 = (is_sun && (agt.indexOf( " i86 " ) !=- 1 ));

var is_irix = (agt.indexOf( " irix " ) !=- 1 ); // SGI

var is_irix5 = (agt.indexOf( " irix 5 " ) !=- 1 );

var is_irix6 = ((agt.indexOf( " irix 6 " ) !=- 1 ) || (agt.indexOf( " irix6 " ) !=- 1 ));

var is_hpux = (agt.indexOf( " hp-ux " ) !=- 1 );

var is_hpux9 = (is_hpux && (agt.indexOf( " 09. " ) !=- 1 ));

var is_hpux10 = (is_hpux && (agt.indexOf( " 10. " ) !=- 1 ));

var is_aix = (agt.indexOf( " aix " ) !=- 1 ); // IBM

var is_aix1 = (agt.indexOf( " aix 1 " ) !=- 1 );

var is_aix2 = (agt.indexOf( " aix 2 " ) !=- 1 );

var is_aix3 = (agt.indexOf( " aix 3 " ) !=- 1 );

var is_aix4 = (agt.indexOf( " aix 4 " ) !=- 1 );

var is_linux = (agt.indexOf( " inux " ) !=- 1 );

var is_sco = (agt.indexOf( " sco " ) !=- 1 ) || (agt.indexOf( " unix_sv " ) !=- 1 );

var is_unixware = (agt.indexOf( " unix_system_v " ) !=- 1 );

var is_mpras = (agt.indexOf( " ncr " ) !=- 1 );

var is_reliant = (agt.indexOf( " reliantunix " ) !=- 1 );

var is_dec = ((agt.indexOf( " dec " ) !=- 1 ) || (agt.indexOf( " osf1 " ) !=- 1 ) ||

(agt.indexOf( " dec_alpha " ) !=- 1 ) || (agt.indexOf( " alphaserver " ) !=- 1 ) ||

(agt.indexOf( " ultrix " ) !=- 1 ) || (agt.indexOf( " alphastation " ) !=- 1 ));

var is_sinix = (agt.indexOf( " sinix " ) !=- 1 );

var is_freebsd = (agt.indexOf( " freebsd " ) !=- 1 );

var is_bsd = (agt.indexOf( " bsd " ) !=- 1 );

var is_unix = ((agt.indexOf( " x11 " ) !=- 1 ) || is_sun || is_irix || is_hpux ||

is_sco || is_unixware || is_mpras || is_reliant ||

is_dec || is_sinix || is_aix || is_linux || is_bsd || is_freebsd);

var is_vms = ((agt.indexOf( " vax " ) !=- 1 ) || (agt.indexOf( " openvms " ) !=- 1 ));

// - IE5.5 and up can do the blending transition.

var browserCanBlend = (is_ie5_5up);

/* show the blend select if appropriate */

var transitions = new Array;

transitions[ 0 ] = " progid:DXImageTransform.Microsoft.Fade(duration=1) " ;

transitions[ 1 ] = " progid:DXImageTransform.Microsoft.Blinds(Duration=1,bands=20) " ;

transitions[ 2 ] = " progid:DXImageTransform.Microsoft.Checkerboard(Duration=1,squaresX=20,squaresY=20) " ;

transitions[ 3 ] = " progid:DXImageTransform.Microsoft.Strips(Duration=1,motion=rightdown) " ;

transitions[ 4 ] = " progid:DXImageTransform.Microsoft.Barn(Duration=1,orientation=vertical) " ;

transitions[ 5 ] = " progid:DXImageTransform.Microsoft.GradientWipe(duration=1) " ;

transitions[ 6 ] = " progid:DXImageTransform.Microsoft.Iris(Duration=1,motion=out) " ;

transitions[ 7 ] = " progid:DXImageTransform.Microsoft.Wheel(Duration=1,spokes=12) " ;

transitions[ 8 ] = " progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10,duration=1) " ;

transitions[ 9 ] = " progid:DXImageTransform.Microsoft.RadialWipe(Duration=1,wipeStyle=clock) " ;

transitions[ 10 ] = " progid:DXImageTransform.Microsoft.RandomBars(Duration=1,orientation=vertical) " ;

transitions[ 11 ] = " progid:DXImageTransform.Microsoft.Slide(Duration=1,slideStyle=push) " ;

transitions[ 12 ] = " progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1,orientation=vertical) " ;

transitions[ 13 ] = " progid:DXImageTransform.Microsoft.Spiral(Duration=1,gridSizeX=40,gridSizeY=40) " ;

transitions[ 14 ] = " progid:DXImageTransform.Microsoft.Stretch(Duration=1,stretchStyle=push) " ;

transitions[ 15 ] = " special case " ;

var transition_count = 15 ;

var arrPreload = new Array();

var _PRELOADRANGE = 5 ;

function change_transition()

{

current_transition = document.all.transitionType.selectedIndex;

//alert(current_transition);

if(current_transition == 0)

current_transition = 15;

else

current_transition--;

}

function changeSpeed(sidx)

{

switch (sidx)

{

case 0: interval = 2000; break;

case 1: interval = 4000; break;

case 2: interval = 6000; break;

default: interval = 4000;

}

if (timerId != -1)

{

window.clearInterval(timerId);

timerId = window.setInterval("forward();", interval);

}

var arrPreload = new Array();

var _PRELOADRANGE = 5 ;

function preloadRange(intPic,intRange) {

var divStr = "";

for (var i=intPic; i<(intPic+intRange); i++) {

arrPreload[i] = new Image();

arrPreload[i].src = imageSrcArray[i];

}

if(!bFirst)

{

if (browserCanBlend)

{

var divTrans = '<select name="transitionType" size=1 οnchange="change_transition()" class="list1" ><option value=15 selected>随机显示</option> <option value=0 >混合效果</option> <option value=1 >百叶窗</option> <option value=2 >棋盘效果</option> <option value=3 >斜式效果</option> <option value=4 >开门见山</option> <option value=5 >擦除效果</option> <option value=6 >虹式效果</option> <option value=7 >风车效果</option> <option value=8 >波纹荡漾</option> <option value=9 >时钟转动</option> <option value=10 >雨丝效果</option> <option value=11 >滑动方式</option> <option value=12 >雪花显示</option> <option value=13 >盘旋收缩</option> <option value=14 >伸展方式</option> </select> ';

document.getElementById("div2").innerHTML = divTrans;

}

bFirst = true;

}

return false;

}

function ScaleImage(i)

{

var iAvailableWidth = 400;//span.clientWidth;;

var iAvailableHeight = 215;//span.clientHeight;

iFullImageWidth = imageWidthArray[i];

iFullImageHeight = imageHeightArray[i];

var flScale = Math.min( 1,Math.min((iAvailableWidth /iFullImageWidth),(iAvailableHeight /iFullImageHeight)));

var width = iScaledImageWidth = Math.round(iFullImageWidth * flScale);

var height = iScaledImageHeight = Math.round(iFullImageHeight * flScale);

var style="style='HEIGHT: "+height+"; WIDTH: "+width+";'";

return style;

}

function imgLoadNotify()

{

imgIsLoaded = true;

}

function changeSlide(n)

{

if (document.all)

{

/* transistion effects */

if (browserCanBlend)

{

var do_transition;

if (current_transition == (transition_count))

{

do_transition = Math.floor(Math.random() * transition_count);

}

else

{

do_transition = current_transition;

}

document.all.imgp.style.filter=transitions[do_transition];

document.all.imgp.filters[0].Apply();

}

else

{

document.all.imgp.style.filter="blendTrans(duration=1)";

document.all.imgp.filters.blendTrans.Apply();

}

imgIsLoaded = false;

var s = ScaleImage(curImg);

var htmlCont = "<a href='http://"+blogName+".photo.hexun.com"+"/"+imageIDsArray[curImg]+"_d.html' target=_blank title='点击查看图片详细信息'><img align=middle src='" + imageSrcArray[curImg] + "' οnlοad='imgLoadNotify();' "+s+" ></a><br>"+imageNameArray[curImg];

document.getElementById("imgp").innerHTML = htmlCont;

if (document.all)

{

document.all.imgp.filters[0].Play();

}

function forward()

{

imgIsLoaded = false;

if (!arrPreload[curImg+1])

{

curImg++;

if (curImg >= numImgs)

{

curImg = 0;

}

else

{

curImg++;

if (curImg >= numImgs)

{

curImg = 0;

}

changeSlide();

}

function rewind()

{

curImg--;

if (curImg < 0)

{

curImg = numImgs-1;

}

changeSlide();

}

function stop()

{

window.clearInterval(timerId);

timerId = -1;

imgIsLoaded = true;

}

function play()

{

if (timerId == -1)

timerId = window.setInterval('forward();', interval);

}

function setButton(direction)

{

if (timerId != -1) { window.clearInterval(timerId); timerId = window.setInterval("forward();", interval); }

imgIsLoaded = true;

}

// -->

</ script >

< script language = " javascript " > init(); </ script >

beauty9235

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现图片播放功能

//javascript实现图片播放功能style type="text/css"> #imgp...{ float:left; margin:3px; width:405px; height:220px; text-align:center;}#imgp img...{ border:10px solid #b4be99;}style>table>tr>td>div id="imgp" >d
复制链接

扫一扫