html - CSS3 Imageslider 和按钮过渡效果

Question

我正在尝试为我的图像 slider 创建图像和按钮 slider 过渡效果。我想让它类似于此页面 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">&lang;</a>
                    <a class="next" href="#two">&rang;</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">&lang;</a>
                    <a class="next" href="#three">&rang;</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">&lang;</a>
                    <a class="next" href="#one">&rang;</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 }

谢谢。

Answer 1

看看这个，它会帮助你实现你的目标

http://www.youtube.com/watch?v=04YPThE5rJQ