Question

我正在我的网站上进行横向滚动。我链接到jQuery 1.8.2。溢出被隐藏，我想在屏幕上滚动。这是我想要建立的：

http://www.senshii.com/desktop_senshii.html#showcase

我使用以下CSS制作了我的div：

#slidecontainer {
    position:absolute;
    width:1000%;
    height:465px;
    background-color:#FFFFFF;
}
.slideinimage {
    position:absolute;
    right: 50%;
    top:0px;
    width:651px;
    height: 521px;
    margin-right:-520px;
    background-repeat:no-repeat;
    background-position: center;

#slidenum {
    position:absolute;
    top:445px;
    left:50%;
    width:280px;
    height: 190px;
    min-height: 200px;
    font-family:"Sansation Regular";
    line-height: 30px;
    text-align: left;
    color: #bebebe;
    font-size: 30px;
    margin-left:-400px;
}
#slide0 {
    float:left;
    width:10%;
    height:465px;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}
#slide1 {
    /* etc etc */

<div id="slidecontainer">
    <div id="slide0">  
        <div class="slideinimage"><img src="images/myimage.jpg"></div>
        <div class="showtext1_slide0">
            <br><br>
            My title
            </span>
        </div>
        <div class="showtext2_slide0">
            My txt
        </div>
    </div>
    <div id="slide0"> etcetc till slide9</div>
</div>

这是我链接的script.js：

$('#showcasebuttonleft').click(previousslide);
$('#showcasebuttonright').click(nextslide);

$('#mshowcasebuttonleft').click(mpreviousslide);
$('#mshowcasebuttonright').click(mnextslide);   

var currentslide = 0;

function previousslide(){   
    if (currentslide > 0) {
        currentslide = currentslide -1;
        $('#slidenum').html((currentslide+1)+'/10');    
        $('#slide' + currentslide).find('.slideinimage').css({
            right: '140px', 
            opacity: 0
        });
        $('#slidecontainer').animate({
            left: (currentslide *- 100) + '%'
        }, 500, imageslidein);  
    }
}

function nextslide(){   
    if (currentslide < 9) {
        currentslide = currentslide + 1;
        $('#slidenum').html((currentslide + 1) + '/10');
        $('#slide' + currentslide).find('.slideinimage').css({
            right: '140px', 
            opacity: 0
        }); 
        $('#slidecontainer').animate({
            left: (currentslide *- 100) + '%'
        }, 500, "swing", imageslidein); 
    }
}

function mpreviousslide(){  
    if (currentslide > 0) {
        currentslide = currentslide - 1;
        $('#mslidenum').html((currentslide + 1) + '/10');
        $('#mslidecontainer').animate({
            left:(currentslide *- 100) + '%'
        }, 500);        
    }
}

function mnextslide(){  
    if (currentslide < 9) {
        currentslide = currentslide + 1;
        $('#mslidenum').html((currentslide + 1) + '/10');
        $('#mslidecontainer').animate({
            left:(currentslide *- 100) + '%'
        }, 500, "swing");       
    }
}

function imageslidein(){
    $('#slide' + currentslide).find('.slideinimage').animate({
        right: '110', 
        opacity: 1
    }, 600, "swing");
}

我做错了什么？我希望有人能告诉我。谢谢你的期待！

Answer 1

解决了它。脚本错了，我的div中的图像太大了。

// JavaScript Document

$(window).load(init);

var currentslide = 0;

function init(){    

$('#showcasebuttonleft').click(previousslide);
$('#showcasebuttonright').click(nextslide);


function previousslide(){   
if(currentslide >0){
    currentslide = currentslide -1;
    $('#slidenum').html((currentslide+1)+'/10');    
    $('#slide'+currentslide).find('.slideinimage').css({right:'140px', opacity:0});
    $('#slidecontainer').animate({left:(currentslide *-100)+'%'}, 500, imageslidein);   
}
}

function nextslide(){   
if(currentslide <9){
    currentslide = currentslide +1;
    $('#slidenum').html((currentslide+1)+'/10');
    $('#slide'+currentslide).find('.slideinimage').css({right:'140px', opacity:0}); 
    $('#slidecontainer').animate({left:(currentslide *-100)+'%'}, 500, "swing", imageslidein);      
}
}

function imageslidein(){
    $('#slide'+currentslide).find('.slideinimage').animate({top:'0px'},600, "easeOutBounce");
}

}

div水平滑动溢出：隐藏代码错误？

1 个答案: