位于滑块底部的图像

问题描述 投票：0回答：1

我正在尝试将边框图像放置在旋转图像顶部的滑块底部，但似乎无法正确处理。我希望边框过渡到页面的其余部分，如果我将边框添加到图像本身，则边框会旋转，因此看起来很奇怪。

这是我的jsfiddle。

https://jsfiddle.net/bLyd0anj/

CSS代码：

  #wowslider-container1 { 
    zoom: 1; 
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    max-width: auto;
    max-height:640px;
    font-size: 10px;

    /* reset box-sizing (to boostrap friendly) */
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; 
}
* html #wowslider-container1{ width:2220px }
#wowslider-container1 .ws_images ul{
    position:relative;
    width: 10000%; 
    height:100%;
    left:0px;
    top: 0px;
    list-style:none;
    margin:0;
    padding:0;
    border-spacing:0;
    overflow: hidden;
    /*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
    position: relative;
    width:1%;
    height:100%;
    line-height:0; /*opera*/
    overflow: hidden;
    top: 0px;
    left: 0px;
    float:left;
    /*font-size:0;*/
    padding:0 0 0 0 !important;
    margin:0 0 0 0 !important;
}

.wowslider-container1 img {
    position: absolute;
    left: 0;
    bottom: 0;
}

#wowslider-container1 .ws_images{
    position: relative;
    left:0;
    top:0;
    height:100%;
    max-height:640px;
    max-width: auto;
    vertical-align: top;
    border:none;
    overflow: hidden;
}
#wowslider-container1 .ws_images ul a{
    width:100%;
    height:100%;
    max-height:640px;
    display:none;
}
#wowslider-container1 img{
    max-width: none !important;
}
#wowslider-container1 .ws_images .ws_list img,
#wowslider-container1 .ws_images > div > img{
    width:100%;
    border:none 0;
    max-width: none;
    padding:0;
    margin:0;
}
#wowslider-container1 .ws_images > div > img {
    max-height:640px;
}

#wowslider-container1 .ws_images iframe {
    position: absolute;
    z-index: -1;
}

#wowslider-container1 .ws-title > div {
    display: inline-block !important;
}

#wowslider-container1 a{ 
    text-decoration: none; 
    outline: none; 
    border: none; 
}

#wowslider-container1  .ws_bullets { 
    float: left;
    position:absolute;
    z-index:70;
}
#wowslider-container1  .ws_bullets div{
    position:relative;
    float:left;
    font-size: 0px;
}
/* compatibility with Joomla styles */
#wowslider-container1  .ws_bullets a {
    line-height: 0;
}

#wowslider-container1  .ws_script{
    display:none;
}
#wowslider-container1 sound, 
#wowslider-container1 object{
    position:absolute;
}

/* prevent some of users reset styles */
#wowslider-container1 .ws_effect {
    position: static;
    width: 100%;
    height: 100%;
}

/* Navigation arrows for preview mode */
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev{
    position:absolute;
    top:50%;
    width:3.6em;
    height:3.6em;
    margin:-2.8em 0 0 0;
    z-index:60;
    cursor:pointer;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    opacity:0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); 
}
#wowslider-container1 a.ws_next{
    right:2%;
    background: url(../img/slideshow/next1.png) no-repeat 50% 50%;
    background-size: 100%;
    cursor:pointer;
}
#wowslider-container1 a.ws_prev{
    left:2%;
    background: url(../img/slideshow/prev1.png) no-repeat 50% 50%;
    background-size: 100%;
    cursor:pointer;
}
#wowslider-container1 a.ws_next:hover, #wowslider-container1 a.ws_prev:hover{
    opacity:0.9;
        -webkit-transform: scale(1.1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);   
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
}
#wowslider-container1 .ws_bullets a {
    position:relative;
    background:url("../img/slideshow/bullet.png") no-repeat scroll 0 0 transparent;
    border:0 none;
    float:left;
    cursor:pointer;
    height:10px;
    margin-right:4px;
    text-indent:-9999px;
    width:10px;
    z-index:100;
    outline:none;
    color:transparent;
}
#wowslider-container1 a.ws_selbull,#wowslider-container1 a.ws_overbull,#wowslider-container1 .ws_bullets a:hover{
    background-position:100% 0;
}

/* bottom center */
#wowslider-container1  .ws_bullets {
    bottom:20px;
    left:50%;
}
#wowslider-container1  .ws_bullets div{
    left:-50%;


}
#wowslider-container1 .ws-title div{
display:none;
    font-size: 0.857em;
    margin-top:0.25em;
}#wowslider-container1 .ws_images > ul{
    animation: wsBasic 20s infinite;
    -moz-animation: wsBasic 20s infinite;
    -webkit-animation: wsBasic 20s infinite;
}
@keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }
@-moz-keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }

#wowslider-container1 .ws_bullets  a img{
    text-indent:0;
    display:none;
    bottom:10px;
    left:-72px;
    visibility:hidden;
    position:absolute;
    -moz-box-shadow: 0 0 5px #999999;
    box-shadow: 0 0 5px #999999;
    max-width:none;
}

#wowslider-container1 .ws_bulframe div div{
    display: none;
}
#wowslider-container1 .ws_bulframe div {
display: none;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
display: none;
}
#wowslider-container1 .ws_bulframe span{
    display: none;
}#wowslider-container1 .ws_bulframe div div{
    height: auto;
}

@media all and (max-width:760px) {
    #wowslider-container1 .ws_fullscreen {
        display: block;
    }
}
@media all and (max-width:400px){
    #wowslider-container1 .ws_controls,
    #wowslider-container1 .ws_bullets,
    #wowslider-container1 .ws_thumbs{
        display: none
    }

    /*/
BORDER UP
    /*/
#borderup {
  position: absolute;
  bottom: 0px; 
    }

HTML：

 <!-- Start slider image section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1" title=""/></li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan" title=""</li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby" title=""/></li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1" title=""/></li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking" title=""/></li>
    </div> </ul>
    <div class="ws_bullets"><div>
        <a href="#" title="shakespeare1"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1"/>2</span></a>
        <a href="#" title="horror"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan"/>3</span></a>
        <a href="#" title="gatsby"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby"/>4</span></a>
        <a href="#" title="hemingway"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1"/>5</span></a>
      <a href="#" title="punk"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking"/>5</span></a>
    </div></div>
       </div>
       </div>       

     <div class="borderup"><img src="http://englishclass.dk/_themes/englishclass/img/border-up.png"/></div>

        <!-- End slider image section -->
css image positioning
1个回答
0
投票

您的html和css标记中有一些错误。尝试编写美容代码以减少错误。在CSS和HTML区域的js提琴手中看到您的红点可以帮助您发现问题。

我修复了您的代码，您可以看到它：

#wowslider-container1 {
	zoom: 1;
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	max-width: auto;
	max-height: 640px;
	font-size: 10px;
	/* reset box-sizing (to boostrap friendly) */
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

* html #wowslider-container1 {
	width: 2220px
}

#wowslider-container1 .ws_images ul {
	position: relative;
	width: 10000%;
	height: 100%;
	left: 0px;
	top: 0px;
	list-style: none;
	margin: 0;
	padding: 0;
	border-spacing: 0;
	overflow: hidden;
	/*table-layout:fixed;
    */
}

#wowslider-container1 .ws_images ul li {
	position: relative;
	width: 1%;
	height: 100%;
	line-height: 0;
	/*opera*/
	overflow: hidden;
	top: 0px;
	left: 0px;
	float: left;
	/*font-size:0;
    */
	padding: 0 0 0 0 !important;
	margin: 0 0 0 0 !important;
}

.wowslider-container1 img {
	position: absolute;
	left: 0;
	bottom: 0;
}

#wowslider-container1 .ws_images {
	position: relative;
	left: 0;
	top: 0;
	height: 100%;
	max-height: 640px;
	max-width: auto;
	vertical-align: top;
	border: none;
	overflow: hidden;
}

#wowslider-container1 .ws_images ul a {
	width: 100%;
	height: 100%;
	max-height: 640px;
	display: none;
}

#wowslider-container1 img {
	max-width: none !important;
}

#wowslider-container1 .ws_images .ws_list img,
#wowslider-container1 .ws_images>div>img {
	width: 100%;
	border: none 0;
	max-width: none;
	padding: 0;
	margin: 0;
}

#wowslider-container1 .ws_images>div>img {
	max-height: 640px;
}

#wowslider-container1 .ws_images iframe {
	position: absolute;
	z-index: -1;
}

#wowslider-container1 .ws-title>div {
	display: inline-block !important;
}

#wowslider-container1 a {
	text-decoration: none;
	outline: none;
	border: none;
}

#wowslider-container1 .ws_bullets {
	float: left;
	position: absolute;
	z-index: 70;
}

#wowslider-container1 .ws_bullets div {
	position: relative;
	float: left;
	font-size: 0px;
}


/* compatibility with Joomla styles */

#wowslider-container1 .ws_bullets a {
	line-height: 0;
}

#wowslider-container1 .ws_script {
	display: none;
}

#wowslider-container1 sound,
#wowslider-container1 object {
	position: absolute;
}


/* prevent some of users reset styles */

#wowslider-container1 .ws_effect {
	position: static;
	width: 100%;
	height: 100%;
}


/* Navigation arrows for preview mode */

#wowslider-container1 a.ws_next,
#wowslider-container1 a.ws_prev {
	position: absolute;
	top: 50%;
	width: 3.6em;
	height: 3.6em;
	margin: -2.8em 0 0 0;
	z-index: 60;
	cursor: pointer;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	opacity: 0.6;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

#wowslider-container1 a.ws_next {
	right: 2%;
	background: url(../img/slideshow/next1.png) no-repeat 50% 50%;
	background-size: 100%;
	cursor: pointer;
}

#wowslider-container1 a.ws_prev {
	left: 2%;
	background: url(../img/slideshow/prev1.png) no-repeat 50% 50%;
	background-size: 100%;
	cursor: pointer;
}

#wowslider-container1 a.ws_next:hover,
#wowslider-container1 a.ws_prev:hover {
	opacity: 0.9;
	-webkit-transform: scale(1.1);
	-ms-transition: all 200ms ease-in;
	-ms-transform: scale(1.1);
	-moz-transition: all 200ms ease-in;
	-moz-transform: scale(1.1);
	transition: all 200ms ease-in;
	transform: scale(1.1);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

#wowslider-container1 .ws_bullets a {
	position: relative;
	background: url("../img/slideshow/bullet.png") no-repeat scroll 0 0 transparent;
	border: 0 none;
	float: left;
	cursor: pointer;
	height: 10px;
	margin-right: 4px;
	text-indent: -9999px;
	width: 10px;
	z-index: 100;
	outline: none;
	color: transparent;
}

#wowslider-container1 a.ws_selbull,
#wowslider-container1 a.ws_overbull,
#wowslider-container1 .ws_bullets a:hover {
	background-position: 100% 0;
}


/* bottom center */

#wowslider-container1 .ws_bullets {
	bottom: 20px;
	left: 50%;
}

#wowslider-container1 .ws_bullets div {
	left: -50%;
}

#wowslider-container1 .ws-title div {
	display: none;
	font-size: 0.857em;
	margin-top: 0.25em;
}

#wowslider-container1 .ws_images>ul {
	animation: wsBasic 20s infinite;
	-moz-animation: wsBasic 20s infinite;
	-webkit-animation: wsBasic 20s infinite;
}

@keyframes wsBasic {
	0% {
		left: -0%
	}
	10% {
		left: -0%
	}
	20% {
		left: -100%
	}
	30% {
		left: -100%
	}
	40% {
		left: -200%
	}
	50% {
		left: -200%
	}
	60% {
		left: -300%
	}
	70% {
		left: -300%
	}
	80% {
		left: -400%
	}
	90% {
		left: -400%
	}
}

@-moz-keyframes wsBasic {
	0% {
		left: -0%
	}
	10% {
		left: -0%
	}
	20% {
		left: -100%
	}
	30% {
		left: -100%
	}
	40% {
		left: -200%
	}
	50% {
		left: -200%
	}
	60% {
		left: -300%
	}
	70% {
		left: -300%
	}
	80% {
		left: -400%
	}
	90% {
		left: -400%
	}
}

@-webkit-keyframes wsBasic {
	0% {
		left: -0%
	}
	10% {
		left: -0%
	}
	20% {
		left: -100%
	}
	30% {
		left: -100%
	}
	40% {
		left: -200%
	}
	50% {
		left: -200%
	}
	60% {
		left: -300%
	}
	70% {
		left: -300%
	}
	80% {
		left: -400%
	}
	90% {
		left: -400%
	}
}

#wowslider-container1 .ws_bullets a img {
	text-indent: 0;
	display: none;
	bottom: 10px;
	left: -72px;
	visibility: hidden;
	position: absolute;
	-moz-box-shadow: 0 0 5px #999999;
	box-shadow: 0 0 5px #999999;
	max-width: none;
}

#wowslider-container1 .ws_bulframe div div {
	display: none;
}

#wowslider-container1 .ws_bulframe div {
	display: none;
}

#wowslider-container1 .ws_bullets .ws_bulframe {
	display: none;
}

#wowslider-container1 .ws_bulframe span {
	display: none;
}

#wowslider-container1 .ws_bulframe div div {
	height: auto;
}

@media all and (max-width:760px) {
	#wowslider-container1 .ws_fullscreen {
		display: block;
	}
}

@media all and (max-width:400px) {
	#wowslider-container1 .ws_controls,
	#wowslider-container1 .ws_bullets,
	#wowslider-container1 .ws_thumbs {
		display: none
	}
}


/*/
 BORDER UP 
/*/

.borderup {
	position: absolute;
	bottom: 0px;
	width: 100%;
}
<div id="wowslider-container1">
    <div class="ws_images">
        <ul>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1" title="" /></li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan" title="" /> </li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby" title="" /></li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1" title="" /></li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking" title="" /></li>
        </ul>
    </div>

    <div class="ws_bullets">
        <div>
            <a href="#" title="shakespeare1"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1"/>2</span></a>
            <a href="#" title="horror"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan"/>3</span></a>
            <a href="#" title="gatsby"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby"/>4</span></a>
            <a href="#" title="hemingway"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1"/>5</span></a>
            <a href="#" title="punk"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking"/>5</span></a>
        </div>
    </div>
    <div class="borderup">
      <img src="http://englishclass.dk/_themes/englishclass/img/border-up.png" />
    </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.