Question

首先，我需要为我脆弱的英语道歉。

我正在使用HTML，CSS和JavaScript进行幻灯片演示（但此任务不需要JavaScrpt）。问题是，当我调整window的大小时，左侧和右侧的箭头不在元素的上方，但它会推送列表项。为避免混淆，我有JSfiddle

以下使用的代码：

＆＃13;

h1 {
	font-family: 'Raleway', sans-serif;
	text-align: center;
	padding: 50px 0px;
	text-transform: uppercase;
	font-weight: 200;
}
.games-slideshow {
	position: relative;
	width: 100%;
	height: 500px;
	background-color: red;
}
.games-slideshow .left-arrow {
	float: left;
	opacity: .5;
	margin-left: 20px;
	cursor: pointer;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
}
.games-slideshow .right-arrow {
	float: right;
	opacity: .5;
	margin-right: 20px;
	cursor: pointer;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
}
.games-slideshow .navigate {
	width: 100px;
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.games-slideshow .navigate ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}
.games-slideshow .navigate ul li {
	display: inline-block;
	padding: 0px 5px 0px 0px;
	list-style: none;
}
.games-slideshow .navigate ul li img {
	height: 20px;
	cursor: pointer;
	opacity: .5;
	transform: opacity 0.15s ease-in-out;
}
.games-slideshow .navigate ul li img:hover {
	opacity: 1;
	transform: opacity 0.15s ease-in-out;
}
.games-slideshow .page1 {
	position: relative;
	max-width: 1200px;
	height: 60%;
	background-color: yellow;
	top: 50%;
	transform: translateY(-50%);
	margin: auto;
	padding: 0px;
}
.games-slideshow .page1 li {
	position: relative;
	height: 100%!important;
	max-width: 320px;
	display: inline-block;
	background-color: green;
	list-style: none;
}
.games-slideshow .page1 .not-last {
	margin-right: 12.15%;
}
.games-slideshow .page1 .last {
	margin-right: 0%!important;
}

＆＃13;

<body>
<div class="games-slideshow"> <img class="left-arrow" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/leftSlideShowArrow.png"/> <img class="right-arrow" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/rightSlideShowArrow.png"/>
  <div class="navigate">
    <ul>
      <li><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
      <li><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
      <li><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
      <li class="last"><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
    </ul>
  </div>
  <ul class="page1">
    <li class="not-last">
      <div class="game">
        <p>Game Title</p>
        <a>More</a> </div>
    </li>
    <li class="not-last">
      <div class="game">
        <p>Game Title</p>
        <a>More</a> </div>
    </li>
    <li class="last">
      <div class="game">
        <p>Game Title</p>
        <a>More</a> </div>
    </li>
  </ul>
</div>
<p id="debug"></p>
</body>

＆＃13;

尝试调整窗口大小以查看箭头推送列表项的问题。这是我面临的问题。有谁知道如何让这些箭头不推动或影响幻灯片中的元素？

感谢您的回答！

Answer 1

你会发现很多相同的例子。

逻辑很简单：将带有绝对位置的箭头放在图像容器的左右两侧。在图片的容器中，设置white-space: nowrap，这样您的商品就不会浮动。相应地设置项目的宽度。然后使用JS / jQuery处理滑块。或者等一下，你可以使用任何现有的JS滑块！

一些不错的滑块是：

http://www.menucool.com/slider/javascript-image-slider-demo4

http://www.jssor.com/

CSS：将幻灯片放映的箭头（图像）放在它的内部元素之上

1 个答案: