我目前正在为自己建立一个网站,并且在设计方面遇到了一些麻烦。默认情况下,re是滑块下方的分页按钮以及上一个和下一个箭头。我设法删除了分页按钮,但是无法将下一个和上一个按钮放在滑块顶部,这些按钮应该垂直居中,并且包含图像的高度。我也遇到了滑块高度的问题。高度应该是图像的高度。我网站上的绿色部分非常高。
我希望有人可以帮助我!
在预付款中非常感谢!
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
#slides .slidesjs-container {
margin-bottom:0px;
}
.slidesjs-pagination {
display: none;
}
.slidesjs-previous.slidesjs-navigation {
/* Styles for the Previous nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
z-index: 99;
background-image: url("..//img/prev.png");
}
.slidesjs-next.slidesjs-navigation {
/* Styles for the Next nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
z-index: 99;
background-image: url("..//img/next.png");
}
.slidesjs-control {
background: orange;
max-height: 0px;
}
.slidesjs-container {
width: 100%;
background: green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 700,
autoHeight: true
});
});
</script>
答案 0 :(得分:0)
我猜你从那个URL中删除了slidejs代码,但是10分钟前我遇到了完全相同的问题,所以这就是我修复它的方法:
<div id="slides" class="slides">
<img src="images/1.jpg">
<img src="images/2.jpg">
<a href="#" class="slidesjs-previous slidesjs-navigation slides-button left">
<img src="images/arrow-left.png" /></a>
</div>
为了简单起见,我只放了2张图片和一个导航按钮。 那么CSS:
.slides { position: relative; } /* so the buttons are placed absolutety within this div */
.slides-button {
position: absolute;
top: 120px; /* the exact position over the slides, from slide's (0,0) */
}
请注意,导航按钮必须在<a class="slidesjs-previous slidesjs-navigation">
内直接<div id="slides">
,否则它们将无效,请勿将Div放在中间。