小贝子编程

如何相对于幻灯片所在的列而不是页面来定位幻灯片的下一个/上一个按钮？(奖励：让他们转圈？



好吧。我的网站上有一个幻灯片。它应该在我网站的一个专栏里。图像与列的一致性很好；下一个"；以及"；先前的"；不要。我希望它们位于幻灯片所在列的左右两侧，最好也垂直居中。

额外奖励：有没有办法让下一个和上一个按钮变成圆形？

这是我为这个页面设想的一个模型。

这是我的代码：

var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Homepage</title>
<style>
@font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
@font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 0px 10px;
font-size: 16px;
font-family: Klik;
display: flex;
}
.main p {
font-size: 14px;
font-family: Klik;
color: #000000;
}
.main h1 {
font-size: 24px;
font-family: theBoldFont;
color: #000000;
}
.main a {
font-size: 12px;
font-family: Klik;
color: #808080;
}

.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 28px;
font-family: theBoldFont;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.return {
padding: 5px 0px 5px 5px;
right: 0;
margin-left: 200px;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.return a {
width: 100%;
height: 0px;
text-decoration: none;
font-size: 12px;
font-family: Klik;
color: #000000;
display: inline-block;
}
.row {
display: -webkit-flex;
display: flex;
}

.column1 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin-left: 200px;
}
.column2 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
}
.column2 h1 {
font-family: theBoldFont;
font-size: 28px;
}
.column2 h {
font-family: theBoldFont;
}
.column2 p {
font-family: Klik;
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
margin-left: 200px;
font-family: Klik;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 42%;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}


</style>
</head>
<body>
<div class="return">
<a href="#"><< Back</a>
</div>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
<a href="#">Graphic Design</a>
<a href="#">Illustration</a>
<a href="#">Animations</a>
<a href="#">Photography</a>
<a href="#">Writing</a>
<a href="#">Fashion Design</a>
<b></b>
<b></b>
<a href="#">About</a>
</div>
<div class="row">
<div class="column1" style="background-color:#aaa;">
<div class="mySlides">
<center><img src="Block.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block2.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block3.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block4.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block5.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block3.png" style="width:75%"></center>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<div class="column2" style="background-color:#bbb;">
<h1>This is the title of the design</h1>
<h>Date of Origin: </h><p>(e.g. Summer 2020)</p>
<h>Purpose: </h><p>(e.g. Freelance Commission)</p>
<h>Medium: </h><p>(e.g. Digital PDF)</p>
<h>Program(s) Utilized: </h><p>(e.g. Adobe Photoshop, Adobe InDesign)</p>
<h>Relevant to Positions: </h><p>(e.g. Freelance Graphic Designer)</p>
<h></h>
</div>
</div>
<div class="footer">
<p>Description of process and intention behind the work. Ique nulparunt, consed et ullacep tatur? Hilluptat esti ut velest, simus, nos et dionseq uidigenducia sequis aut aut vellabor a consequat venim eum res nos vendam si sus.
Menihil estias illest ipsae de doluptis apit fugiandae. Nonsequist, simus.
Fic tem re volupid mos es et et, exeris eata doles dollati busdam quati unt.
Ugitiosapis aborpore ea nonsed que velique milicii ssitiatem. Nequia seque as sinvella qui in poresti niment plique mod maio eossecatur? Uriatus.
Endunt res velest, officideliam doluptaspel ipis in cone secto ipsum quas mos autempos</p>
</div>
<script src="move.js"></script>
</body>
</html>

CSS:

column1类现在具有属性positon:relative；

prev和next都获得属性边界半径：50%；

下一个类现在具有产权：0%；

@font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
@font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 0px 10px;
font-size: 16px;
font-family: Klik;
display: flex;
}
.main p {
font-size: 14px;
font-family: Klik;
color: #000000;
}
.main h1 {
font-size: 24px;
font-family: theBoldFont;
color: #000000;
}
.main a {
font-size: 12px;
font-family: Klik;
color: #808080;
}

.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 28px;
font-family: theBoldFont;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.return {
padding: 5px 0px 5px 5px;
right: 0;
margin-left: 200px;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.return a {
width: 100%;
height: 0px;
text-decoration: none;
font-size: 12px;
font-family: Klik;
color: #000000;
display: inline-block;
}
.row {
display: -webkit-flex;
display: flex;
}

.column1 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin-left: 200px;
position:relative;
}
.column2 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
}
.column2 h1 {
font-family: theBoldFont;
font-size: 28px;
}
.column2 h {
font-family: theBoldFont;
}
.column2 p {
font-family: Klik;
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
margin-left: 200px;
font-family: Klik;
}
/* Responsive layout - makes the three columns stack on top of each other                                                 instead of next to each other */
@media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 50%;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0%;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

我不清楚你说的让它们变圆是什么意思。这就是你想要实现的吗？

var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Homepage</title>
<style>
@font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
@font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 0px 10px;
font-size: 16px;
font-family: Klik;
display: flex;
}
.main p {
font-size: 14px;
font-family: Klik;
color: #000000;
}
.main h1 {
font-size: 24px;
font-family: theBoldFont;
color: #000000;
}
.main a {
font-size: 12px;
font-family: Klik;
color: #808080;
}

.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 28px;
font-family: theBoldFont;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.return {
padding: 5px 0px 5px 5px;
right: 0;
margin-left: 200px;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.return a {
width: 100%;
height: 0px;
text-decoration: none;
font-size: 12px;
font-family: Klik;
color: #000000;
display: inline-block;
}
.row {
display: -webkit-flex;
display: flex;
}

.column1 {
-webkit-flex: 1;
position: relative;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin-left: 200px;
}
.column2 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
}
.column2 h1 {
font-family: theBoldFont;
font-size: 28px;
}
.column2 h {
font-family: theBoldFont;
}
.column2 p {
font-family: Klik;
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
margin-left: 200px;
font-family: Klik;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
box-sizing: border-box;
border-radius: 50%;
padding: 16px 22px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
-webkit-user-select: none;
box-sizing: border-box;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
.prev {
left: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}


</style>
</head>
<body>
<div class="return">
<a href="#"><< Back</a>
</div>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
<a href="#">Graphic Design</a>
<a href="#">Illustration</a>
<a href="#">Animations</a>
<a href="#">Photography</a>
<a href="#">Writing</a>
<a href="#">Fashion Design</a>
<b></b>
<b></b>
<a href="#">About</a>
</div>
<div class="row">
<div class="column1" style="background-color:#aaa;">
<div class="mySlides">
<center><img src="Block.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block2.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block3.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block4.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block5.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block3.png" style="width:75%"></center>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<div class="column2" style="background-color:#bbb;">
<h1>This is the title of the design</h1>
<h>Date of Origin: </h><p>(e.g. Summer 2020)</p>
<h>Purpose: </h><p>(e.g. Freelance Commission)</p>
<h>Medium: </h><p>(e.g. Digital PDF)</p>
<h>Program(s) Utilized: </h><p>(e.g. Adobe Photoshop, Adobe InDesign)</p>
<h>Relevant to Positions: </h><p>(e.g. Freelance Graphic Designer)</p>
<h></h>
</div>
</div>
<div class="footer">
<p>Description of process and intention behind the work. Ique nulparunt, consed et ullacep tatur? Hilluptat esti ut velest, simus, nos et dionseq uidigenducia sequis aut aut vellabor a consequat venim eum res nos vendam si sus.
Menihil estias illest ipsae de doluptis apit fugiandae. Nonsequist, simus.
Fic tem re volupid mos es et et, exeris eata doles dollati busdam quati unt.
Ugitiosapis aborpore ea nonsed que velique milicii ssitiatem. Nequia seque as sinvella qui in poresti niment plique mod maio eossecatur? Uriatus.
Endunt res velest, officideliam doluptaspel ipis in cone secto ipsum quas mos autempos</p>
</div>
<script src="move.js"></script>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium