javascript - 如何使这个轮播正常工作？

Question

几年前我制作了这个旋转木马(图像 slider )，直到现在它都可以正常工作。我想让它响应。问题是我将图片的宽度设置为 100%，但是当 javascript 将图片彼此相邻放置时，javascript 将父 div 的宽度更改为五倍，因此图片也变得更大且模糊。我花了一整天的时间来找出如何解决这个问题，所以我希望你能帮助我! :) 非常感谢!

    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>

Answer 1

成功了!感谢一切!

function carousel() {

	// sebesség
	var speed = 3000;

	// időzítő
	var timer = setInterval("rotate()", speed);

	// képek száma
	var images_number = $(".tab").length;

	// carousel teljes szélessége
	var carousel_width = $("#tabs").width() * images_number;	

	// a képeket tartalmazó DIV szélessége megegyezik a carousel teljes szélességével
	
	var wrapper_width = $("#wrapper").width();
	
	$("#tabs").css({"width": carousel_width});

	// az első képre rátesszük az active class-t
	$(".tab:first").addClass("active");	

	// következő gombra történő kattintás
	$("#nav-right").click(function(){

		// aktív képet léptetjük eggyel
		$active_image = $("#tabs div.active").next();		

		// ha nincs több kép akkor visszaugrunk az elsőre
		if ($active_image.length==0){
			$active_image = $("#tabs div:first");			
		}

		// léptetést végrehajtó függvény hívása
		step();
	});


	// előző gombra történő kattintás
	$("#nav-left").click(function(){

		// aktív képet léptetjük eggyel vissza
		$active_image = $("#tabs div.active").prev();
		
		// ha nincs több kép akkor visszaugrunk az utolsóra
		if ($active_image.length==0){
			$active_image = $("#tabs div:last");			
		}

		// léptetést végrehajtó függvény hívása
		step();
	});

	// ha az egeret a kép vagy a gombok fölé mozgatjuk, megállítjuk az automatikus léptetést
	$("#tabs, #nav-left, #nav-right").hover(
		// a clearInterval() metódus törli a setInterval() által beállított időzítőt
		function() { clearInterval(timer); },

		// a setInterval() metódussal meghívjuk a rotate() függvényt a speed változóban meghatározott időközönként
		function() { timer = setInterval("rotate()", speed); }
	);
}

// léptetést végrehajtó függvény
function step() {

	// össze képről leszedjük az active class-t
	$("#tabs div").removeClass("active");

	// aktív képre rátesszük az active class-t
	$active_image.addClass("active");	

	/* Meghatározzuk az eltolás mértékét amit úgy kapunk meg,
	   hogy az akutális kép indexét beszorozzuk a kép méretével.
	   Jelen esetben 800px egy kép szélessége, ezért az eltolás
	   mértéke így fog alakulni: 0, 800, 1600, 2400, 3200...
	*/
	var imagesposition = $active_image.index() * $("#tabs div").width();

	// images DIV-et eltoljuk az imageposition változóban meghatározott értékkel
	$("#tabs:not(:animated)").animate({"left": -imagesposition}, 500);
}

// automatikus léptetést végző függvény
function rotate() {
	$("#nav-right").click();
}

div#wrapper
{
	width: 100%;
	height: calc(100% - 220px);	
	float: left;
	margin: 120px auto;
	overflow: hidden;
	background: #3498db;
	position: relative;	
}

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: absolute;
	background: orange;	
}

div.tab
{
	width: calc(100% / 5);	
	height: 100%;
	float: left;
	background-size: cover;	
	background-repeat: no-repeat;
	background-position: 50%;
}

div#tab-first
{
	background-image: url('../pics/1.jpg');
}

div#tab-second
{
	background-image: url('../pics/2.jpg');
}

div#tab-third
{
	background-image: url('../pics/3.jpg');
}

div#tab-fourth
{
	background-image: url('../pics/4.jpg');
}

div#tab-fifth
{
	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>