横向不间断连续滚动图片效果

&lt;head&gt;
&lt;script type="text/javascript"&gt;
imgArr = new Array();
imgArr[0] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover = 'javascript:outHover = true'; onMouseout = 'javascript: outHover = false;mvStart()'&gt;&lt;img src = /eWebEditor/UploadFile / 2005327204719938.gif border = 0&gt; &lt;/a&gt;";
imgArr[1] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204725420.gif border = 0&gt; &lt;/a&gt;";
imgArr[2] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204725360.gif border = 0&gt; &lt;/a&gt;";
imgArr[3] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204725406.gif border = 0&gt; &lt;/a&gt;";
imgArr[4] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204725266.gif border = 0&gt; &lt;/a&gt;";
imgArr[5] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204725696.gif border = 0&gt; &lt;/a&gt;";
imgArr[6] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204725993.gif border = 0&gt; &lt;/a&gt;";
imgArr[7] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204726451.gif border = 0&gt; &lt;/a&gt;";
imgArr[8] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204726631.gif border = 0&gt; &lt;/a&gt;";
imgArr[9] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204726764.gif border = 0&gt; &lt;/a&gt;";
imgArr[10] = "&lt;a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'&gt;&lt;img src=/eWebEditor / UploadFile / 2005327204726655.gif border = 0&gt; &lt;/a&gt;";
var moveStep = 4; //步长，单位：pixel
var moveRelax = 100; //移动时间间隔，单位：ms 
ns4 = (document.layers) ? true : false;
var displayImgAmount = 5; //视区窗口可显示个数 
var divWidth = 88; //每块图片占位宽 
var divHeight = 31; //每块图片占位高 
var startDnum = 0;
var nextDnum = startDnum + displayImgAmount;
var timeID;
var outHover = false;
var startDivClipLeft;
var nextDivClipRight;

function initDivPlace() {
    if (ns4) {
        for (i = 0; i &lt; displayImgAmount; i++) {
            eval("document.divOuter.document.divAds" + i + ".left = " + divWidth * i);
        }
        for (i = displayImgAmount; i &lt; imgArr.length; i++) {
            eval("document.divOuter.document.divAds" + i + ".left = " + divWidth * displayImgAmount);
        }
    } else {
        for (i = 0; i &lt; displayImgAmount; i++) {
            eval("document.all.divAds" + i + ".style.left = " + divWidth * i);
        }
        for (i = displayImgAmount; i &lt; imgArr.length; i++) {
            eval("document.all.divAds" + i + ".style.left = " + divWidth * displayImgAmount);
        }
    }
}

function mvStart() {
    timeID = setTimeout(moveLeftDiv, moveRelax);
}

function mvStop() {
    clearTimeout(timeID);
}

function moveLeftDiv() {
    if (ns4) {
        for (i = 0; i &lt;= displayImgAmount; i++) {
            eval("document.divOuter.document.divAds" + parseInt((startDnum + i) % imgArr.length) + ".left = document.divOuter.document.divAds" + parseInt((startDnum + i) % imgArr.length) + ".left - moveStep");
        }
        startDivClipLeft = parseInt(eval("document.divOuter.document.divAds" + startDnum + ".clip.left"));
        nextDivClipRight = parseInt(eval("document.divOuter.document.divAds" + nextDnum + ".clip.right"));
        if (startDivClipLeft + moveStep &gt; divWidth) {
            eval("document.divOuter.document.divAds" + nextDnum + ".clip.right = " + divWidth);
            eval("document.divOuter.document.divAds" + startDnum + ".left = " + divWidth * displayImgAmount);
            eval("document.divOuter.document.divAds" + parseInt((nextDnum + 1) % imgArr.length) + ".left = document.divOuter.document.divAds" + nextDnum + ".left + " + divWidth);
            eval("document.divOuter.document.divAds" + parseInt((nextDnum + 1) % imgArr.length) + ".clip.left = 0");
            startDnum = (++startDnum) % imgArr.length;
            nextDnum = (startDnum + displayImgAmount) % imgArr.length;
            startDivClipLeft = moveStep - (divWidth - startDivClipLeft);
            nextDivClipRight = moveStep - (divWidth - nextDivClipRight);
        } else {
            eval("document.divOuter.document.divAds" + nextDnum + ".clip.left = 0");
            startDivClipLeft += moveStep;
            nextDivClipRight += moveStep;
        }
        eval("document.divOuter.document.divAds" + startDnum + ".clip.left = " + startDivClipLeft);
        eval("document.divOuter.document.divAds" + nextDnum + ".clip.right = " + nextDivClipRight);
    } else {
        for (i = 0; i &lt;= displayImgAmount; i++) {
            eval("document.all.divAds" + parseInt((startDnum + i) % imgArr.length) + ".style.left = document.all.divAds" + parseInt((startDnum + i) % imgArr.length) + ".style.pixelLeft - moveStep");
        }
        startDivClipLeft = parseInt(eval("document.all.divAds" + startDnum + ".currentStyle.clipLeft"));
        nextDivClipRight = parseInt(eval("document.all.divAds" + nextDnum + ".currentStyle.clipRight"));
        if (startDivClipLeft + moveStep &gt; divWidth) {
            eval("document.all.divAds" + nextDnum + ".style.clip = 'rect(0, " + divWidth + ", " + divHeight + ", 0" + ")'");
            eval("document.all.divAds" + startDnum + ".style.left = " + divWidth * displayImgAmount);
            eval("document.all.divAds" + parseInt((nextDnum + 1) % imgArr.length) + ".style.left = document.all.divAds" + nextDnum + ".style.pixelLeft + " + divWidth);
            startDnum = (++startDnum) % imgArr.length;
            nextDnum = (startDnum + displayImgAmount) % imgArr.length;
            startDivClipLeft = moveStep - (divWidth - startDivClipLeft);
            nextDivClipRight = moveStep - (divWidth - nextDivClipRight);
        } else {
            startDivClipLeft += moveStep;
            nextDivClipRight += moveStep;
        }
        eval("document.all.divAds" + startDnum + ".style.clip = 'rect(0, " + divWidth + ", " + divHeight + ", " + startDivClipLeft + ")'");
        eval("document.all.divAds" + nextDnum + ".style.clip = 'rect(0, " + nextDivClipRight + ", " + divHeight + ", 0)'");
    }
    if (outHover) {
        mvStop();
    } else {
        mvStart();
    }
}

function writeDivs() {
    if (ns4) {
        document.write(" &lt;ilayer name = divOuter width = 750 height = " + divHeight + "&gt; ");
        for (i = 0; i &lt; imgArr.length; i++) {
            document.write(" &lt;layer name = divAds" + i + "&gt; ");
            document.write(imgArr[i] + "");
			document.write(" &lt;/layer&gt;");
        }
        document.write("&lt;/ilayer&gt; ");
        document.close();
        for (i = displayImgAmount; i &lt; imgArr.length; i++) {
            eval("document.divOuter.document.divAds" + i + ".clip.right = 0");
        }
    } else {
        document.write(" &lt;div id = divOuter style = 'position: relative'width = 750 height = " + divHeight + "&gt; ");
        for (i = 0; i &lt; imgArr.length; i++) {
            document.write(" &lt;div id = divAds" + i + " style = 'position: absolute;clip: rect(0, " + divWidth + ", " + divHeight + ", 0)'&gt; ");
            document.write(imgArr[i] + "");
            document.write(" &lt;/div&gt;")
        }
        document.write("&lt;/div&gt; ");
        for (i = displayImgAmount; i &lt; imgArr.length; i++) {
            eval("document.all.divAds" + i + ".style.clip = 'rect(0, 0, " + divHeight + ", 0)'");
        }
    }
}
    &lt;/script&gt;
&lt;/head&gt;
&lt;body onload=javascript:mvStart()&gt;
&lt;script type="text/javascript"&gt;
writeDivs(); initDivPlace();
&lt;/script&gt;
&lt;/body&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<head>

imgArr = new Array();

imgArr[0] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover = 'javascript:outHover = true'; onMouseout = 'javascript: outHover = false;mvStart()'><img src = /eWebEditor/UploadFile / 2005327204719938.gif border = 0> </a>";

imgArr[1] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725420.gif border = 0> </a>";

imgArr[2] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725360.gif border = 0> </a>";

imgArr[3] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725406.gif border = 0> </a>";

imgArr[4] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725266.gif border = 0> </a>";

imgArr[5] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725696.gif border = 0> </a>";

imgArr[6] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725993.gif border = 0> </a>";

imgArr[7] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726451.gif border = 0> </a>";

imgArr[8] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726631.gif border = 0> </a>";

imgArr[9] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726764.gif border = 0> </a>";

imgArr[10] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726655.gif border = 0> </a>";

var moveStep = 4; //步长，单位：pixel

var moveRelax = 100; //移动时间间隔，单位：ms

ns4 = (document.layers) ? true : false;

var displayImgAmount = 5; //视区窗口可显示个数

var divWidth = 88; //每块图片占位宽

var divHeight = 31; //每块图片占位高

var startDnum = 0;

var nextDnum = startDnum + displayImgAmount;

var timeID;

var outHover = false;

var startDivClipLeft;

var nextDivClipRight;

