幻灯片悬停在左侧，向右移动图像

Question

我有一个幻灯片，当我将鼠标悬停在它上面时它会向左移动。我想要做的是当我将鼠标放在左侧时，幻灯片向左移动，但是当我将鼠标放在右侧时，幻灯片向右移动。当我把鼠标放在中间时，它不动。不知道该怎么做。

https://jsfiddle.net/jzhang172/gq3j8993/1/

var $content = $('#imgsList'); // Cache your selectors!
$(".cont").hover( function loop() {
    $content.stop().animate({  marginLeft: '-=1600' }, 5000, 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });
}, function stop() {
    $content.stop();
});

.Img_cl1 .hde img {
    width: 112px;
    margin: 18px 0px;
}
.cl1 img:hover {
    margin-top:-35px;
}
.cl2 img:hover {
    margin-top:-34px;
}
.cl3 img:hover {
    margin-top:-35px;
}
.cl4 img:hover {
    margin-top:-36px;
}
.cl5 img:hover {
    margin-top:-48px;
}
.cl6 img:hover {
    margin-top:-45px;
}
.cl7 img:hover {
    margin-top:-34px;
}
.cl8 img:hover {
    margin-top:-47px;
}
.cl9 img:hover {
    margin-top:-51px;
}
.cl10 img:hover {
    margin-top:-51px;
}
.cl11 img:hover {
    margin-top:-37px;
}
.cl12 img:hover {
    margin-top:-37px;
}

.Img_cl1 .hde {
    float:left !important;
    width:200px !important;
    text-align:center;
}
.fdfll {
    width:2455px;
    float:left;
    overflow:hidden;
}
#cont1 {
    float:left;
}
#contS {
    width:100%;
    float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
    <div id="cont1">
        <div id="contS" class="Img_cl1">
            <div id="imgsList" class="col-md-12 fdfll  scroll-left">
                
                    <div class=" cl1 hde ">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
               
                    <div class=" cl2 hde">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
               
                    <div class=" cl3 hde ">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
               
                    <div class="  cl4 hde ">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
               
                    <div class=" cl5 hde ">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
                
                    <div class=" cl6 hde ">
                        <img alt="client" src="http://cdn.bulbagarden.net/upload/thumb/f/f4/Snorlax_anime.png/250px-Snorlax_anime.png" />
                    </div>
                
                    <div class=" cl7 hde ">
                        <img alt="client" src="http://cdn.bulbagarden.net/upload/thumb/f/f4/Snorlax_anime.png/250px-Snorlax_anime.png" />
                    </div>
                
                    <div class=" cl8 hde ">
                        <img alt="client" src="http://cdn.bulbagarden.net/upload/thumb/f/f4/Snorlax_anime.png/250px-Snorlax_anime.png" />
                    </div>
                
                    <div class=" cl9 hde ">
                        <img alt="client" src="http://img14.deviantart.net/d1f8/i/2012/154/2/4/proud_charmander_by_kol98-d525yi2.png" />
                    </div>
                
                    <div class=" cl10 hde ">
                        <img alt="client" src="http://img2.wikia.nocookie.net/__cb20150510232331/ssb/images/a/a4/.028_Pikachu_%26_Zachary_28_88.png" />
                    </div>
                </a>
                <a target="_blank" href="http://reveye.in/">
                    <div class=" cl11 hde ">
                        <img alt="client" src="http://img2.wikia.nocookie.net/__cb20140410200723/pokemon/images/archive/1/16/20150102074354!025Pikachu_OS_anime_10.png" />
                    </div>
                
                    <div class=" hde cl12 ">
                        <img alt="client" src="http://oyster.ignimgs.com/mediawiki/apis.ign.com/pokemon-blue-version/8/89/Pikachu.jpg" />
                    </div>
                
            </div>
        </div>
    </div>
</div>

Answer 1

您可以尝试的一个选项是创建两个元素作为左右悬停事件的控件，而不是通过代码确定悬停在哪一侧。然后，绝对定位它们并将它们放置在幻灯片窗口的任一侧。

所以你的 HTML 可能看起来像：

<div class="cont">
    <div id="cont1">
        <div id="contS" class="Img_cl1">
            <div class="slide-control left">Left</div>
            <div class="slide-control right">Right</div>
            <div id="imgsList" class="col-md-12 fdfll  scroll-left">
                <!-- Images go here -->                
            </div>
        </div>
    </div>
</div>

然后你的 JavaScript 会变成：

var $content = $('#imgsList'); // Cache your selectors!

$(".slide-control.left").hover( function loop() {
    $content.stop().animate({  marginLeft: '-=1600' }, 5000, 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });
}, function stop() {
    $content.stop();
});

$(".slide-control.right").hover( function loop() {
    $content.stop().animate({  marginLeft: '+=1600' }, 5000, 'linear', function(){
        $content.css({ marginLeft : -$content.outerWidth() });
        loop();
    });
}, function stop() {
    $content.stop();
});

这里有一个JSFiddle 来演示解决方案。我为控件添加了一些样式，但如果您实际上不希望它们出现，您可以使用visibility: hidden。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

使用以下代码更改函数循环：

function loop(e) {
    var widthBy2 = $(this).width()/2,
        pos = e.pageX,
        inc;
    if(pos < widthBy2-50){
        inc = '-=1600';
    }else if(pos > widthBy2 + 50){
         inc = '+=1600';
    }else{
        inc = "+=0";
    }

    $content.stop().animate({  marginLeft: inc }, 5000, 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });
}