js首页图片切换

最新推荐文章于 2021-06-04 05:32:55 发布

最新推荐文章于 2021-06-04 05:32:55 发布 · 73 阅读

文章标签：

#javascript #ViewUI

本文提供了一段实现图片轮播效果的HTML和JavaScript代码。该代码通过预加载图片并使用定时器实现图片的自动切换，并且支持手动选择不同的图片。样式表定义了组件的外观，包括透明度和边框效果。

.js_picshow { z-index:444; position:relative; background-color:#e4f2fa; width: 100%; height: 250px}

.js_picshow_main { position: relative; width: 690px; height: 250px}

.js_picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 690px; height: 250px}

.js_picshow_change {position: absolute; text-align: left; bottom: -183px; height: 30px; left: 570px;}

.js_picshow_change img {width:15px; height: 15px}

.js_picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline}

a.js_axx { border-color: #555}

a.js_axx:hover {border-color: #000}

a.js_axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}

a.js_axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}

a.js_bxx { border-color: #000}

a.js_bxx:hover {border-color: #000}

img{

border:0px}

</style>

//图片滚动展示 Start

var counts = 3;

//大图//

img1 = new Image();

img1.src = 'http://www.g4qq.com/skin/frontend/default/hellowired/images/media/z1.gif';

img2 = new Image();

img2.src = 'http://www.g4qq.com/skin/frontend/default/hellowired/images/media/z2.gif';

img3 = new Image();

img3.src = 'http://www.g4qq.com/skin/frontend/default/hellowired/images/media/z3.gif';

var smallImg = new Array();

//小图

smallImg[0] = 'http://www.g4qq.com/skin/frontend/default/hellowired/images/media/index_adb1.gif';

smallImg[1] = 'http://www.g4qq.com/skin/frontend/default/hellowired/images/media/index_adb2.gif';

smallImg[2] = 'http://www.g4qq.com/skin/frontend/default/hellowired/images/media/index_adb3.gif';

//链接地址

url1 = new Image();

url1.src = 'http://www.jz123.cn/';

url2 = new Image();

url2.src = 'http://ziti.jz123.cn';

url3 = new Image();

url3.src = 'http://ziti.jz123.cn';

//alt值

alt1 = new Image();

alt1.alt = '现在购买虚拟主机免费开通在线客服功能（渠道除外）';

alt2 = new Image();

alt2.alt = '建站普及风暴，圣诞元旦礼上礼';

alt3 = new Image();

alt3.alt = '冬日暖阳年度双薪';

////欢迎来到标准之路.

var nn = 1;

var key = 0;

function change_img() {

if (key == 0) {

key = 1;

} else if (document.all) {

document.getElementById("pic").filters[0].Apply();

document.getElementById("pic").filters[0].Play(duration = 2);

}

eval('document.getElementById("pic").src=img' + nn + '.src');

eval('document.getElementById("url").href=url' + nn + '.src');

eval('document.getElementById("pic").alt=alt' + nn + '.alt');

if (nn == 1) {

document.getElementById("url").target = "_blank";

document.getElementById("url").style.cursor = "pointer";

} else {

document.getElementById("url").target = "_blank"

document.getElementById("url").style.cursor = "pointer"

}

for ( var i = 1; i <= counts; i++) {

document.getElementById("xxjdjj" + i).className = 'js_axx';

}

document.getElementById("xxjdjj" + nn).className = 'bxx';

nn++;

if (nn > counts) {

nn = 1;

}

tt = setTimeout('change_img()', 4000);

}

function changeimg(n) {

nn = n;

window.clearInterval(tt);

change_img();

}

function ImageShow() {

document.write('<div class="js_picshow_main">');

document.write('<div><a id="url"><img id="pic" class="imgbig" style="width:640px;height:426px;"/></a></div>');

document.write('<div class="js_picshow_change">');

for ( var i = 0; i < counts; i++) {

document.write('<a href="javascript:changeimg(' + (i + 1)

+ ');" id="xxjdjj' + (i + 1)

+ '" class="js_axx" target="_self"><img src="' + smallImg[i]

+ '"></a>');

}

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

change_img();

}

//图片滚动展示 End

</SCRIPT>

ImageShow();

</SCRIPT>