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判断单个复选框是否被选中的代码
Sep 03 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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
PHP操作MySQL事务实例
2014/11/05 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
jquery中event对象属性与方法小结
2013/12/18 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Django自定义分页效果
2017/06/27 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python函数参数操作详解
2018/08/03 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
2015圣诞节贺卡寄语
2015/03/24 职场文书
员工家属慰问信
2015/03/24 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书