function initDivPlace() {

if (ns4) {

for (i = 0; i < displayImgAmount; i++) {

eval("document.divOuter.document.divAds" + i + ".left = " + divWidth * i);

}

for (i = displayImgAmount; i < imgArr.length; i++) {

eval("document.divOuter.document.divAds" + i + ".left = " + divWidth * displayImgAmount);

}

} else {

for (i = 0; i < displayImgAmount; i++) {

eval("document.all.divAds" + i + ".style.left = " + divWidth * i);

}

for (i = displayImgAmount; i < imgArr.length; i++) {

eval("document.all.divAds" + i + ".style.left = " + divWidth * displayImgAmount);

}

function mvStart() {

timeID = setTimeout(moveLeftDiv, moveRelax);

}

function mvStop() {

clearTimeout(timeID);

}

function moveLeftDiv() {

if (ns4) {

for (i = 0; i <= displayImgAmount; i++) {

eval("document.divOuter.document.divAds" + parseInt((startDnum + i) % imgArr.length) + ".left = document.divOuter.document.divAds" + parseInt((startDnum + i) % imgArr.length) + ".left - moveStep");

}

startDivClipLeft = parseInt(eval("document.divOuter.document.divAds" + startDnum + ".clip.left"));

nextDivClipRight = parseInt(eval("document.divOuter.document.divAds" + nextDnum + ".clip.right"));

if (startDivClipLeft + moveStep > divWidth) {

eval("document.divOuter.document.divAds" + nextDnum + ".clip.right = " + divWidth);

eval("document.divOuter.document.divAds" + startDnum + ".left = " + divWidth * displayImgAmount);

eval("document.divOuter.document.divAds" + parseInt((nextDnum + 1) % imgArr.length) + ".left = document.divOuter.document.divAds" + nextDnum + ".left + " + divWidth);

eval("document.divOuter.document.divAds" + parseInt((nextDnum + 1) % imgArr.length) + ".clip.left = 0");

startDnum = (++startDnum) % imgArr.length;

nextDnum = (startDnum + displayImgAmount) % imgArr.length;

startDivClipLeft = moveStep - (divWidth - startDivClipLeft);

nextDivClipRight = moveStep - (divWidth - nextDivClipRight);

} else {

eval("document.divOuter.document.divAds" + nextDnum + ".clip.left = 0");

startDivClipLeft += moveStep;

nextDivClipRight += moveStep;

}

eval("document.divOuter.document.divAds" + startDnum + ".clip.left = " + startDivClipLeft);

eval("document.divOuter.document.divAds" + nextDnum + ".clip.right = " + nextDivClipRight);

} else {

for (i = 0; i <= displayImgAmount; i++) {

eval("document.all.divAds" + parseInt((startDnum + i) % imgArr.length) + ".style.left = document.all.divAds" + parseInt((startDnum + i) % imgArr.length) + ".style.pixelLeft - moveStep");

}

startDivClipLeft = parseInt(eval("document.all.divAds" + startDnum + ".currentStyle.clipLeft"));

nextDivClipRight = parseInt(eval("document.all.divAds" + nextDnum + ".currentStyle.clipRight"));

if (startDivClipLeft + moveStep > divWidth) {

eval("document.all.divAds" + nextDnum + ".style.clip = 'rect(0, " + divWidth + ", " + divHeight + ", 0" + ")'");

eval("document.all.divAds" + startDnum + ".style.left = " + divWidth * displayImgAmount);

eval("document.all.divAds" + parseInt((nextDnum + 1) % imgArr.length) + ".style.left = document.all.divAds" + nextDnum + ".style.pixelLeft + " + divWidth);

startDnum = (++startDnum) % imgArr.length;

nextDnum = (startDnum + displayImgAmount) % imgArr.length;

startDivClipLeft = moveStep - (divWidth - startDivClipLeft);

nextDivClipRight = moveStep - (divWidth - nextDivClipRight);

} else {

startDivClipLeft += moveStep;

nextDivClipRight += moveStep;

}

eval("document.all.divAds" + startDnum + ".style.clip = 'rect(0, " + divWidth + ", " + divHeight + ", " + startDivClipLeft + ")'");

eval("document.all.divAds" + nextDnum + ".style.clip = 'rect(0, " + nextDivClipRight + ", " + divHeight + ", 0)'");

}

if (outHover) {

mvStop();

} else {

mvStart();

}

function writeDivs() {

if (ns4) {

document.write(" <ilayer name = divOuter width = 750 height = " + divHeight + "> ");

for (i = 0; i < imgArr.length; i++) {

document.write(" <layer name = divAds" + i + "> ");

document.write(imgArr[i] + "");

document.write(" </layer>");

}

document.write("</ilayer> ");

document.close();

for (i = displayImgAmount; i < imgArr.length; i++) {

eval("document.divOuter.document.divAds" + i + ".clip.right = 0");

}

} else {

document.write(" <div id = divOuter style = 'position: relative'width = 750 height = " + divHeight + "> ");

for (i = 0; i < imgArr.length; i++) {

document.write(" <div id = divAds" + i + " style = 'position: absolute;clip: rect(0, " + divWidth + ", " + divHeight + ", 0)'> ");

document.write(imgArr[i] + "");

document.write(" </div>")

}

document.write("</div> ");

for (i = displayImgAmount; i < imgArr.length; i++) {

eval("document.all.divAds" + i + ".style.clip = 'rect(0, 0, " + divHeight + ", 0)'");

}

</script>

</head>

writeDivs(); initDivPlace();

</script>

</body>

2025 年 7 月
一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复