如何使这个旋转木马正常工作？
几年前，我已经制作了这个传送带（图像滑块），直到现在它都正常工作。我想让它响应。问题是我把图片的宽度设置为100％，但是当它把图片放在一起时，javascript将父div的宽度改变了5倍，因此图片也变得更大和模糊。我花了整整一天的时间来了解我该如何解决这个问题，所以我希望你能帮助我！ ：） 非常感谢！如何使这个旋转木马正常工作？
function carousel() { var speed = 3000;
var timer = setInterval("rotate()", speed);
var tabs_number = $(".tab").length;
var tab_width = $(".tab").outerWidth();
var offset = tab_width * (-1);
var total_width = $("#tabs").width = tab_width * tabs_number;
var first_tab = $(".tab:first");
var last_tab = $(".tab:last");
$("#tabs").css({"width" : total_width});
last_tab.insertBefore(first_tab);
$("#tabs").css({"left" : offset});
first_tab.addClass("active");
$("#nav-right").click(function() {
var active_tab = $(".active");
active_tab.removeClass("active");
active_tab.next().addClass("active");
var left_indent = parseInt($("#tabs").css("left")) - tab_width;
$("#tabs:not(:animated)").animate({"left" : left_indent},500,function() {
// az elsőt berakjuk az utolsó mögé
$("#tabs div:first").insertAfter($("#tabs div:last"));
$("#tabs").css({"left" : offset});
});
});
$("#nav-left").click(function() {
var active_tab = $(".active");
active_tab.removeClass("active");
active_tab.prev().addClass("active");
var left_indent = parseInt($("#tabs").css("left")) + tab_width;
$("#tabs:not(:animated)").animate({"left" : left_indent},500,function(){
$(".tab:last").insertBefore($(".tab:first"));
$("#tabs").css({"left" : offset});
});
});
$("#tabs, #nav-left, #nav-right").hover(
function() { clearInterval(timer); },
function() { timer = setInterval("rotate()", speed); }
);
};
function rotate() {
$("#nav-right").click();
}
// Client code
$(document).ready(function() {
carousel();
});
div#wrapper {
width: 100%;
height: calc(100% - 220px);
float: left;
margin: 120px auto;
overflow: hidden;
}
div.nav-buttons
{
width: 100%;
height: 100%;
float: left;
display: flex;
flex-direction: row;
justify-content: space-between;
}
div#nav-left,
div#nav-right
{
width: 100px;
height: 100%;
background-size: 40px;
background-repeat: no-repeat;
background-position: 50%;
z-index: 2;
cursor: pointer;
}
div#nav-left
{
background-image: url('images/icons/left.png');
}
div#nav-right
{
background-image: url('images/icons/right.png');
}
div#nav-left:hover,
div#nav-right:hover
{
background-color: rgba(52, 73, 94,0.5);
}
div#tabs
{
width: 100%;
height: 100%;
position: relative;
}
div.tab
{
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
<div id="wrapper"> <div class="nav-buttons">
<div id="nav-left" title="Előző"></div>
<div id="nav-right" title="Következő"></div>
</div>
<div id="tabs">
<div d="tab-first" class="tab"></div>
<div id="tab-second" class="tab"></div>
<div id="tab-third" class="tab"></div>
<div id="tab-fourth" class="tab"></div>
<div id="tab-fifth" class="tab"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
回答：
成功！谢谢一切！
function carousel() { \t // sebesség
\t var speed = 3000;
\t // időzítő
\t var timer = setInterval("rotate()", speed);
\t // képek száma
\t var images_number = $(".tab").length;
\t // carousel teljes szélessége
\t var carousel_width = $("#tabs").width() * images_number; \t
\t // a képeket tartalmazó DIV szélessége megegyezik a carousel teljes szélességével
\t
\t var wrapper_width = $("#wrapper").width();
\t
\t $("#tabs").css({"width": carousel_width});
\t // az első képre rátesszük az active class-t
\t $(".tab:first").addClass("active"); \t
\t // következő gombra történő kattintás
\t $("#nav-right").click(function(){
\t \t // aktív képet léptetjük eggyel
\t \t $active_image = $("#tabs div.active").next(); \t \t
\t \t // ha nincs több kép akkor visszaugrunk az elsőre
\t \t if ($active_image.length==0){
\t \t \t $active_image = $("#tabs div:first"); \t \t \t
\t \t }
\t \t // léptetést végrehajtó függvény hívása
\t \t step();
\t });
\t // előző gombra történő kattintás
\t $("#nav-left").click(function(){
\t \t // aktív képet léptetjük eggyel vissza
\t \t $active_image = $("#tabs div.active").prev();
\t \t
\t \t // ha nincs több kép akkor visszaugrunk az utolsóra
\t \t if ($active_image.length==0){
\t \t \t $active_image = $("#tabs div:last"); \t \t \t
\t \t }
\t \t // léptetést végrehajtó függvény hívása
\t \t step();
\t });
\t // ha az egeret a kép vagy a gombok fölé mozgatjuk, megállítjuk az automatikus léptetést
\t $("#tabs, #nav-left, #nav-right").hover(
\t \t // a clearInterval() metódus törli a setInterval() által beállított időzítőt
\t \t function() { clearInterval(timer); },
\t \t // a setInterval() metódussal meghívjuk a rotate() függvényt a speed változóban meghatározott időközönként
\t \t function() { timer = setInterval("rotate()", speed); }
\t);
}
// léptetést végrehajtó függvény
function step() {
\t // össze képről leszedjük az active class-t
\t $("#tabs div").removeClass("active");
\t // aktív képre rátesszük az active class-t
\t $active_image.addClass("active"); \t
\t /* Meghatározzuk az eltolás mértékét amit úgy kapunk meg,
\t hogy az akutális kép indexét beszorozzuk a kép méretével.
\t Jelen esetben 800px egy kép szélessége, ezért az eltolás
\t mértéke így fog alakulni: 0, 800, 1600, 2400, 3200...
\t */
\t var imagesposition = $active_image.index() * $("#tabs div").width();
\t // images DIV-et eltoljuk az imageposition változóban meghatározott értékkel
\t $("#tabs:not(:animated)").animate({"left": -imagesposition}, 500);
}
// automatikus léptetést végző függvény
function rotate() {
\t $("#nav-right").click();
}
div#wrapper {
\t width: 100%;
\t height: calc(100% - 220px); \t
\t float: left;
\t margin: 120px auto;
\t overflow: hidden;
\t background: #3498db;
\t position: relative; \t
}
div.nav-buttons
{
\t width: 100%;
\t height: 100%; \t
\t float: left;
\t display: flex;
\t flex-direction: row;
\t justify-content: space-between;
}
div#nav-left,
div#nav-right
{
\t width: 100px;
\t height: 100%; \t
\t background-size: 40px;
\t background-repeat: no-repeat;
\t background-position: 50%; \t
\t z-index: 2; \t
\t cursor: pointer;
}
div#nav-left
{
\t background-image: url('images/icons/left.png'); \t
}
div#nav-right
{
\t background-image: url('images/icons/right.png'); \t
}
div#nav-left:hover,
div#nav-right:hover
{
\t background-color: rgba(52, 73, 94,0.5);
}
div#tabs
{ \t
\t width: 100%;
\t height: 100%;
\t position: absolute;
\t background: orange; \t
}
div.tab
{
\t width: calc(100%/5); \t
\t height: 100%;
\t float: left;
\t background-size: cover; \t
\t background-repeat: no-repeat;
\t background-position: 50%;
}
div#tab-first
{
\t background-image: url('../pics/1.jpg');
}
div#tab-second
{
\t background-image: url('../pics/2.jpg');
}
div#tab-third
{
\t background-image: url('../pics/3.jpg');
}
div#tab-fourth
{
\t background-image: url('../pics/4.jpg');
}
div#tab-fifth
{
\t background-image: url('../pics/5.jpg');
}
<div id="wrapper"> <div class="nav-buttons">
<div id="nav-left" title="Előző"></div>
<div id="nav-right" title="Következő"></div>
</div>
<div id="tabs">
<div id="tab-first" class="tab"></div>
<div id="tab-second" class="tab"></div>
<div id="tab-third" class="tab"></div>
<div id="tab-fourth" class="tab"></div>
<div id="tab-fifth" class="tab"></div>
</div>
</div>
以上是 如何使这个旋转木马正常工作？ 的全部内容， 来源链接： utcz.com/qa/257689.html
