Question

几年前我制作了这个旋转木马（图像滑块），直到现在才正常工作。我想让它变得敏感。问题是我将图片的宽度设置为100％，但是当将图片放在彼此旁边时，javascript会将父div的宽度改变五倍，因此图片也会变得更大，朦胧。我花了一整天的时间来了解如何解决这个问题，所以我希望你能帮助我！ :)非常感谢！

＆＃13;

    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();
    });

＆＃13;

    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%;
    }

＆＃13;

    <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>

＆＃13;

Answer 1

成功！谢谢一切！

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>

{{1}}

如何使这个旋转木马正常工作？

1 个答案: