我做了一个Javascript滑块和I'我在CSS方面遇到了一些严重的问题
I made a Javascript slider and i'm having some serious trouble with the CSS.
所以我做了一个Javascript Slider。问题是,当图像加载时,图像就像是按下了我的下一个/prevdiv,而它也不在我的滑块右侧的容器中。我不确定发生了什么这是我的代码:如果你需要的话,我可以发布一个链接到我的网站。HTML
<div id="sliderFrame">
<img src="img/CS-GO-Test.jpg" name="slider" alt="" />
<div id="prev" onClick="swapImage(-1)"></div>
<div id="next" onClick="swapImage(+1)"></div>
</div>
CSS
#sliderFrame{
margin-top: 10px;
width:100%;
height:350px;
border: 2px solid #003E66;
background:#CAE9FF;
}
#prev{
z-index:99;
display:block;
float:left;
height:100%;
width:5px;
background-color:#8F8F8F;
opacity: 0.2;
width:10%;
position:relative;
}
#prev:hover{
opacity: 0.4;
}
#next{
z-index:99;
display:block;
float:right;
height:100%;
width:10px;
background-color:#8F8F8F;
opacity: 0.2;
width:10%;
position:relative;
}
#next:hover{
opacity: 0.4;
}
JavaScript
var Image = new Array("img/CS-GO-Test.jpg", "img/CS-GO-Test2.jpg", "img/test.jpg");
var ImageNum = 0;
var ImageLength = Image.length -1;
function swapImage(num){
ImageNum = ImageNum + num;
if(ImageNum > ImageLength){
ImageNum = 0;
}
if(ImageNum < 0){
ImageNum = ImageLength;
}
document.slider.src = Image[ImageNum];
}
要将next和prevdiv放置在sliderFrame上方,请对#prev和#next元素使用绝对定位,而不是相对定位。
以下是我的做法:
#sliderFrame {
margin-top: 10px;
width: 100%;
height: 350px;
border: 2px solid #003E66;
background: #CAE9FF;
position:relative; /*add this so that divs inside can be placed relative to THIS div*/
}
#prev {
z-index: 99;
display: block;
height: 100%;
width: 10px;
background-color: #8F8F8F;
opacity: 0.2;
width: 10%;
position: absolute; /*needed for placement relative to the parent element (sliderFrame) and for overlapping elements*/
top: 0; /*place on top*/
}
#next {
z-index: 99;
display: block;
height: 100%;
width: 10px;
background-color: #8F8F8F;
opacity: 0.2;
width: 10%;
position: absolute; /*absolute positioning to place relative to parent element (sliderFrame) */
right: 0; /*instead of floats use right for positioning*/
top: 0; /*place on top*/
}
总之,请确保父容器(sliderFrame)的位置设置为相对,并对需要定位在父元素上的内部元素使用绝对定位。
查看此链接,了解有关绝对和相对定位的更多信息:http://css-tricks.com/absolute-positioning-inside-relative-positioning/
相关文章:
- CSS-如何定位内容数据标题
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- CKEditor-我在editor.css中的风格是't
- 单击更改图标并通过javascript添加一个css类
- 将CSS应用于printWindow.print();在Javascript中
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- css(或jQuery)悬停时淡入淡出
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 如何使用css动画/javascript使具有背景图像的元素出现
- 获取HTML属性中CSS声明的值
- 当我更改Joomla时,它仍然从旧域加载CSS和Javascript
- 我做了一个Javascript滑块和I'我在CSS方面遇到了一些严重的问题
- 有没有测量过CSS在编码效果方面比Javascript快多少
- 在生成打印报表方面,HTML+CSS现在有多成熟