纯javascript 幻灯片
2024-05-10 03:17:55
效果描述：就是图片变换，鼠标悬浮停滞，移开继续变换，图片带连接。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<script>var links = new Array(); //修改点1: 设置多少个链接 与下面的图片个数对应
links[1] = "http://blog.kpa7.net"; //广告图1 对应的超链接
links[2] = "http://blog.kpa7.net"; //广告图2 对应的超链接
links[3] = "http://blog.kpa7.net"; //广告图3 对应的超链接
links[4] = "http://blog.kpa7.net"; //广告图4 对应的超链接var imgs = new Array(); //修改点2: 设置图片个数for(var n = 1; n <= 5; n++) imgs[n] = new Image();imgs[1].src = "images/1.jpg"; //广告图片1
imgs[2].src = "images/2.jpg"; //广告图片2
imgs[3].src = "images/3.jpg"; //广告图片3
imgs[4].src = "images/4.jpg"; //广告图片4var tits = new Array(); //修改点3: 设置标题的个数 与上面的图片个数对应 因扒丢了标题样式 所以此处可忽略
tits[1] = "广告图片1 标题"; //图片1 标题
tits[2] = "广告图片2 标题"; //图片2 标题
tits[3] = "广告图片3 标题"; //图片3 标题
tits[4] = "广告图片4 标题"; //图片4 标题//修改点3: 设置图片显示的高度var imgwidth = 133; //图片宽度var imgheight = 200; //图片宽度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)' οnmοuseοver='Pause(true)' οnmοuseοut='Pause(false)'></a></div>";//修改点4：循环添加内层div内容以增加个数 与图片个数对应
str += "<div id='imgnv'><div id='it1' class='on' οnmοuseοver='ImgSwitch(1, true)' οnmοuseοut='Pause(false)'>1</div><div id='it2' class='off' οnmοuseοver='ImgSwitch(2, true)' οnmοuseοut='Pause(false)'>2</div><div id='it3' class='on' οnmοuseοver='ImgSwitch(3, true)' οnmοuseοut='Pause(false)'>3</div><div id='it4' class='off' οnmοuseοver='ImgSwitch(4, true)' οnmοuseοut='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++;//修改点5：这里的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>转载于:https://www.cnblogs.com/wanghaibin/articles/2983907.html
纯javascript 幻灯片相关推荐
- 动态分页展示效果（纯JavaScript编写，值得学习）
动态分页展示效果(纯JavaScript编写,值得学习) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 纯JavaScript实现弹出选择第几个单选按钮
为什么80%的码农都做不了架构师?>>> 纯JavaScript实现弹出选择第几个单选按钮 <div id="a" name="aa&quo ...
- 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作～
今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页: http://echarts.baidu.com/ 在首页有完整的 ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 3
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
- 原生态纯JavaScript 100大技巧大收集---你值得拥有
原生态纯JavaScript 100大技巧大收集---你值得拥有 1.原生JavaScript实现字符串长度截取 function cutstr(str, len) {var temp;var ico ...
- 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的. 故事要从Right Hemisphere说起,这是一家专业的企业级2D/3D模型浏览及转换的软件供应 ...
- mvc 两个控制器session 丢失_用纯 JavaScript 撸一个 MVC 程序
前言 我想用 model-view-controller 架构模式在纯 JavaScript 中写一个简单的程序,于是我这样做了.希望它可以帮你理解 MVC,因为当你刚开始接触它时,它是一个难以理解的 ...
- html拖拽模态框,可拖拽的谷歌样式纯javascript模态窗口插件
draggable-google-modal是一款可拖拽的谷歌样式纯javascript模态窗口插件.该模态窗口插件使用纯js编写,模态窗口可以任意进行拖动,并且模态窗口可以全屏放大,或左右对齐占据半 ...
- 纯Javascript实现Windows 8 Metro风格实现
Metro风格设计主要特点 1.Windows 8 Metro风格设计,实现网站或系统功能的导航 2.纯Javascript实现 3.支持所有IE.360.Chrome等常用浏览器 4.支持圆角.阴影 ...
最新文章
- 如何发布ActiveX 控件
- Android Virtual Device（AVD）屏幕大小调整
- boost::mp11::mp_replace_front相关用法的测试程序
- 数据结构-----二叉树，树，森林之间的转换
- nginx下面server配置
- 获得的经验：ActiveMQ，Apache Camel和连接池
- Android 应用开发（33）---Android程序签名打包
- 网易有道词典2019年度十大热词：Vlog、PUA等上榜
- 代码质量度量标准_Google研发度量改进实践
- 一个简单的适用于Vue的下拉刷新，触底加载组件
- 统计学习中常用的损失函数
- Activity intent经常使用的 FLAG 集合
- LOL暗影岛服务器维修,LOL各大区服务器的地点
- 这样投简历，HR一定会看
- 马云：中国企业不缺创新缺管理思想
- 基于李雅普诺夫函数的跟踪控制（一）
- Android原生拼音输入法分析
- 非常实用FPGA实现CRC校验介绍和代码生成工具
- java分页查询querymap_ES Java API_基于search template实现按品牌分页查询模板
- 实战第一步：市场调研