加载很慢的要多
效果1
<
script type
=
"
text/javascript
"
src = " http://slideshow.triptracker.net/slide.js " ></ script >
< script defer = " defer " type = " text/javascript " >
<!--
var viewer = new PhotoViewer();
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/011.jpg ' );
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/021.jpg ' );
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/03.jpg ' );
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/061.jpg ' );
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/051.jpg ' );
// --></script>
< style type = " text/css " >
<!--
.Slideshow a {
margin - right: 5px;
margin - left: 5px;
text - decoration: none;
}
-->
</ style >
< center >
< div class = " Slideshow " >
< a href = " http://www.blueidea.com/articleimg/2003/12/1441/011.jpg " onclick = " return viewer.show(0) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/011.jpg " alt = "" /> </ a >
< a href = " photo/2.jpg " onclick = " return viewer.show(1) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/021.jpg " alt = "" /> </ a >
< a href = " photo/3.jpg " onclick = " return viewer.show(2) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/03.jpg " alt = "" /> </ a >
< a href = " photo/4.jpg " onclick = " return viewer.show(3) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/061.jpg " alt = "" /> </ a >
< a href = " photo/5.jpg " onclick = " return viewer.show(4) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/051.jpg " alt = "" /> </ a >
< br />
</ div >
</ center >
src = " http://slideshow.triptracker.net/slide.js " ></ script >
< script defer = " defer " type = " text/javascript " >
<!--
var viewer = new PhotoViewer();
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/011.jpg ' );
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/021.jpg ' );
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/03.jpg ' );
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/061.jpg ' );
viewer.add( ' http://www.blueidea.com/articleimg/2003/12/1441/051.jpg ' );
// --></script>
< style type = " text/css " >
<!--
.Slideshow a {
margin - right: 5px;
margin - left: 5px;
text - decoration: none;
}
-->
</ style >
< center >
< div class = " Slideshow " >
< a href = " http://www.blueidea.com/articleimg/2003/12/1441/011.jpg " onclick = " return viewer.show(0) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/011.jpg " alt = "" /> </ a >
< a href = " photo/2.jpg " onclick = " return viewer.show(1) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/021.jpg " alt = "" /> </ a >
< a href = " photo/3.jpg " onclick = " return viewer.show(2) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/03.jpg " alt = "" /> </ a >
< a href = " photo/4.jpg " onclick = " return viewer.show(3) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/061.jpg " alt = "" /> </ a >
< a href = " photo/5.jpg " onclick = " return viewer.show(4) " >
< img width = " 70 " height = " 70 " src = " http://www.blueidea.com/articleimg/2003/12/1441/051.jpg " alt = "" /> </ a >
< br />
</ div >
</ center >
效果2
<
script
>
</ script >
< html >
< body >
< div id = " testMessage " style = " border:2px solid skyblue;width:300px;height:60px " ></ div >
< div id = " photoContrl " style = " display:none " >
< button onclick = " prevPhoto() " > Previous </ button >
< button onclick = " nextPhoto() " > Next </ button >
< button onclick = " autoPlay() " id = " pp " > Play </ button >
< button onclick = " stopPlay() " > Stop </ button >
</ div >
< div style = " border:1px solid gold;width:600px;background:dodgerblue " >< img src = " http://bbsimg.ali213.net/customavatars/1303244.gif " id = " photo " style = "" ></ div >
</ body >
</ html >
< script >
function tM(Message)
{
$( " testMessage " ).innerHTML = Message
}
function dR(topr)
{
document.write(topr)
}
function $(eleId)
{ return document.getElementById(eleId)}
// 预载图片
var imasrc = new Array( " http://news.mydrivers.com/img/20070813/10254068.jpg "
, " http://news.mydrivers.com/img/20070813/10254629.jpg "
, " http://news.mydrivers.com/img/20070813/10255187.jpg "
, " http://news.mydrivers.com/img/20070813/10255626.jpg "
, " http://news.mydrivers.com/img/20070813/10260076.jpg "
, " http://news.mydrivers.com/img/20070813/10260471.jpg "
, " http://news.mydrivers.com/img/20070813/10261022.jpg "
, " http://news.mydrivers.com/img/20070813/10261479.jpg " ) // 图片路径写入数组
var preIma = new Array()
var dB = new Date()
for (i = 0 ;i < imasrc.length;i ++ ) // 预载所有图片
{
preLoadImg(i)
}
function preLoadImg(imgIndex) // 预载指定图片图片
{
preIma[imgIndex] = new Image()
preIma[imgIndex].imgReadyStatus = false
preIma[imgIndex].imgIndex = imgIndex
preIma[imgIndex].onload = imgLoad
preIma[imgIndex].onerror = imgError
preIma[imgIndex].onabort = imgAbort
preIma[imgIndex].src = imasrc[imgIndex]
}
function imgLoad() // 预载完成
{
this .imgReadyStatus = true
}
function imgError() // 预载失败
{
preLoadImg( this .imgIndex)
}
function imgAbort() // 预载取消
{
preIma.splice( this .imgIndex, 1 )
}
var checkAgain
function checkImgReadyStatus() // 检索加载状态
{
var imgReadyStatus = true
var persent = 0
var dE = new Date()
for (i = 0 ;i < preIma.length;i ++ )
{
if ( ! preIma[i].imgReadyStatus)
{imgReadyStatus = false }
else
{persent ++ }
}
tM( " 完成: " + (persent / preIma.length * 100 ).toFixed( 2 ) + " %<br>载入: " + persent + " 张图片<br>消耗时间: " + ((dE - dB) / 1000 ).toFixed( 0 ) + " 秒 " ) // 显示进度
if (imgReadyStatus)
{
$( " photoContrl " ).style.display = " block "
autoPlay()
clearTimeout(checkAgain)
}
else
{
checkAgain = setTimeout(checkImgReadyStatus, 1000 ) // 检索频率
}
}
checkImgReadyStatus()
// 幻灯片效果
var photoIndex = 0 // 初始化图片索引
var opacity = 10 // 初始化透明度
var direct = " -- " // 初始化透明度矢量
var doPlay // 定义播放
var doAutoPlay // 定义自动播放
function prevPhoto(){play( - 1 )} // 前翻
function nextPhoto(){play( 1 )} // 后翻
function autoPlay() // 自动播放
{
if (doAutoPlay)
{
clearInterval(doAutoPlay)
doAutoPlay = null
$( " pp " ).innerHTML = " Play "
}
else
{
play( 1 )
doAutoPlay = setInterval( " play(1) " , 3000 ) // 定义自动播放频率
$( " pp " ).innerHTML = " Pause "
}
}
function stopPlay() // 停止播放
{
clearInterval(doAutoPlay)
doAutoPlay = null
photoIndex = 0
play( 0 )
$( " pp " ).innerHTML = " Play "
}
function play(act) // 执行动作
{
if (preIma.length != 0 )
{
if (doPlay) {clearInterval(doPlay)}
doPlay = setInterval(switchPhoto, 10 )
photoIndex = (photoIndex + act + preIma.length) % preIma.length
}
}
function switchPhoto() // 切换照片
{
eval( " opacity " + direct)
setOpa(opacity)
if (opacity <= 1 )
{
direct = " ++ "
$( " photo " ).src = preIma[photoIndex].src
}
else if (opacity >= 10 )
{
direct = " -- "
clearInterval(doPlay)
}
}
function setOpa(opacity) // 改变透明度
{
if ($( " photo " ).style.filter != null )
{$( " photo " ).style.filter = " alpha(opacity= " + opacity * 10 + " ) " }
else
{$( " photo " ).style.opacity = opacity / 10 }
}
</ script >
</ script >
< html >
< body >
< div id = " testMessage " style = " border:2px solid skyblue;width:300px;height:60px " ></ div >
< div id = " photoContrl " style = " display:none " >
< button onclick = " prevPhoto() " > Previous </ button >
< button onclick = " nextPhoto() " > Next </ button >
< button onclick = " autoPlay() " id = " pp " > Play </ button >
< button onclick = " stopPlay() " > Stop </ button >
</ div >
< div style = " border:1px solid gold;width:600px;background:dodgerblue " >< img src = " http://bbsimg.ali213.net/customavatars/1303244.gif " id = " photo " style = "" ></ div >
</ body >
</ html >
< script >
function tM(Message)
{
$( " testMessage " ).innerHTML = Message
}
function dR(topr)
{
document.write(topr)
}
function $(eleId)
{ return document.getElementById(eleId)}
// 预载图片
var imasrc = new Array( " http://news.mydrivers.com/img/20070813/10254068.jpg "
, " http://news.mydrivers.com/img/20070813/10254629.jpg "
, " http://news.mydrivers.com/img/20070813/10255187.jpg "
, " http://news.mydrivers.com/img/20070813/10255626.jpg "
, " http://news.mydrivers.com/img/20070813/10260076.jpg "
, " http://news.mydrivers.com/img/20070813/10260471.jpg "
, " http://news.mydrivers.com/img/20070813/10261022.jpg "
, " http://news.mydrivers.com/img/20070813/10261479.jpg " ) // 图片路径写入数组
var preIma = new Array()
var dB = new Date()
for (i = 0 ;i < imasrc.length;i ++ ) // 预载所有图片
{
preLoadImg(i)
}
function preLoadImg(imgIndex) // 预载指定图片图片
{
preIma[imgIndex] = new Image()
preIma[imgIndex].imgReadyStatus = false
preIma[imgIndex].imgIndex = imgIndex
preIma[imgIndex].onload = imgLoad
preIma[imgIndex].onerror = imgError
preIma[imgIndex].onabort = imgAbort
preIma[imgIndex].src = imasrc[imgIndex]
}
function imgLoad() // 预载完成
{
this .imgReadyStatus = true
}
function imgError() // 预载失败
{
preLoadImg( this .imgIndex)
}
function imgAbort() // 预载取消
{
preIma.splice( this .imgIndex, 1 )
}
var checkAgain
function checkImgReadyStatus() // 检索加载状态
{
var imgReadyStatus = true
var persent = 0
var dE = new Date()
for (i = 0 ;i < preIma.length;i ++ )
{
if ( ! preIma[i].imgReadyStatus)
{imgReadyStatus = false }
else
{persent ++ }
}
tM( " 完成: " + (persent / preIma.length * 100 ).toFixed( 2 ) + " %<br>载入: " + persent + " 张图片<br>消耗时间: " + ((dE - dB) / 1000 ).toFixed( 0 ) + " 秒 " ) // 显示进度
if (imgReadyStatus)
{
$( " photoContrl " ).style.display = " block "
autoPlay()
clearTimeout(checkAgain)
}
else
{
checkAgain = setTimeout(checkImgReadyStatus, 1000 ) // 检索频率
}
}
checkImgReadyStatus()
// 幻灯片效果
var photoIndex = 0 // 初始化图片索引
var opacity = 10 // 初始化透明度
var direct = " -- " // 初始化透明度矢量
var doPlay // 定义播放
var doAutoPlay // 定义自动播放
function prevPhoto(){play( - 1 )} // 前翻
function nextPhoto(){play( 1 )} // 后翻
function autoPlay() // 自动播放
{
if (doAutoPlay)
{
clearInterval(doAutoPlay)
doAutoPlay = null
$( " pp " ).innerHTML = " Play "
}
else
{
play( 1 )
doAutoPlay = setInterval( " play(1) " , 3000 ) // 定义自动播放频率
$( " pp " ).innerHTML = " Pause "
}
}
function stopPlay() // 停止播放
{
clearInterval(doAutoPlay)
doAutoPlay = null
photoIndex = 0
play( 0 )
$( " pp " ).innerHTML = " Play "
}
function play(act) // 执行动作
{
if (preIma.length != 0 )
{
if (doPlay) {clearInterval(doPlay)}
doPlay = setInterval(switchPhoto, 10 )
photoIndex = (photoIndex + act + preIma.length) % preIma.length
}
}
function switchPhoto() // 切换照片
{
eval( " opacity " + direct)
setOpa(opacity)
if (opacity <= 1 )
{
direct = " ++ "
$( " photo " ).src = preIma[photoIndex].src
}
else if (opacity >= 10 )
{
direct = " -- "
clearInterval(doPlay)
}
}
function setOpa(opacity) // 改变透明度
{
if ($( " photo " ).style.filter != null )
{$( " photo " ).style.filter = " alpha(opacity= " + opacity * 10 + " ) " }
else
{$( " photo " ).style.opacity = opacity / 10 }
}
</ script >