功能"/>
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 " >
</ 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( ' .jpg ' , ' .jpg ' , ' .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"+"/"+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 >
更多推荐
javascript实现图片播放功能
发布评论