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 相关文章推荐
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
一个简单的node.js界面实现方法
Jun 01 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
Vue实现简单计算器
Jan 20 Vue.js
在js中修改html body的样式
Nov 11 Javascript
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 Socket 编程
2010/04/09 PHP
PHP print类函数使用总结
2010/06/25 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
php事件驱动化设计详解
2016/11/10 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
用python登录Dr.com思路以及代码分享
2014/06/25 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
python插入排序算法实例分析
2015/07/03 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
高中教师考核方案
2014/05/18 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
科级干部培训心得体会
2016/01/06 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
Python基础之变量的相关知识总结
2021/06/23 Python
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