如何通过移动到一个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>