管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

js实现百度联盟中一款不错的图片切换效果完整实例

　　本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法。分享给大家供大家参考。具体实现方法如下：

　　

复制代码 代码如下:
<html>

　　<title>js实现百度联盟中的一个不错的图片切换效果</title>

　　<body>

　　<script>

　　var links = new Array();

　　links[1] = "http://www.baidu.com/";

　　links[2] = "http://www.glzy8.com/";

　　links[3] = "http://www.sohu.com/";

　　links[4] = "http://sc.glzy8.com/";

　　var imgs = new Array();

　　for(var n = 1; n <= 5; n++) imgs[n] = new Image();

　　imgs[1].src = "images/m01.jpg";

　　imgs[2].src = "images/m02.jpg";

　　imgs[3].src = "images/m03.jpg";

　　imgs[4].src = "images/m04.jpg";

　　var tits = new Array();

　　tits[1] ="百度搜索";

　　tits[2] = "管理资源吧";

　　tits[3] = "搜狐主页";

　　tits[4] = "素材之家";

　　var imgwidth = 550;//图片宽度

　　var imgheight = 134;//图片宽度

　　var str = "<style type='text/css'>";

　　str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";

　　str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";

　　str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";

　　str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";

　　str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";

　　str += "</style>";

　　str += "<div style='position:relative'>";

　　str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";

　　//修改点1：循环添加内层div内容以增加个数

　　str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div><div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div><div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div><div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div></div>";

　　str += "<div id='titnv'><b>" + tits[1] + "</b></div>";

　　str += "</div>";

　　document.write(str);

　　var oi = document.getElementById("dimg");

　　var pause = false;

　　var curid = 1;

　　var lastid = 1;

　　var sw = 1;

　　var opacity = 100;

　　var speed = 15;

　　var delay = (document.all)? 400:700;

　　function SetAlpha(){

　　if(document.all){

　　if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;

　　}else{

　　oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;

　　}

　　}

　　function ImgSwitch(id, p){

　　if(p){

　　pause = true;

　　opacity = 100;

　　SetAlpha();

　　}

　　oi.src = imgs[id].src;

　　document.getElementById("dlink").href = links[id];

　　document.getElementById("it" + lastid).className = "off";

　　document.getElementById("it" + id).className = "on";

　　document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";

　　curid = lastid = id;

　　}

　　function ScrollImg(){

　　if(pause && opacity >= 100) return;

　　if(sw == 0){

　　opacity += 2;

　　if(opacity > delay){ opacity = 100; sw = 1; }

　　}

　　if(sw == 1){

　　opacity -= 3;

　　if(opacity < 10){ opacity = 10; sw = 3; }

　　}

　　SetAlpha();

　　if(sw != 3) return;

　　sw = 0;

　　curid++;

　　//修改点2：这里的4也是个数

　　if(curid > 4) curid = 1;

　　ImgSwitch(curid, false);

　　}

　　function Pause(s){

　　pause = s;

　　}

　　function StartScroll(){

　　setInterval(ScrollImg, speed);

　　}

　　function CheckLoad(){

　　if (imgs[1].complete == true && imgs[2].complete == true) {

　　clearInterval(checkid);

　　setTimeout(StartScroll, 2000);

　　}

　　}

　　var checkid = setInterval(CheckLoad, 10);

　　</script>

　　</body>

　　</html>

　　希望本文所述对大家的javascript程序设计有所帮助。

教程首页 更多教程