javascript 生成页面轮播元素
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>生成轮播图片</title>
</head>
<body>
<div style="width:287px; height:248px; border:solid 1px #cecece;background:#F3F3F3; padding:6px; ">
<script language="javascript" type="text/javascript">
var widths = 600; //宽
var heights = 600; //高
var counts = 3; //显示的数量
img1 = new Image(); img1.src = '../images/slide-01.jpg'; //图片地址
img2 = new Image(); img2.src = '../images/slide-02.jpg';
img3 = new Image(); img3.src = '../images/slide-03.jpg';
url1 = new Image(); url1.src = 'http://URL?action-viewnews-itemid-2439'; //图片链接的URL
url2 = new Image(); url2.src = 'http://URL/?action-viewnews-itemid-2386-page-1';
url3 = new Image(); url3.src = 'http://URL/?action-viewnews-itemid-2384-page-4';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) { key = 1; }
else if (document.all)
{ document.getElementById("pic").filters[0].Apply(); document.getElementById("pic").filters[0].Play(duration = 2); }
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("url").href=url' + nn + '.src');
for (var i = 1; i <= counts; i++) { document.getElementById("xxjdjj" + i).className = 'axx'; }
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++; if (nn > counts) { nn = 1; }
tt = setTimeout('change_img()', 2000);
}
function changeimg(n) { nn = n; window.clearInterval(tt); change_img(); }
document.write('<style>');
document.write('.axx{padding:1px 7px;border-left:#ffffff 1px solid;font-weight: bold;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');
document.write('.bxx{padding:1px 7px;border-left:#ffffff 1px solid;font-weight: bold;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;background-color:#ff0000;font-weight: bold;}');
document.write('</style>');
document.write('<div style="width:' + widths + 'px;height:' + heights + 'px;overflow:hidden;text-overflow:clip;">');
document.write('<div><a id="url" target="_blank"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width=' + widths + ' height=' + heights + ' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #000000;width:100%-2px;text-align:right;top:-14px;position:relative;margin:1px;height:20px;padding:0px;margin:0px;border:0px;">');
for (var i = 1; i < counts + 1; i++) { document.write('<a href="javascript:changeimg(' + i + ');" id="xxjdjj' + i + '" class="axx" target="_self">' + i + '</a>'); }
document.write('</div></div>');
change_img();
</script>
</div>
</body>
</html>
原文转载:http://jilo88.iteye.com/blog/702619
javascript 生成页面轮播元素的更多相关文章
- 帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit
来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript实现动态轮播图效果
功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...
- JavaScript实现图片轮播组件
效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...
- swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- 用JavaScript制作banner轮播图
JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...
- JavaScript实现简单轮播图动画
运行效果: 源代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...
- html+css+javascript实现简易轮播图片
html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
随机推荐
- Windows系统中使用WMI获取远程服务器的信息
使用WMI获取远程服务器的状态 我做的项目里边主要包含两个内容: (1)对发布在服务器上的服务(IIS服务.WCF服务)是否可以正常访问: (2)获取服务器上的部分指标:如CPU.内存.磁盘空间信息等 ...
- 200常用JS
.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 &l ...
- jQuery常用效果
1.滑动效果 向上效果:slideUp() 向下效果:slideDown() 向上与向下切换:slideToggle() 2.淡入淡出效果 显示与隐藏切换:fadeToggle() 3.显示隐藏 显示 ...
- python自学笔记(十)语句与数据结构应用
1.最基本的迭代 for x in y 2.如何迭代字典 for x,y in a.items(): print:x,y 3.如何为字典排序 key_list = a.keys() key_list. ...
- [HDU 4666]Hyperspace[最远曼哈顿距离][STL]
题意: 许多 k 维点, 求这些点之间的最远曼哈顿距离. 并且有 q 次操作, 插入一个点或者删除一个点. 每次操作之后均输出结果. 思路: 用"疑似绝对值"的思想, 维护每种状态 ...
- CodeForces 448
A:Rewards: 题目链接:http://codeforces.com/problemset/problem/448/A 题意:Bizon有a1个一等奖奖杯,a2个二等奖奖杯,a3个三等奖奖杯,b ...
- EnumMap源代码阅读器
EnumMap是一个用于存放键值为enum类型的map.全部的键值必须来自一个单一的enum类型.EnumMap内部用数组表示效率更高. EnumMap维持键值的自然顺序(即枚举类型常量声明的顺序), ...
- Spark调研笔记第2篇 - 怎样通过Sparkclient向Spark提交任务
在上篇笔记的基础上,本文介绍Sparkclient的基本配置及Spark任务提交方式. 1. Sparkclient及基本配置 从Spark官网下载的pre-built包中集成了Sparkclient ...
- HTML之标签
一.HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag). •HTML 标签是由尖括号包围的关键词,比如 <html> •HTML 标签通常是成对出现的,比如 ...
- BZOJ 4260: Codechef REBXOR( trie )
求出前缀和, 那么以第x个元素结尾的最大异或值是max(sumx^sump)(1≤p<x), 用trie加速. 后缀同理, 然后扫一遍就OK了.时间复杂度O(31N) ------------- ...