图像不会随着Javascript Image Slider滑动

时间：2014-07-15 05:34:13

标签： javascript jquery html css slider

我正在尝试为婚礼网站创建一个简单的图像滑块。我已经完成了html / css / javascript /。我已经下载了jQuery并将其链接到我的HTML上，但我的图片不会向左或向右滑动。

目前我只有4张图片，但想添加其他图片。两个问题：  1）为什么我的图像不能从左到右滑动。  2）我似乎无法让我的图像显示为完整，即使我在CSS中将我的宽度更改为100％在img或.gallery img中。 

**html:**

<!DOCTYPE HTML>
<HTML>
<head>
    <title>Sliding Gallery</title>
    <link href="wedgallery.css" rel="stylesheet">
    <script type = "text/javascript" "src=/js/jquery.js"></script>
    <script type = "text/javascript" "src=/js/script.js"></script>
</head>
<body>
    <div class="gallery-wrapper">
        <div class="gallery-mask">
            <ul class= "gallery-ul">
                <li class= "gallery-li">
                    <img class="gallery-img" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xfa1/t1.0-9/1374070_730708953622490_1010731455_n.jpg"/>
                </li>
                <li class= "gallery-li">
                    <img class="gallery-img" src="https://scontent-a-sea.xx.fbcdn.net/hphotos-xaf1/t1.0-9/10462601_10103161835358498_7988262285040821351_n.jpg"/>
                </li>
                <li class= "gallery-li">
                    <img class="gallery-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xfa1/t1.0-9/10403482_10103161834694828_1487443543209476811_n.jpg"/>
                </li>
                <li class= "gallery-li">
                    <img class="gallery-img" src="https://scontent-a-sea.xx.fbcdn.net/hphotos-xaf1/t1.0-9/10418946_575487062563825_5057353573068803390_n.jpg"/>
                </li>
            </ul>
        </div>

        <div class= "leftbttn">
            <div class= "leftbttn-inner">
            </div>
        </div>
        </div>

        <div class= "rightbttn">
            <div class= "rightbttn-inner">
            </div>
        </div>
    </div>  
</body>
</HTML>

**CSS:**

*
{
    margin:0px;
    padding:0px;
}

a img {
    border:none;

}
body {
    background:#666;
}

.gallery-wrapper {
    width:480px;
    height:360px;
    margin: 50px auto 0 auto;
    border: 3px solid #fff;
    position:relative;
}

.gallery-mask {
    width:480px;
    height:360px;
    overflow:hidden;
}

.gallery-ul {
    list-style-type: none;
    height:360px;
    width:auto;
}

.gallery-li {
    float:left;
    height:360px;
    width:480px;
}

.leftbttn {
    width:75px;
    height:360px;
    position:absolute;
    top:0px;
    left:0px;
    background: #666;
    opacity:0.2;

}

.rightbttn {
    width:75px;
    height:360px;
    position:absolute;
    top:50px;
    right:400px;
    background: #666;
    opacity:0.2;

}


.leftbttn:hover,
.rightbttn:hover {
    opacity:0.5;
}

.rightbttn-inner,
.leftbttn-inner {
    width:35px;
    height:80px;
    margin:140px auto 0 auto;


}

.leftbttn-inner {
    background-image: url('http://findicons.com/files/icons/2766/app_icons/26/arrow_left.png');
    background-repeat: no-repeat;
    background-position: 0px 30px;
}

.leftbttn-inner:hover {
    background-position: -35px 0;

}

.rightbttn-inner {
    background-image: url('http://findicons.com/files/icons/2766/app_icons/26/arrow_right.png');
    background-repeat: no-repeat;
    background-position: 0px 30px;
}

.rightbttn-inner:hover {
    background-position: -35px 0;
}

 **Javascript:**

var numImages = 0;

var currentImage = 1;

totalWidth = 0;

$(document).ready( function(){



    $('.gallery-li').each( function(){
        numImages++;
        totalWidth += 480;
    });

$('.gallery-ul').css('width' , totalWidth + 'px');

$('rightbttn').click( function(){
    moveLeft();
});

$('leftbttn').click( function(){
    moveRight();
});

});

function moveLeft() {
    if(currentImage < numImages)
    {
        $('.gallery-ul').animate( {'marginLeft' : '-=480px'} , 1000 , 'swing')
        currentImage++;
    }
}

