您的位置:首页 > Web前端 > JavaScript

图片翻页的幻灯效果

2007-06-21 18:16 309 查看
<SCRIPT LANGUAGE="JavaScript">

var rotate_delay = 1000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}

</SCRIPT>
<form name="slideform">

<table cellspacing="1" cellpadding="4" bgcolor="#000000">
            <tr>
                <td align="center" bgcolor="white" width="200" height="200">
                    <img src="1.jpg" name="show">
                </td>
            </tr>
            <tr>
                <td align="center" bgcolor="#c0c0c0">
                    <select name="slide" onChange="change();">
                        <option value="1.jpg" selected>
                        1
                        <option value="2.jpg">
                        2
                        <option value="3.jpg">
                        3
                        <option value="4.jpg">
                        4
                        <option value="5.jpg">
                        5
                        <option value="6.jpg">
                        6
                        <option value="7.jpg">
                        7
                        <option value="1.jpg">
                        8
                        <option value="2.jpg">
                        9
                        <option value="3.jpg">3</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="center" bgcolor="#c0c0c0">
                    <input type="button" onClick="first();" value="|<<" title="Beginning"> <input type="button" onClick="previous();" value="<<" title="Previous">
                    <input type="button" name="slidebutton" onClick="ap(this.value);" value="开始" title="AutoPlay">
                    <input type="button" onClick="next();" value=">>" title="Next"> <input type="button" onClick="last();" value=">>|" title="End">
                </td>
            </tr>
        </table>
 </form>

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息