我正在尝试为mye图像滑块创建图像和按钮滑块过渡效果。我想使它与http://bit.ly/IJxtK6页面类似,但我不确定如何实现这一目标。
这是我的代码:
HTML:
<div class="slider">
<ul class="frames">
<li id="one" class="slide">
<a href="#"><img src="images/slideshow1.jpg" alt="Slide 1"></a>
<nav>
<a class="prev" href="#three">⟨</a>
<a class="next" href="#two">⟩</a>
</nav>
</li>
<li id="two" class="slide">
<a href="#"><img src="images/slideshow2.jpg" alt="Slide 2"></a>
<nav>
<a class="prev" href="#one">⟨</a>
<a class="next" href="#three">⟩</a>
</nav>
</li>
<li id="three" class="slide">
<a href="#"><img src="images/slideshow3.jpg" alt="Slide 3"></a>
<nav>
<a class="prev" href="#two">⟨</a>
<a class="next" href="#one">⟩</a>
</nav>
<li class="quicknav">
<ul>
<li><a href="#one"></a></li>
<li><a href="#two"></a></li>
<li><a href="#three"></a></li>
</ul>
</li>
</ul>
</div>
CSS:
/* ------------------ SLIDESHOW ------------------ */
/* Slider */
.slider {
height: 450px;
left: 481px;
margin: -125px -225px;
position: absolute;
top: 273px;
width: 1024px;
z-index: 0;
}
.slider .frames {
height: 450px;
position: relative;
}
.slider .frames .slide {
height: 450px;
list-style: none;
position: absolute;
width: 1024px;
}
.slider .slide:target { z-index: 100 }
.slider .frames .slide img {
height: 450px;
width: 1024px;
}
.slider .frames .slide nav a {
background: #fff;
font-size: 16px;
line-height: 50px;
margin-top: -25px;
opacity: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 45%;
width: 50px;
visibility: hidden;
z-index: 10;
color: #888;
font-weight: bold;
font-size: 20px;
}
.slider:hover .frames .slide nav a {
opacity: 1;
visibility: visible;
}
.slider .frames .slide nav .prev {
/*border-radius*/
padding: 5px;
left: 0;
}
.slider .frames .slide nav .next {
/*border-radius*/
padding: 5px;
right: 0;
}
.slider .frames .slide nav a:hover { background: #d13030; color: #fff; }
.slider .quicknav {
bottom: 0;
left: 950px;
font-size: 0;
position: absolute;
z-index: 100;
}
.slider:hover .quicknav { color: #d13030; }
.slider .quicknav li { display: inline-block }
.slider .quicknav a {
background: #fff;
/*border-radius*/
display: block;
height: 10px;
margin: 10px 5px;
text-decoration: none;
width: 10px;
}
.slider .quicknav a:hover { background: #d13030 }
感谢。