背景不't向左重复
Background doesn't repeat to the left
本文关键字:背景 更新时间:2023-09-26
我正在尝试制作一个滑块菜单,我有一个带背景的div,当它通过背景重复向左设置动画时,一切都很好,但当它向右设置动画并到达背景的左边界时,它会消失,因为背景重复不会向左重复,只会向右重复。。有没有办法让背景向左重复?
"滑块"div中的列表不会以与"滑块"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上,但它没有运行抱歉我英语不好
它是有效的。请参见此处:https://jsfiddle.net/cLv4hLfy/
看看#slider元素。
这些值令人讨厌;-)
<div style="left: -5863.5px; width: 6663.8px; overflow: hidden;" id="slider">
左边越来越小,宽度越来越大。当滑块向左移动到相反方向时,宽度变大并且变为CCD_。
[EDIT]:因此背景没有设置动画。div已设置动画。修复div并在div中设置动画怎么样?当它重复时,您也可以使用背景位置来做一些事情。
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 可以在这里为背景图像设置滤镜吗
- 如何使用jquery更改html中的背景颜色
- 使用 js 将背景图像设置为 HTML
- 使用带括号的图像URL作为jQuery的背景
- 如何使用css动画/javascript使具有背景图像的元素出现
- 循环浏览多个身体背景图像
- 将淡入淡出添加到“我的身体背景滑块”
- 浮动图像左作为背景-css
- Fullpage.js-视频+背景在同一部分
- 背景图像顶部的滚动图像不移动
- 在pdfmake中嵌入背景图像
- PhoneGap选项卡栏自定义字体,背景图案
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 不同页面背景的body标记上的角度ng样式
- 修复选择菜单时的背景图像
- 导航菜单-悬停时的背景行为怪异
- JS幻灯片与CSS背景颜色变化
- 使用css()设置背景图像;不起作用
- 设置 CSS 背景在 Firefox 中不起作用