gpt4 book ai didi

javascript - div水平滑动溢出:hidden code wrong?

转载 作者:行者123 更新时间:2023-11-28 07:42:56 25 4
gpt4 key购买 nike

我正在我的网站上制作水平滚动条。我链接到 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");
}

我做错了什么?我希望有人能告诉我。感谢您的关注!

最佳答案

解决了。脚本错误,我的 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");
}

}

关于javascript - div水平滑动溢出:hidden code wrong?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30869142/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com