编程 Javascript

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

Posted in Javascript onMarch 04, 2015

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

<html>

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

<body>

<script>

var links = new Array();

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

links[2] = "https://3water.com/";

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

links[4] = "http://sc.3water.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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery对表单元素的取值和赋值操作代码

May 19 Javascript

图片img的src不变让浏览器重新加载实现方法

Mar 29 Javascript

js实现的标题栏新消息闪烁提示效果

Jun 06 Javascript

JavaScript在浏览器标题栏上显示当前日期和时间的方法

Mar 19 Javascript

jQuery根据表单name获取值的方法

May 24 Javascript

sso跨域写cookie的一段js脚本(推荐)

May 25 Javascript

jQuery zTree树插件动态加载实例代码

May 11 jQuery

详谈js的变量提升以及使用方法

Oct 06 Javascript

antd组件Upload实现自己上传的实现示例

Dec 18 Javascript

node学习笔记之读写文件与开启第一个web服务器操作示例

May 29 Javascript

微信小程序实现滚动Tab选项卡

Nov 16 Javascript

Html5生成验证码的示例代码

May 10 Javascript

jQuery中大家不太了解的几个方法

Mar 04 #Javascript

深入理解JavaScript系列（48）：对象创建模式（下篇）

Mar 04 #Javascript

js计算德州扑克牌面值的方法

Mar 04 #Javascript

深入理解JavaScript系列（47）：对象创建模式（上篇）

Mar 04 #Javascript

深入理解JavaScript系列（46）：代码复用模式（推荐篇）详解

Mar 04 #Javascript

深入理解JavaScript系列（45）：代码复用模式（避免篇）详解

Mar 04 #Javascript

深入理解JavaScript系列（44）：设计模式之桥接模式详解

Mar 04 #Javascript