js 图片按秒轮换效果

作者：袖梨 2022-07-02

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w***3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

提示：您可以先修改部分代码再运行

<span id="title_0">cokin2</span>
<span id="summary_0"></span>
<span id="date_0">
日期: 2006年05月01日
</span>
<span id="description_0"></span>
</div>
<div style="display:none">

<span id="title_1">cokin</span>
<span id="summary_1"></span>
<span id="date_1">
日期: 2006年05月01日
</span>
<span id="description_1"></span>
</div>
<script type="text/JavaScript">
// <![CDATA[
var image = new Image(), timer, iDelay = 3000, iDir = 1, iSize = 2;
var bPause = 0, bShowText = 0, bShowTools = 1;
var linkStop, spanPause, spanText, toolText;
var toolBar, textBanner, spanTitle, spanSummary, spanDate, spanDescription;
var index = 0, count = 2;
var is_cached = new Array(count), item_map = new Array(count);
for (i=0; i < count; i++) is_cached[i] = new Array(0,0,0,0,0,0);
item_map[0] = new Array(2,2,1,0,0,0);
item_map[1] = new Array(2,2,1,0,0,0);
function random_int(i) {
return Math.floor(i*(Math.random()%1));
}
var random_order = new Array(count);
for (i=0; i < count; i++) random_order[i] = i;
for (i=count-1; i > 0; i--) {
j = random_int(i+1);
k = random_order[i];
random_order[i] = random_order[j];
random_order[j] = k;
}
function move_index(by) {
if (iDir==0/*random*/) {
random_index = 0;
for (i = 0; i < count; i++)
if (random_order[i] == index) {
random_index = i;
break;
}
return random_order[(random_index+by+count)%count];
}
else return (index+(by*iDir)+count)%count;
}
function preload(i) {
if (!is_cached[i][iSize]) {
is_cached[i][iSize] = 1;
image.src = document.getElementById('item_'+i+'_'+item_map[i][iSize]).href;
}
}
function slide_view_start() {
if (bShowText) show_text();
preload(move_index(1));
if (timer) { clearInterval(timer); clearTimeout(timer); } // Avoid extra timers in opera
if (!bPause) timer = setTimeout('goto_next_photo()', iDelay);
}
function goto_next_photo() {
index = move_index(1);
if (bCanBlend) apply_filter();
document.images.slide.src =
document.getElementById('item_'+index+'_'+item_map[index][iSize]).href;
linkStop.href = document.getElementById('href_'+index).href;
if (bCanBlend) document.images.slide.filters[0].Play();
}
function show_text() {
spanTitle.innerHTML = document.getElementById('title_'+index).innerHTML;
spanSummary.innerHTML = document.getElementById('summary_'+index).innerHTML;
spanDate.innerHTML = document.getElementById('date_'+index).innerHTML;
spanDescription.innerHTML = document.getElementById('description_'+index).innerHTML;
}
function text_onoff() {
bShowText = bShowText ? 0 : 1;
if (bShowText) show_text(); else {
spanTitle.innerHTML = spanSummary.innerHTML =
spanDate.innerHTML = spanDescription.innerHTML = '';
}
textBanner.style.display = bShowText ? 'block' : 'none';
spanText.innerHTML = bShowText ? '隐藏更多信息'
: '显示更多信息'; 
}
function start_stop() {
bPause = bPause ? 0 : 1;
if (bPause) clearTimeout(timer);
else goto_next_photo();
spanPause.innerHTML = bPause ? '继续'
: '暂停'; 
}
function jump(by) {
index = move_index(by);
clearTimeout(timer);
goto_next_photo();
}
function apply_filter() {
f = filters[document.getElementById('filter').selectedIndex];
if (f == 'RANDOM') f = filters[random_int(filters.length-1)];
document.images.slide.style.filter = f;
document.images.slide.filters[0].Apply();
}
function new_size(size) {
iSize = size;
jump(-1);
}
function new_order(direct) {
iDir = direct;
}
function new_delay(delay) {
iDelay = delay*1000;
jump(-1);
}
function tools_onoff() {
bShowTools = bShowTools ? 0 : 1;
toolBar.style.display = bShowTools ? 'block' : 'none';
toolText.innerHTML = bShowTools ? '[-]'
: '[+]'; 
}
// ]]>
</script>
<div style="float:left">

</div>
<div id="gsContent" class="gcBorder1">
<div id="toolbar" class="gbBlock gcBackground1">

延时:
<select onchange="new_delay(this.value)">
<option selected value="3">3秒</option>
<option value="5">5秒</option>
<option value="10">10秒</option>
<option value="15">15秒</option>
<option value="20">20秒</option>
</select>
 
方向:
<select onchange="new_order(this.value)">
<option value="1">向前</option>
<option value="-1">向后</option>
<option value="0">随机</option>
</select>
 
最大尺寸:
<select onchange="new_size(this.value)">
<option value="0">320 x 320</option>
<option value="1">640 x 640</option>
<option selected value="2">800 x 800</option>
<option value="3">1024 x 1024</option>
<option value="4">1280 x 1280</option>
</select>
 
<script type="text/JavaScript">
// <![CDATA[
if (bCanBlend) {
document.write('  淡出:<select id="filter">');
for (i = 0; i < filterNames.length; i++) {
document.write('<option>'+filterNames[i]);
}
document.write('');
}
// ]]>
</script>
</div>
<div class="gbItemImage" align="center">
<img id="slide" alt="" src="">
</div>
<div id="textBanner" class="gbBlock gcBackground1" style="display:none" align="center">
<div class="giTitle" id="title"></div>
<div class="giDescription" id="summary"></div>
<div class="giInfo summary" id="date"></div>
<div class="giInfo summary" id="description"></div>
</div>
</div>
<script type="text/JavaScript">
// <![CDATA[
linkStop = document.getElementById('stop');
spanPause = document.getElementById('pause');
spanText = document.getElementById('moreInfo');
toolText = document.getElementById('tools');
toolBar = document.getElementById('toolbar');
textBanner = document.getElementById('textBanner');
spanTitle = document.getElementById('title');
spanSummary = document.getElementById('summary');
spanDate = document.getElementById('date');
spanDescription = document.getElementById('description');
document.images.slide.onload = slide_view_start;
document.images.slide.onerror = goto_next_photo;
document.images.slide.src =
document.getElementById('item_0_'+item_map[0][iSize]).href;
// ]]>
</script>
</div>

提示：您可以先修改部分代码再运行

js 图片按秒轮换效果

相关文章

精彩推荐