js实现百度联盟中一款不错的图片切换效果完整实例
更新时间：2015年03月04日 10:58:24 作者：代码家园
这篇文章主要介绍了js实现百度联盟中一款不错的图片切换效果的方法,以完整实例形式分析了javascript操作图片切换的技巧,需要的朋友可以参考下
本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
<html>
<title>js实现百度联盟中的一个不错的图片切换效果</title>
<body>
<script>
var links = new Array();
links[1] = "http://www.baidu.com/";
links[2] = "https://www.jb51.net/";
links[3] = "http://www.sohu.com/";
links[4] = "http://sc.jb51.net/";
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>
<title>js实现百度联盟中的一个不错的图片切换效果</title>
<body>
<script>
var links = new Array();
links[1] = "http://www.baidu.com/";
links[2] = "https://www.jb51.net/";
links[3] = "http://www.sohu.com/";
links[4] = "http://sc.jb51.net/";
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程序设计有所帮助。
相关文章
javascript设计模式 – 迭代器模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 迭代器模式原理与用法,结合实例形式分析了javascript迭代器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
在本篇文章里小编给大家分享了关于JavaScript禁用右键单击优缺点分析，有需要的朋友们学习下。2019-01-01
这篇文章主要介绍了关于微信公众号开发无法支付的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Javascript blur与click冲突解决办法的相关资料,在开发过程中经常会遇到blur与click 冲突的情况，这里举了几个例子，和解决办法，需要的朋友可以参考下2017-01-01
这篇文章主要带大家探讨一下JS装饰器以及装饰器在TS中的使用方式，文中有详细的代码示例，对装饰器不太了解的同学可以参考阅读本文学习了一下2023-07-07
这篇文章主要为大家详细介绍了微信小程序实现联动选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
为了让一个广告几秒以后再执行所以做个延迟加载的东东，用了JS实现，还蛮好用的，算是分享，也是记录吧。2010-07-07
这篇文章主要介绍了Js获取单选框radio的几种方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
建造者模式是设计模式的一种，将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。接下来通过本文给大家介绍JavaScript的设计模式经典之建造者模式，感兴趣的朋友一起学习吧2016-02-02
BootstrapValidator实现注册校验和登录错误提示效果
这篇文章主要为大家详细介绍了Bootstrap Validator实现注册校验和登录错误提示效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论