图像不会使用 Javascript Image Slider 滑动答案

【问题标题】：Images won't slide with Javascript Image Slider图像不会使用 Javascript Image Slider 滑动
【发布时间】：2014-07-15 05:34:13
【问题描述】：

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

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

**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--;
    }
}

【问题讨论】：

请将您的代码发布在 JS Fiddle 中，以便人们可以帮助您。
我不认为边距是有效值。 +=480px。为什么不直接使用正值或负值？
左键块后你有一个额外的'
'

更改为顶部的 ''。 src 是一个属性。

标签： javascript jquery html css slider

【解决方案1】：

您的代码中有小错误。见fiddle

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

【讨论】：

太棒了！这些小错误就是问题所在。但是现在我的左右按钮是紧挨着的，我似乎不知道为什么会改变。无论哪种方式，我都可以弄清楚这一点。感谢您的帮助！
查看小提琴中的 css。你也有错误！在css类 .rightbttn 你给了 right:400px;它从 parentdiv 的右侧获取像素数。
谢谢约翰。它现在似乎在 Fiddle 中工作。但是，当我将它放在脚本编辑器中时它不起作用（在这种情况下它只是记事本）你提到将 jQuery 脚本更改为我所做的顶部并且图像似乎仍然无法正常工作但 CSS 很好.这是小提琴。 jsfiddle.net/nmkettler/72G86/1
您已在引号中给出了 src。这就是我的意思。:)

【解决方案2】：

 <!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>

我希望它对你有用..？

【讨论】：