通过js写的一个比较简单的点击切换图片效果

时间：2016-01-10 15:29:35 阅读：183 评论：0 收藏：0 [点我收藏+]

function.js

// 查找第一个子节点（非空白）的时候过滤空格
// obj 查找的范围（类名/ID名）    
    function getFirst(obj){
         var First=obj.firstChild;
         if(First==null){
             return false;
         }
         while(First.nodeType==3){
        var First=First.nextSibling;
             if(First==null){
                 return false;
             }
             
         }
         return First;
         }
// 查找最后一个子节点的时候过滤空格
// obj 查找的范围（类名/ID名）
    function getLast(obj){
         var last=obj.lastChild;
         if(last==null){
             return false;
         }
         while(last.nodeType==3){
        var last=last.previousSibling;
             if(last==null){
                 return false;
             }
             
         }
         return last;
         }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0px;padding: 0px;
    }
    .out{
        width: 780px;height: 300px;border: 1px solid #ccc;margin:0 auto;
    }
    .window{
        width:690px;height: 280px;margin:0 auto;overflow: hidden;border: 1px solid black;margin-top: 10px;
    }
    .box{
        width: 1120px;height: 280px;border:1px solid green;list-style: none;margin-top: 10px;margin:0 auto;
    }
    .img{
        width: 220px;height: 250px;float:left;margin:12px 5px;text-align: center;line-height: 140px;
    }
    .img1{
        background:url(images/img1.jpg);
    }
    .img2{
        background:url(images/img2.jpg);
    }
    .img3{
        background:url(images/img3.jpg);
    }
    .img4{
        background:url(images/img4.jpg);
    }
    .img5{
        background:url(images/img5.jpg);
    }
    .img6{
        background:url(images/img6.jpg);
    }
    .left{
        position:absolute;width:40px;height: 40px;top:75px;left:200px;text-align: center;line-height: 30px;font-size: 50px;cursor: pointer;
    }
    .right{
        position:absolute;width:40px;height: 40px;top:75px;left:1142px;text-align: center;line-height: 30px;font-size: 50px;cursor: pointer;
    }
    </style>
    <script type="text/javascript" src="function.js"></script>
    <script type="text/javascript">
    window.onload=function(){
        var left=getClass(‘left‘)[0];
        var right=getClass(‘right‘)[0];
        var box=getClass(‘box‘)[0];
        left.onclick=function(){
            var first=getFirst(box);
            box.appendChild(first,getLast(box));
        }
        right.onclick=function(){
            var last=getLast(box);
            box.insertBefore(last,getFirst(box));
        }

    }
    
    
    </script>
</head>
<body>
    <div class="out">
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <div class="window">
            <ul class="box">
                <li class="img img1">1</li>
                <li class="img img2">2</li>
                <li class="img img3">3</li>
                <li class="img img4">4</li>
                <li class="img img5">5</li>
                <li class="img img6">6</li>
            </ul>
        </div>

    </div>
</body>
</html>

firstChild 属性返回指定节点的首个子节点，以 Node 对象。

lastChild 属性返回指定节点的最后一个子节点，以 Node 对象。

技术分享

通过js写的一个比较简单的点击切换图片效果

原文：http://www.cnblogs.com/miaomiao8899/p/5118399.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)