function moveRight() {
    if(currentImage > 1)
    {
        $('.gallery-ul').animate( {'marginLeft' : '+=480px'} , 1000 , 'swing')
        currentImage--;
    }
}

2 个答案:

答案 0 :(得分：0)

代码中有小错误。  请参阅fiddle 

    $('.rightbttn').click(function() {
        moveLeft();
    });
    $('.leftbttn').click(function() {
        moveRight();
    });

答案 1 :(得分：0)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
var numImages = 0;
    var currentImage = 1;
    totalWidth = 0;
    $(document).ready(function() {



        $('.gallery-li').each(function() {
            numImages++;
            totalWidth += 480;
        });
        $('.gallery-ul').css('width', totalWidth + 'px');
        $('.rightbttn').click(function() {
            moveLeft();
        });
        $('.leftbttn').click(function() {
            moveRight();
        });
    });
    function moveLeft() {
        if (currentImage < numImages)
        {
            $('.gallery-ul').animate({'marginLeft': '-=480px'}, 1000, 'swing')
            currentImage++;
        }
    }

    function moveRight() {
        if (currentImage > 1)
        {
            $('.gallery-ul').animate({'marginLeft': '+=480px'}, 1000, 'swing')
            currentImage--;
        }
    }</script>
    <style>
     *
    {
        margin:0px;
        padding:0px;
    }

    a img {
        border:none;
    }
    body {
        background:#666;
    }

    .gallery-wrapper {
        width:1000px;
        height:500px;
        margin: 50px auto 0 auto;
        border: 3px solid #fff;
        position:relative;
    }

    .gallery-mask {
        width:1000px;
        height:500px;
        overflow:hidden;
    }

    .gallery-ul {
        list-style-type: none;
        height:360px;
        width:auto;
    }

    .gallery-li {
        float:left;
        height:360px;
        width:480px;
    }

    .leftbttn {
        width:75px;
        height:495px;
        position:absolute;
        top:0px;
        left:0px;
        background: #666;
        opacity:0.2;
    }

    .rightbttn {
        width:75px;
        height:495px;
        position:absolute;
        top:0px;
        left:925px;
        background: #666;
        opacity:0.2;
    }


    .leftbttn:hover,
    .rightbttn:hover {
        opacity:0.5;
    }

    .rightbttn-inner,
    .leftbttn-inner {
        width:35px;
        height:80px;
        margin:230px auto 0 auto;

    }

    .leftbttn-inner {
        background-image: url('http://findicons.com/files/icons/2766/app_icons/26/arrow_left.png');
        background-repeat: no-repeat;
        background-position: 0px 30px;
    }

    .leftbttn-inner:hover {
        background-position: - 35px 0;
    }

    .rightbttn-inner {
        background-image: url('http://findicons.com/files/icons/2766/app_icons/26/arrow_right.png');
        background-repeat: no - repeat;
        background-position: 0px 30px;
    }

    .rightbttn-inner:hover {
        background-position: -35px 0;
    }
    </style>
</head>

<body>
 <div class = "gallery-wrapper">
            <div class = "gallery-mask" >
                <ul class = "gallery-ul" >
                    <li class = "gallery-li" >
                        <img class="gallery-img" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xfa1/t1.0-9/1374070_730708953622490_1010731455_n.jpg"/>
                    </li>
                    <li class = "gallery-li" >
                        <img class="gallery-img" src="https://scontent-a-sea.xx.fbcdn.net/hphotos-xaf1/t1.0-9/10462601_10103161835358498_7988262285040821351_n.jpg"/>
                    </li>
                    <li class = "gallery-li" >
                        <img class="gallery-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xfa1/t1.0-9/10403482_10103161834694828_1487443543209476811_n.jpg"/>
                    </li>
                    <li class = "gallery-li" >
                        <img class="gallery-img" src="https://scontent-a-sea.xx.fbcdn.net/hphotos-xaf1/t1.0-9/10418946_575487062563825_5057353573068803390_n.jpg"/>
                    </li>
                </ul>
            </div>

            <div class = "leftbttn" >
                <div class = "leftbttn-inner" >
                </div>
            </div>


            <div class = "rightbttn" >
                <div class = "rightbttn-inner" >
                </div>
            </div>
        </div>  
        </body>
</html>

我希望它为你工作..？

相关问题
最新问题