JS焦点图,JS 多个页面放多个焦点图的实例


Posted in Javascript onDecember 08, 2016

如下所示:

<!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>
<title>js同一页面可多次调用的图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<script language="javascript">
//声明命名空间
var $o = new Object();
//基础方法
$o.base = {
e:function(a,f){
for(var i=0,j=a.length;i<j;i++){f.call(a[i],i);}
}
}
$o. slide = function (id,arg){
var arg = arg||{},
t = document.getElementById(id),
a = t.getElementsByTagName("a"),
lis = [],
cl = arg.color||'#f30',
ctm = arg.time*1000||2000,
w = t.clientWidth,
h = t.clientHeight,
b = ['<ul style="margin:0; padding:0; list-style:none; display:block; position:absolute; bottom:10px; right:10px;">'],
index = 0,
$ = null,
$ = null;
function change(i){
if(!!$){clearTimeout($);}
index = !isNaN(i)?i:index+1;
if(index >= a.length){index = 0;}
$o.base.e(lis,function(k){if(k == index){c(1,this);}else{c(0,this)}});
var to = - index*h;
if(a[0].offsetTop == to){
return;
}else{
if(!!$){clearInterval($);}
$ = setInterval(function(){
var ot = a[0].offsetTop;
v = Math[to<ot?'floor':'ceil']((to - ot)*0.2);
if(ot == to){clearInterval($);$=null;st();}
ot += v;
a[0].style.marginTop = ot + "px";
},30)
};
}
function c(b,o){
o.style.backgroundColor = !!b?cl:"#fff";
o.style.color = !!b?"#fff":cl;
}
function st(){
if(!!$)clearTimeout($);
$ = setTimeout(function(){change()},ctm);
}
with(t.style){overflow = 'hidden';position = 'relative';}
$o.base.e(a,function(n){
this.style.display = "block";
with(this.firstChild.style){borderWidth = '0';width = w + 'px';height = h + 'px';}
b.push('<li style="width:20px; height:20px; line-height:20px; display:block; float:left; margin-left:5px; border:1px solid ' + cl + '; background-color:#fff; color:' + cl +'; font-size:14px; text-align:center; cursor:pointer;">' + (n+1) + '</li>');
});
b.push('</ul>');
t.innerHTML += b.join("");
lis = t.getElementsByTagName("li");
$o.base.e(lis,function(n){
if(n == index){c(1,this)}
this.onmouseover = function(){
if(n!=index)change(n);
}
});
st();
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="aa" style="width:402px;height:228px;">
<a href="javascript:alert('1')"><img src="/images/1.jpg"></a>
<a href="javascript:alert('2')"><img src="/images/2.jpg"></a>
<a href="javascript:alert('3')"><img src="/images/3.jpg"></a>
<a href="javascript:alert('4')"><img src="/images/4.jpg"></a>
<a href="javascript:alert('5')"><img src="/images/5.jpg"></a>
<a href="javascript:alert('6')"><img src="/images/6.jpg"></a>
<a href="javascript:alert('7')"><img src="/images/7.jpg"></a>
<a href="javascript:alert('8')"><img src="/images/8.jpg"></a>
<a href="javascript:alert('9')"><img src="/images/9.jpg"></a>
</div>
<script language="javascript">
new $o.slide("aa");
</script>
<br>
<div id="bb" style="width:402px;height:228px;">
<a href="###"><img src="/images/1.jpg"></a>
<a href="###"><img src="/images/2.jpg"></a>
<a href="###"><img src="/images/3.jpg"></a>
<a href="###"><img src="/images/4.jpg"></a>
<a href="###"><img src="/images/5.jpg"></a>
</div>
<script language="javascript">
new $o.slide("bb",{color:'#000',time:0.2});
</script>
<br>
<div id="cc" style="width:402px;height:228px;">
<a href="###"><img src="/images/1.jpg"></a>
<a href="###"><img src="/images/2.jpg"></a>
<a href="###"><img src="/images/3.jpg"></a>
<a href="###"><img src="/images/4.jpg"></a>
<a href="###"><img src="/images/5.jpg"></a>
</div>
<script language="javascript">
new $o.slide("cc",{color:'green'});
</script>
</body>
</html>

以上这篇JS焦点图,JS 多个页面放多个焦点图的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
使用js画图之画切线
Jan 12 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 #Javascript
浅谈Node.js:理解stream
Dec 08 #Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 #Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 #Javascript
You might like
劣质的PHP代码简化
2010/02/08 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
php图片裁剪函数
2018/10/31 PHP
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
JavaScript实现百度搜索框效果
2020/03/26 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Django获取应用下的所有models的例子
2019/08/30 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python截图并保存的具体实例
2021/01/14 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
优秀经理获奖感言
2014/03/04 职场文书
公益广告标语
2014/06/19 职场文书
个人租房协议书范本
2014/09/30 职场文书
写好求职信的技巧解密
2019/05/14 职场文书