如何通过移动到一个li上，改变另一个元素的文本内容，可以自定义属性。
自定义属性的设定:1是 先获取自定义属性的值：var 值=元素节点.getAtribute("自定义属性名“）2:设置自定义属性值：元素节点.setAttribute("自定义属性名","自定义属性值"）
设置鼠标放在li上，和移走li时，可以这样设置属性。.className="active";.className="";
具体如下：<script>
function over(obj){
//鼠标放在li上，让当前元素的class="active
obj.className="active";
//获取自定义属性nn的值：var 值=元素节点。getAtrribute(“自定义属性名”)
//设置自定义属性值：
//元素节点.setAtrrribute(‘自定义属性名“，”自定以属性值“)
//获取自定义属性nn的值
var nn=obj.getAttribute("nn");
//获取div元素
var dd=document.getElementsByClassName("text")[0];
//设置文本内容
var content="<h2>"+nn+"月活动</h2><p>这是"+nn+"月活动内容</p>"
//修改div文本节点
dd.innerHTML=content;
}
function out(obj){
//当鼠标从li移走时，让当前元素的class=“”
obj.className="";
}
</script>
还有一种简单的方法;将obj改为this.可以省略添加繁多的onMouseover等事件。
具体如下：是通过获取每一个父元素的子元素。然后用循环添加所需要修改的东西。
<script>
function over(){
//鼠标放在li上，让当前元素的class="active
this.className="active";
//获取自定义属性nn的值：var 值=元素节点。getAtrribute(“自定义属性名”)
//设置自定义属性值：
//元素节点.setAtrrribute(‘自定义属性名“，”自定以属性值“)
//获取自定义属性nn的值
var nn=this.getAttribute("nn");
//获取div元素
var dd=document.getElementsByClassName("text")[0];
//设置文本内容
var content="<h2>"+nn+"月活动</h2><p>这是"+nn+"月活动内容</p>"
//修改div文本节点
dd.innerHTML=content;
}
function out(){
//当鼠标从li移走时，让当前元素的class=“”
this.className="";
}
window.onload=function(){
//获取id时tab的div
var dd=document.getElementById("tab");
//获取idv下的所有li的元素
var lis=dd.getElementsByTagName("li");
//遍历数组得到每一个li的元素节点
for(var i=0;i<lis.length;i++){
lis[i].onmousemove=over;
lis[i].onmouseout=out;
}
}
</script>
很多网页的一种效果可以通过css的dispiay,与js的添加事件相结合组成。也就是说通过行内元素与块状元素的相互转化来实现效果。
具体图下：<style>
#d1{
200px;
height: 200px;
background: red;
}
#d2{
200px;
height: 200px;
background: blue;
display: none;
}
</style>
<script>
function over(){
//获取蓝色div
var dd=document.getElementById("d2");
//让蓝色div显示
dd.style.display="block";
}
function out(){
//获取蓝色div
var dd=document.getElementById("d2");
//让蓝色div显示
dd.style.display="none";
}
onkeyup指按下某个按键时触发。onchange文本框失去焦点守内容改变触发。onsubmit单机提交按钮时在表单form时触发。onfocus任何元素或窗口获得焦点时触发。onblur任何元素或窗口失去焦点时触发。
如何制作轮播图。先获取每一张图片的路径，再将他们存到数组中，在获取被点击按钮的VALUE值，在将图片路径改为下标的值，用if语句将第一张与最后一张分别定义。在设置定时器，鼠标放上定时器消失，移走定时器恢复。具体如下。
<script type="text/javascript">
var index=0;
var arr;
var img;
var timer;
window.onload=function(){
//先将8张图片路径存到数组中
arr=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg"];
img=document.getElementById("image");
//设置定时器（每个2秒调用next方法）
timer=setInterval(next,2000);
}
//切换图片
function changeImg(obj){
//获取当前被点击按钮的value值（对应要切换图片的下标）
index=obj.value;
//将图片路径改为对应下标的值；
img.src=arr[index];
}
//下一张
function next(){
//如果当前一页时第一张图片下标
if(index==arr.length-1){
index=0;
}else{
//否则，就是下一站图片下标
index++;
}
img.src=arr[index];
}
//上一张
function up(){
if(index==0){
index=arr.length-1;
}else{
index--;
}
img.src=arr[index];
}
//当鼠标放在图片标签图片上时触发
function over(){
//清除定时器
clearInterval(timer);
}
//当鼠标从图片标签上移走时触发
function out(){
//设置定时器
timer=setInterval(next,2000);
}
</script>
简单方法：
<script type="text/javascript">
var index=0;
var arr;
var img;
var timer;
window.onload=function(){
//先将8张图片路径存到数组中
arr=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg"];
img=document.getElementById("image");
//获取所有class="btn"的按钮元素组成的数组
var btns=document.getElementsByClassName("btn");
//遍历数组得到每一个元素
for(var i=0;i<btns.length;i++){
//添加点击事件
btns[i].onclick=changeImg;
}
//给图片标签添加鼠标
img.onmouseover=over;
img.onmouseout=out;
//设置定时器（每个2秒调用next方法）
timer=setInterval(next,2000);
}
//切换图片
function changeImg(){
//获取当前被点击按钮的value值（对应要切换图片的下标）
index=this.value;
//将图片路径改为对应下标的值；
img.src=arr[index];
}
//下一张
function next(){
//如果当前一页时第一张图片下标
if(index==arr.length-1){
index=0;
}else{
//否则，就是下一站图片下标
index++;
}
img.src=arr[index];
}
//上一张
function up(){
if(index==0){
index=arr.length-1;
}else{
index--;
}
img.src=arr[index];
}
//当鼠标放在图片标签图片上时触发
function over(){
//清除定时器
clearInterval(timer);
}
//当鼠标从图片标签上移走时触发
function out(){
//设置定时器
timer=setInterval(next,2000);
}
</script>