[英]div horizontal slide with overflow:hidden code wrong?
I am working on a horizontal scroll on my website. 我正在网站上横向滚动。 I linked to jQuery 1.8.2. 我链接到jQuery 1.8.2。 The overflow is hidden and I want to scroll on screen. 溢出被隐藏了,我想在屏幕上滚动。 Here is what I want to build: 这是我要构建的:
http://www.senshii.com/desktop_senshii.html#showcase http://www.senshii.com/desktop_senshii.html#showcase
I have made my divs using the following CSS: 我使用以下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>
Here is my linked script.js: 这是我链接的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");
}
What am I doing wrong? 我究竟做错了什么? I hope someone can tell me. 我希望有人能告诉我。 Thanks for looking! 感谢您的光临!
Solved it. 解决了。 Script was wrong and my images inside my divs were too big. 脚本错误,并且我的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");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.