日历，轮播图，jq

Posted 2020-12-07 111wdh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了日历，轮播图，jq相关的知识，希望对你有一定的参考价值。

日历

.calendar { width: 210px; margin: 50px auto 0; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }

.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active h2 { }
.calendar .active p { font-weight: bold; }

.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }
</style>
</head>

<ul id="ul">
<li class="active" nn="1"><h2>1</h2><p>JAN</p></li>
<li nn="2"><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>

<div class="text">
<h2>1月活动</h2><p>这是1月活动内容</p>
</div>

</div>
</body>

方法1：window.onload=function ()
{
var y=document.getElementById(‘tab‘);
var a=y.getElementsByTagName(‘div‘)[0];
var l=y.getElementsByTagName(‘li‘);

var arr=[
‘这是一月活动内容‘,
‘这是二月活动内容‘,
‘这是三月活动内容‘,
‘这是四月活动内容‘,
‘这是五月活动内容‘,
‘这是六月活动内容‘,
‘这是七月活动内容‘,
‘这是八月活动内容‘,
‘这是九月活动内容‘,
‘这是十月活动内容‘,
‘这是十一月活动内容‘,
‘这是十二月活动内容‘
];

for(var i=0;i<l.length;i++)
{
l[i].index=i;
l[i].onmouseover=function ()
{
for(var i=0;i<l.length;i++)
{
l[i].className=‘‘;
}
this.className=‘active‘;
a.innerhtml=‘<h2>‘+(this.index+1)+‘月活动</h2><p>‘+arr[this.index]+‘</p>‘;
}
}
}

方法2：

window.onload=function(){
var y=document.getElementById("tab");
var x=y.getElementsByTagName("li");//获取tab下的所有li元素组成的数组
var z=y.getElementsByTagName("div");
for(i=0;i<x.length;i++){//遍历得到每个li元素数组
x[i].onmouseover=over;
x[i].onmouseout=out;
}

}
function over(){
this.className="active";
//获取自定义属性值时需要用js对象。getattribute（自定义属性名）；
//设置自定义属性值时
//js对象。getattribute（自定义属性名，自定义属性名）；
var nn=this.getAttribute("nn");
var con= "<h2>"+nn+"月活动</h2><p>这是"+nn+"月活动内容</p>"
var cla=document.getElementsByClassName("text")[0];
cla.innerHTML=con;
}
function out(){
this.className="";
}

轮播图

//图片路径存数组
var imgs=[
"img/img/1.jpg",
"img/img/2.jpg",
"img/img/3.jpg",
"img/img/4.jpg",
"img/img/5.jpg",
"img/img/6.jpg",
"img/img/7.jpg",
"img/img/8.jpg",
];
var index=0;
var g=document.getElementById("img");
function c(s){
//获取要切换的图片所对应的下标值
index=s.value-1;
//将img元素节点中的src属性改为要切换的图片路径
g.src=imgs[index];
}
function a(){
if(index==imgs.length-1){
index=0;//已经显示最后一张图了，下一张就是第一张图
}else{
index++;
}
g.src=imgs[index];
}
function up(){
if(index==0){
index=imgs.length-1;//已经第一张图了，上一张就是最后一张
}else{
index--;
}
g.src=imgs[index];
}
//开始自动轮播
var lunbo=null;//定义定时器
star();
function star(){
lunbo=setInterval(a,2000);
}
//停止定时器
function st(){
clearInterval(lunbo);
}

window.onload=function (){
//var p1=document.getElementById("p1").innerHTML;

console.log(p1);
}
$(function(){
var p1=$("#p1").html();
//获取文本对象:jq对象.html();
console.log(p1);
//var p2=$(".p2").eq(0).html();
var p2=$(".p2:first").html();
console.log(p2);
var p4=$("div").eq(0).html();
console.log(p4);
//获取属性中有href的元素
var p5=$("[href]").eq(0).html();
console.log(p5);
var p6=$("a[href=‘bai‘]").html();
console.log(p6);
//将id为p1的元素中的文本节点改成小红帽
$("#p1").html("小红帽");
})

$(function(){

$("#u").blur(function(){//失去焦点事件
var n=$("#u").val();
console.log(n);
});
//给id为p的元素value属性赋值
$("#p").val("qqq");
console.log($("#p").val());
//将div中字体的颜色改为蓝色
$("div:first").css("color","blue");
//给div设置多个值
$("div:first").css({
"width":"200px",
"height":"200px",
"background":"pink"
});
//获取div的背景色
var b=$("div:first").css("background");
console.log(b);
})

以上是关于日历，轮播图，jq的主要内容，如果未能解决你的问题，请参考以下文章