1
私はちょうど完全な初心者ですので、私が持っているもののほとんどはチュートリアルのサイトからの組み合わせですが、次の画像などを循環しようとすると、ページの上に飛び続けるということに固執しています。 どのような詳細なヘルプが本当に感謝されている完全にnewby？ 私はどこが間違っているのか分かりませんし、それを修正し始める場所がどこにないのか分かりません。画像をクリックしたときの私の「次へ」と「前の」は、ページの先頭にプッシュしますか？
#gallerywrapper {
width:640px;
height:450px;
margin:0 auto;
position:relative;
font-family:verdana, arial, sans-serif;
}
#gallerywrapper #gallery {
position:absolute;
left:0;
top:0;
height:450px;
width:640px;
overflow:hidden;
text-align:center;
}
#gallerywrapper #gallery div {
width:640px; height:900px;
padding-top:10px;
position:relative;
}
#gallerywrapper #gallery div img {
clear:both;
display:block;
margin:0 auto;
border:0;
}
#gallerywrapper #gallery div h3 {
padding:10px 0 0 0;
margin:0;
font-size:18px;
}
#gallerywrapper #gallery div p {
padding:5px 0;
margin:0;
font-size:12px;
line-height:18px;
}
#gallery .previous{
display:inline;
float:left;
margin-left:80px;
text-decoration:none;
\t
\t background-color: #ddd;
color: black;
\t border-radius: 50%;
\t
\t padding: 8px 16px;
}
#gallery .next{
display:inline;
float:right;
margin-right:80px;
text-decoration:none;
\t
\t background-color: #FA4B2A;
color: white;
\t border-radius: 50%;
\t
\t padding: 8px 16px;
}
<div id="gallerywrapper">
\t <div id="gallery">
\t \t <div id="pic1">
\t \t \t <img src="images/b1.jpg" height="350" width="500" alt="Image 1">
\t \t \t <a class="previous round" \t href="#pic5" >‹</a>
\t \t \t <a class="next round" href="#pic2" \t >›</a>
\t \t \t \t <h3>Botanical Gardens</h3>
\t \t \t \t
\t \t \t
\t \t \t
\t \t </div>
\t \t <div id="pic2">
\t \t \t <img src="images/b2.jpg" height="350" width="500" alt="Image 2">
\t \t \t <a class="previous round" href="#pic1">‹</a>
\t \t \t <a class="next round" href="#pic3">›</a>
\t \t \t <h3>Botanical Gardens</h3>
\t \t \t
\t \t </div>
\t \t <div id="pic3">
\t \t \t <img src="images/b3.jpg" height="350" width="500" alt="Image 3">
\t \t \t <a class="previous round" href="#pic2">‹</a>
\t \t \t <a class="next round" href="#pic4">›</a>
\t \t \t <h3>Botanical Gardens</h3>
\t \t \t
\t \t </div>
\t \t <div id="pic4">
\t \t \t <img src="images/b4.jpg" height="350" width="500" alt="Image 4">
\t \t \t <a class="previous round" href="#pic3">‹</a>
\t \t \t <a class="next round" href="#pic5">›</a>
\t \t \t <h3>Botanical Gardens</h3>
\t \t \t
\t \t </div>
\t \t <div id="pic5">
\t \t \t <img src="images/b5.jpg" height="350" width="500" alt="Image 5">
\t \t \t <a class="previous round" href="#pic4">‹</a>
\t \t \t <a class="next round" href="#pic1">›</a>
\t \t \t <h3>Botanical Gardens</h3>
\t \t \t
\t \t </div>
\t </div>
\t </div>