用js同时封装两个函数，任意调用不同格式选项卡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.tab{
width: 500px;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.tab ul{
width: 1500px;
transition: 1s;
}
.tab ul li{
width: 500px;
height: 300px;
float: left;
}
.tab ul li a img{
width: 500px;
height: 300px;
}
.tab ol{
width:100px;
height:30px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -50px;
}
.tab ol li{
width: 30px;
height: 30px;
border-radius: 50%;
background: #ccc;
text-align: center;
line-height: 30px;
color: white;
float: left;
}
.tab ol li:nth-child(2){
margin: 0 5px;
}
#tab2{
margin: 100px auto;
}
</style>
</head>
<body>
<div class="tab" id="tab1">
<ul>
<li>
<a href="#">
<img src="http://img30.360buyimg.com/da/jfs/t3010/117/1247129827/102990/6ec92bc2/57bff0bbNd1783dfb.jpg" >
</a>
</li>
<li>
<a href="#">
<img src="http://img12.360buyimg.com/da/jfs/t3238/307/803476145/91935/92abfeb6/57bfb9a5N61f5f9c6.jpg" >
</a>
</li>
<li>
<a href="#">
<img src="http://img14.360buyimg.com/da/jfs/t3121/2/810787436/77310/8ee6536b/57bfb9dfN0089bba2.jpg" >
</a>
</li>
</ul>
<ol>
<li style="background:red">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="tab" id="tab2">
<ul>
<li>
<a href="#">
<img src="http://img30.360buyimg.com/da/jfs/t3010/117/1247129827/102990/6ec92bc2/57bff0bbNd1783dfb.jpg" >
</a>
</li>
<li>
<a href="#">
<img src="http://img12.360buyimg.com/da/jfs/t3238/307/803476145/91935/92abfeb6/57bfb9a5N61f5f9c6.jpg" >
</a>
</li>
<li>
<a href="#">
<img src="http://img14.360buyimg.com/da/jfs/t3121/2/810787436/77310/8ee6536b/57bfb9dfN0089bba2.jpg" >
</a>
</li>
</ul>
<ol>
<li style="background:red">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</body>
<script>
function $(x){
return document.querySelector(x);
}
function $s(x){
return document.querySelectorAll(x);
}
function tab(id,type){
if(type=="动画1"){
var btns=$s(id+" ol li");
var pics=$s(id+" ul li");
var picbox=$(id+" ul");
var btnsbox=$(id+" ol");
var length=btns.length;
picbox.style.position="relative";
for(i=0;i<length;i++){
btns[i].index=i;
pics[i].style.position="absolute";
pics[i].style.transition = "1.5s";
pics[i].style.top="0";
pics[i].style.left="0";
btns[i].onclick=function(){
for(i=0;i<length;i++){
btns[i].style.backgroundColor="";
pics[i].style.opacity= 0;
}
btns[this.index].style.backgroundColor="red";
pics[this.index].style.opacity= 1;
}
}
}
else if(type=="动画2") {
var btns=$s(id+" ol li");
var picbox=$(id+" ul");
var length=btns.length;
for(i=0;i<length;i++){
btns[i].index=i;
btns[i].onclick=function(){
for(i=0;i<length;i++){
btns[i].style.backgroundColor="";
}
picbox.style.marginLeft=-500*this.index+"px";
btns[this.index].style.backgroundColor="red";
}
}
}
}
tab("#tab1","动画1")
tab("#tab2","动画2");
</script>
</html>

时间： 2025-01-15 06:23:17

用js同时封装两个函数，任意调用不同格式选项卡的相关文章

在JS中，一个自定义函数如何调用另一个自定义函数中的变量

function aa1511() { var chengshi="马鞍山"; var shengfen="安徽省"; return shengfen+"@"+chengshi; } function xialachaxun() { var hanshu=aa1511().split("@"); alert(hanshu[0]+','+hanshu[1]); }

Unity中Awake与Start函数的调用情况总结(转)

在Unity中编写脚本时,有一系列的可重写(override)函数供我们使用,其中的Awake与Start两个函数作为初始化与设置之用,几乎在每个脚本中都要用到.因此,正确的把握这两个函数的调用时机,就能让我们在程序开发过程中避免一些错误,提高开发效率.比较懒,所以就没有上图,欢迎大家的批评指正: ) 1.  Awake函数 首先,我们来看unity的参考手册中对Awake函数的一些说明情况: 当脚本实例被加载时会调用Awake函数:Awake函数在所有的游戏对象被初始化完毕之后才会被调用:在脚

JS封装cookie操作函数实例(设置、读取、删除)

本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /*设置cookie*/ function setCookie(name, value, iDay) {   var oDate=new Date();   oDate.setDate(oDate.getDate()+iDay);   document.cook

js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别

js中有两种声明函数的方法,分别为: var functionOne = function() { // Some code }; function functionTwo() { // Some code } 为什么会有两种不同的方法?每个方法的优点和缺点分别是什么?有什么情况是一种方法能完成而另外一种方法不能完成的吗? 答: by @Greg 不同点在于functionOne只会在到达赋值的那一行才会被真正定义,而functionTwo会在 包含它的函数或script脚本 执行的时候马上被定

关于js的两个函数

注:这两个函数结合其他主要实现异步的默认checkbox选中和其他选中,关键点在于,从php页面穿过来已经选中的值:function assign(id,go_ids){ if(id > 0){ //var content = jQuery('#assign_'+id).html(); if(go_ids) { jQuery.each(go_ids, function(key,val){ jQuery('#goods_'+val).attr('checked', true); }); } jQu

js原生：封装document.getElementByClassName()函数

//接口封装:封装document.getElementByClassName()函数function getElementsByClassName (cName,domTag,root) {//该函数有三个参数:第一个参数是class名(必选,字串形式):第二个参数是父容器(可选),默认为body节点:第三个参数是该DOM节点的标签名(字串形式)    if (root) {        root = typeof root == "string" ? document.getEl

js创建对象的两种方法：文本标识法和构造器函数法

文本标识法和定义变量差不多,像这样 var obj = {name:'HanMM','2':'Dali'}; 函数构造器法  先创建一个对象函数 function Obj() { this.address='New York' , this.sayHello = function (){ return this.address; } } 然后用new关键字来穿件具体的对象 var obj001 = new Obj(); 然后我们就可以调用对象了 obj.name//  HanMM obj['2'

js 封装一个动画函数

//动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function carToon(element, target) { //设置一个定时器让他循环去增加 element.timeid = setInterval(function () { //拿到当前的位置(纯数字) var current = element.offsetLeft; //每次要移动的像素current var step = 10; //注意 这里是判断到底往那边走 如果当前的位

跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现,现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可. 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问