Question

我正在尝试实现lemmon滑块，但它似乎无法正常工作。当我点击下一个它进入下一页但是当我说以前然后它转到第一个图像。但它应该转到上一页图像。

以下是我的代码。有谁能告诉我如何实现它？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8">
<script src="http://static.lemmonjuice.com/public/jquery/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://static.lemmonjuice.com/public/plugins/slider/lemmon-slider-0.2.js"></script>
<style>
#lemmon_carousel {
    height: 120px;
    background: #f7f9fa;
    position: absolute;
    width: 100%;
    border-top: 2px solid #e1e8f5;
}
.lemmon_carousel {
    position: relative;
    overflow: hidden;
}

.lemmon_carousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin-top: 10px;
    padding: 0;
}
.lemmon_carousel li {
    float: left;
    margin-right: 10px;
}
.controls {
position: fixed;
}
</style>
</head>
<body>

<div class="lemmon_carousel" id="lemmon_carousel">
<ul style="width: 2296px; padding-right: 680px;">
            <li><img src="http://static.lemmonjuice.com/public/images/x160/314472601_b16577aee0.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/1523115768_3709a167a2.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/2447082208_a8aaf7609f.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/2753126743_4249a4e948_b.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/3046575726_02f55b910e.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/3384297473_7a5f8e7933.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/4012245375_2e2b03d7b2_o.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/4117941853_3394b8bb27.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/CareBearsIRLbisousnours1550x283.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/Geof-Kern-Lego-580x434.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/OtLedSf.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/Raccoonholdingkitten.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/2447082208_a8aaf7609f.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/2753126743_4249a4e948_b.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/3046575726_02f55b910e.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/4117941853_3394b8bb27.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/CareBearsIRLbisousnours1550x283.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/OtLedSf.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/Raccoonholdingkitten.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/2447082208_a8aaf7609f.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/4117941853_3394b8bb27.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/CareBearsIRLbisousnours1550x283.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/Geof-Kern-Lego-580x434.jpg" alt=""></li>
            <li><img src="http://static.lemmonjuice.com/public/images/x160/OtLedSf.jpg" alt=""></li>
        </ul>    
</div>
<div class="controls">
    <a href="#" class="prev-page">Prev Page</a> |
    <a href="#" class="next-page">Next Page</a>
</div>

<script>
window.onload = function(){
    $( '#lemmon_carousel' ).lemmonSlider({
    'slideToLast' : true,
    'loop':false,
    });
}
</script>
</body>
</html>

这是展示问题的JSfiddle。

Lemmon滑块上一个按钮总是滑回第一页

0 个答案: