Question

我创建了一个包含图片的框，但我要做的是：

要么内嵌显示图像，要么将它们放在彼此的顶部，然后使用JQuery在它们之间导航。

我已尝试在.box和.box img以及display: inline上进行绝对定位，但它们会破坏代码。

到目前为止：

.box {
    position: absolute;
    left: 10%;
    width: 80%;
    border: 10px solid white;
    border-radius: 10px;
    box-shadow: 0 0 4px black;
  }

  .box img {
    width: 100%;
  }

  .prev, .next {
    border: 1px solid black;
    padding: 5px;
  }

  .prev:Hover, .next:Hover {
    background-color: red;
    color: white;
    text-decoration: none;
  }

<div class="container-fluid">
<h1>Welcome Within</h1>
	<div class="box">
	  <img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
		<img src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
		<img src="https://r.mprd.se/media/images/66295-Prince_Of_Persia_Warrior_Within_READNFO-4.jpg" />
    <br /></br />
    <a href="#" class="prev">PREVIOUS</a>
    &nbsp;
    <a href="#" class="next">NEXT</a>
	</div>
  </div>

Answer 1

试试这个：

＆＃13;

.box {
  position: absolute;
  left: 10%;
  width: 80%;
  border: 10px solid white;
  border-radius: 10px;
  box-shadow: 0 0 4px black;
  height: 300px;
  overflow: hidden;
  margin-bottom: 10px;
}

.caption {
  position: absolute;
  top: 10px;
  color: red;
  font-size: 20px;
  background: #fff;
  left: 30%;
}

.box img {
  width: 100%;
}

.prev,
.next {
  border: 1px solid black;
  padding: 5px;
}

.prev:Hover,
.next:Hover {
  background-color: red;
  color: white;
  text-decoration: none;
}

＆＃13;

<div class="container-fluid">
  <h1>Welcome Within</h1>
  <div class="slider">
    <a href="#" class="prev">PREVIOUS</a>
    <a href="#" class="next">NEXT</a>
    <div class="box">
      <img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
      <p class="caption">Caption1</p>
    </div>
    <div class="box">
      <img src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
      <p class="caption">Caption2</p>
    </div>
    <div class="box">
      <img src="https://r.mprd.se/media/images/66295-Prince_Of_Persia_Warrior_Within_READNFO-4.jpg" />
      <p class="caption">Caption3</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我试过这个：

$(document).ready(function() {
  $('.lightbox').click(function() {
    $('.backdrop, .box').animate({
      'opacity': '.50'
    }, 300, 'linear');
    $('.box').animate({
      'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
  });

  $('.close').click(function() {
    close_box();
  });

  $('.backdrop').click(function() {
    close_box();
  });

	//SlideShow
	$('.next').click(function(){
		clickNext();
	});
	$('.prev').click(function(){
		clickPrev();
	});

});

function close_box() {
  $('.backdrop, .box').animate({
    'opacity': '0'
  }, 300, 'linear', function() {
    $('.backdrop, .box').css('display', 'none');
  });
}

//PREVIOUS
function clickPrev() {
	$('.img_1').css('display', 'block');
	//Move to the prev Image
	$('.img_2').css('display', 'none');
}

//NEXT
function clickNext() {
	$('.img_1').css('display', 'none');
	//Move to the next Image
	$('.img_2').css('display', 'block');
}

body {
  font-family: Helvetica, Arial;
}

.backdrop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .0;
  filter: alpha(opacity=0);
  z-index: 50;
  display: none;
}

.box {
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 50%;
  background: white;
  text-align: left;
  z-index: 51;
  padding: 0;
	margin: 0;
  display: none;
	-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #444444;
  -webkit-box-shadow: 0px 0px 5px #444444;
  box-shadow: 0px 0px 5px #444444;
  border: 10px solid #fff;
	width: 44%;
}

.box img {
	width: 100%;
}

.box img:nth-child(2) {
	display: none;
}

.caption {
	padding-top: 10px;
  font-size: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<h1>Welcome Within</h1>
	<a href="#" class="lightbox">Open Lightbox</a>
	<div class="backdrop"></div>
	<div class="box">
	  <img class="img_1" src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
		<img class="img_2" src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />

	  <div class="caption">
			<p>This thing is called 'Caption'...Feels nice. Let me tell you:</p>
      <hr />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	  </div>

    <a href="#" class="prev">PREVIOUS</a>
	  &nbsp;
	  <a href="#" class="next">NEXT</a>
</div>
	</div>

用于幻灯片放映的盒子内的图像定位

2 个答案: