背景不向左重复答案

【问题标题】：Background doesn't repeat to the left背景不向左重复
【发布时间】：2015-11-27 00:35:13
【问题描述】：

我正在尝试做一个滑块菜单，我有一个带有磁带背景的 div，当它通过背景重复向左动画时一切正常，但是当它向右动画并到达左边时它得到的背景边框消失了，因为 background-repeat 不会向左重复，而是向右重复。有没有办法让背景向左重复？

并且“slider” div 内的列表不会以“slider” div 的相同速度移动

这是 HTML 代码

<!DOCTYPE html>
<html>
<head>
    <title>Prueba</title>
    <link type = "text/css" rel = "stylesheet" href = "PruebaIndex.css">
    <script type = "text/javascript" src = "jquery-2.1.4.js"></script>
    <script>
        $(document).ready(function(){
            var mode = 0; // 0 Left - 1 Right
            autoSlider();
            function autoSlider(){
                mode = 0;
                $("#slider").animate({left: "-=60px", width: "+=60px"}, 'slow', 'linear', autoSlider);
            }
            function slideLeft(){
                mode = 1;
                $("#slider").animate({left: "+=60px", width: "-=60px"}, 'slow', 'linear', slideLeft);
            }
            $("#slider").mouseover(function(){
                $("#slider").stop();
            });
            $("#slider").mouseout(function(){
                if(mode === 0)
                    autoSlider();
                else
                    slideLeft();
            });
            $("#Left").mouseover(function(){
                $("#slider").stop();
                autoSlider();
            });
            $("#Right").mouseover(function(){
                $("#slider").stop();
                slideLeft();
            });
        });
    </script>
</head>

<body>
    <div id = "wrapper">
        <div id = "slider">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
        <div id = "Left">
            Left
        </div>
        <div id = "Right">
            Right
        </div>
    </div>
</body>
</html>

还有 CSS 代码

*{
padding: 0;
margin: 0;
}

#slider {
padding: 0;
left: 0px;
background-color: black;
background-image: url("http://s11.postimg.org/msh93rl8z/Tira_Fotografica.png");
background-repeat: repeat-x;
width: 800px;
height: 304px;
position: relative;
overflow: hidden;
}

#wrapper {
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}

#Left {
width: 100px;
height: 100px;
position: absolute;
color: white;
background-color: black;
margin-top: -200px;
margin-left: -100px;
}

#Right {
width: 100px;
height: 100px;
position: absolute;
color: white;
background-color: black;
margin-top: -200px;
margin-left: 800px;
}

#slider ul {
list-style: none;
}

#slider ul li {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
background-color: white;
margin: 50px 10px 0px 0px;
}

我试图将代码放在 JSFiddle 上，但它没有运行.. 抱歉我的英语不好

【问题讨论】：

如答案中所述，正在动画的是正在移动的 div，当它移动到接近该值时它会停止，它有一个 width 值，尝试为重复的部分设置动画带有 css 精灵表的图像blog.teamtreehouse.com/css-sprite-sheet-animations-steps

标签： javascript jquery html css

【解决方案1】：

它有效。看这里：https://jsfiddle.net/cLv4hLfy/

看看#slider 元素。

这个值很烦人 ;-)

<div style="left: -5863.5px; width: 6663.8px; overflow: hidden;" id="slider">

left 越来越小，宽度越来越大。当滑块向相反方向移动时，左侧变大，宽度收敛到0px。

[编辑]：所以背景没有动画。 div 是动画的。如何修复 div 并为 div 中的某些内容设置动画。当它重复时，你也可以对背景位置做一些事情。

【讨论】：