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程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
js验证是否为数字的总结
Apr 14 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
jquery选择器简述
Aug 31 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
JavaScript 去重和重复次数统计
Mar 31 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
You might like
谈一谈收音机的高放电路
2021/03/02 无线电
PHP 处理图片的类实现代码
2009/10/23 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
js中的闭包实例展示
2018/11/01 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
使用python加密自己的密码
2015/08/04 Python
json跨域调用python的方法详解
2017/01/11 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
幼儿园毕业园长感言
2014/02/24 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
django 认证类配置实现
2021/11/11 Python