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 相关文章推荐
AngularJs concepts详解及示例代码
Sep 01 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
React中的refs的使用教程
Feb 13 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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/01 无线电
处理php自动反斜杠的函数代码
2010/01/05 PHP
php注销代码(session注销)
2012/05/31 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python文件操作方法详解
2020/02/09 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
《乡下孩子》教学反思
2014/04/17 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
毕业典礼邀请函
2015/01/31 职场文书
经销商会议开幕词
2016/03/04 职场文书
PHP基本语法
2021/03/31 PHP
Python中glob库实现文件名的匹配
2021/06/18 Python