基于transition完成的奇效轮播相册 _Web前端

基于transition完成的特效轮播相册
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script type="text/javascript"></script>
    <style type="text/css">
    /*img{
        width: 500px;
        height: 200px;
    }*/
 #demoSliderContainer {
  background: #000;
  -moz-box-shadow: 1px 1px 5px #000;
  -webkit-box-shadow: 1px 1px 5px #000;
  box-shadow: 1px 1px 5px #000;
  padding: 0;
  overflow: hidden;
  margin: 10px auto;
  width: 560px;
}
    
#demoSlider {
  border: 1px solid #000;
  border-width: 5px 5px 0;
  height: 220px;
  margin: 0 auto;
  width: 550px;
  overflow: hidden;
  position: relative;
}
    
.slide-images .slide-image {
  position: absolute;
}
    
.slide-images .slide-image img {
  z-index: 2;
}
    
.slide-images .slide-image span {
  background: rgba(0,0,0,0.3);
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;
  bottom: 4px;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  position: absolute;
  right: 0;
  z-index: 3;
}
.slide-images .slide-image.current img {
  z-index: 12;
}
    
.slide-images .slide-image.current span {
  z-index: 13;
}
    
#demoSliderContainer .options {
  padding: 3px 10px;
  text-align: center;
}
#demoSliderContainer .options a {
  color: #91BECC;
  font-family: Georgia,Serif;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}
#demoSliderContainer .options a:hover {
  color: #D3E5EB;
}
#demoSliderContainer .slide-pager a {
  -moz-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
#demoSliderContainer .slide-pager a.current {
  background-color: #91BECC;
  border-radius: 5px 5px 5px 5px;
  color: black;
  padding: 0 4px;
}
#demoSliderContainer .options .prevSlide {
  float: left;
}
#demoSliderContainer .options .nextSlide {
  float: right;
}
   
 /*transition effect*/
.slide-images .slide-image,
.slide-images .slide-image img {
   -moz-transition-duration: 1.5s;
   -webkit-transition-duration: 1.5s;
   -otransition-duration: 1.5s;
   transition-duration: 1.5s;
 }
    
 .slide-images.transition-opacity .slide-image {
   opacity: 0;
   width: 0;
 }
    
 .slide-images.transition-opacity .slide-image.current {
   opacity: 1;
   width: 550px;
 }
   
 .slide-images.transition-left .slide-image {
   left: -550px;
   opacity: 0;
 }
    
 .slide-images.transition-left .slide-image.current {
   left: 0;
   opacity: 1;
 }
    
 .slide-images.transition-right .slide-image {
   right: -550px;
   opacity: 0;
 }
 .slide-images.transition-right .slide-image.current {
   right: 0;
   opacity: 1;
 }
    
    
 .slide-images.transition-top .slide-image {
   opacity: 0;
   top: -220px;
 }
 .slide-images.transition-top .slide-image.current {
   opacity: 1;
   top: 0;
 }
    
 .slide-images.transition-bottom .slide-image {
   opacity: 0;
   bottom: -220px;
 }
 .slide-images.transition-bottom .slide-image.current {
   opacity: 1;
   bottom: 0;
 }
    
 .slide-images.transition-cornerzoom .slide-image {
   opacity: 0;
 }
    
 .slide-images.transition-cornerzoom .slide-image.current {
   opacity: 1;
 }
    
 .slide-images.transition-cornerzoom .slide-image img {
   width: 0;
 }
    
 .slide-images.transition-cornerzoom .slide-image.current img {
   width: 550px;
 }
    
 .slide-images.transition-zoom .slide-image {
   opacity: 0;
 }
 .slide-images.transition-zoom .slide-image.current {
   opacity: 1;
 }
 .slide-images.transition-zoom .slide-image img {
   left: -275px;
   position: relative;
   top: -110px;
   width: 1100px;
 }
 .slide-images.transition-zoom .slide-image.current img {
   left: 0;
   top: 0;
   width: 550px;
 }
    
 .slide-images.transition-dezoom .slide-image {
   -moz-box-shadow: 2px 2px 8px black;
   -webkit-box-shadow: 2px 2px 8px black;
   box-shadow: 2px 2px 8px black;
   opacity: 0;
 }
 .slide-images.transition-dezoom .slide-image.current {
   opacity: 1;
 }
 .slide-images.transition-dezoom .slide-image img {
   left: 275px;
   position: relative;
   top: 110px;
   width: 0;
 }
 .slide-images.transition-dezoom .slide-image.current img {
   left: 0;
   top: 0;
   width: 550px;
 }
   
 .slide-images.transition-rotate .slide-image {
   opacity: 0;
 }
 .slide-images.transition-rotate .slide-image.current {
   opacity: 1;
 }
 .slide-images.transition-rotate .slide-image img {
   width: 550;
   height: 220px;
   position: relative;
   left: -550px;
   top: -220px;
   
  }
  .slide-images.transition-rotate .slide-image.current img {
    width: 550px;
    height: 220px;
    left: 0;
    top: 0;
    -moz-transform: rotate(1440deg);
    -webkit-transform: rotate(1440deg);
    -o-transform: rotate(1440deg);
    transform: rotate(1440deg);
  }
    
    
  #options {
     margin: 20px auto;
     padding: 5px;
     width: 550px;
  }
    </style>
</head>
<body>
    <div id="demoSliderContainer">
    <ul id="demoSlider" class="slide-images">
      <li class="slide-image">
        <img src="/images/01.jpg" alt="monsters inc" />
        <span>Monsters Inc</span>
      </li>
      <li class="slide-image">
        <img src="/images/02.jpg" alt="nemo" />
        <span>Nemo</span>
      </li>
      <li class="slide-image">
        <img src="/images/03.jpg" alt="up" />
        <span>Up</span>
      </li>
      <li class="slide-image">
        <img src="/images/04.jpg" alt="walle" />
        <span>Wall-E</span>
      </li>
    </ul>
    <div class="options">
      <a href="javascript:;" class="prevSlide">Prev</a>
      <span class="slide-pager">
        <a href="" class="javascript:;">1</a>
        <a href="" class="javascript:;">2</a>
        <a href="" class="javascript:;">3</a>
        <a href="" class="javascript:;">4</a>
      </span>
      <a href="javascript:;" class="nextSlide">Next</a>
    </div>
  </div>
  <div id="options">
     <label for="transitionEffect">Transition effect :</label>
     <select id="transitionEffect">
        <option value="transition-opacity">opacity fade</option>
        <option value="transition-left">left slide</option>
        <option value="transition-right">right slide</option>
        <option value="transition-top">top slide</option>
        <option value="transition-bottom">bottom slide</option>
        <option value="transition-zoom">zoom</option>
        <option value="transition-dezoom">de-zoom</option>
        <option value="transition-cornerzoom">corner zoom</option>
        <option value="transition-rotate">rotate</option>
      </select>
  </div>
<script type="text/javascript">
    $(document).ready(function(){
        $('.slide-images').each(function(){
            var slider      = $(this);
            var slides      = $('.slide-image',slider);
            var sliderPages = $('.slider-pager');
            var currentSlideNum = 0;
            slides.removeClass('current');
            slides.eq(currentSlideNum).addClass('current');
            var goToSlide = function(slideNum){
                slides.eq(currentSlideNum).removeClass('current');
                slides.eq(slideNum).addClass('current');
                sliderPages.each(function(){
                    var pages = $('a',this);
                    pages.eq(currentSlideNum).removeClass('current');
                    pages.eq(slideNum).addClass('current');
                });
                currentSlideNum = slideNum;
            };
            var nextSlide = function(){
                var nextSlideNum = currentSlideNum + 1;
                if(nextSlideNum >= slides.size()){
                    nextSlideNum = 0;
                }
                goToSlide(nextSlideNum);
            };
            var prevSlide = function(){
                var prevSlideNum = currentSlideNum - 1;
                if(prevSlideNum < 0){
                    prevSlideNum = slides.size() - 1;
                    goToSlide(prevSlideNum);
                }
            };
            var setTransitionEffect = function(transitionEffect){
                slider.attr('class',"slide-images " + transitionEffect);
            };
            $('#transitionEffect').change(function(){
                setTransitionEffect($(this).val());
            }).change();
            $('.prevSlide').click(prevSlide);
            $('.nextSlide').click(nextSlide);
            $('.slide-pager a').each(function(i){
                if(i > slides.size()) return false;
                $(this).click(function(){
                    goToSlide(i);
                });
            });
            var lastHumanNav = 0;
            $('.prevSlide, .nextSlide, .slide-pager a').click(function(){
                lastHumanNav = new Date().getTime();
            });
            setInterval(function(){
                var now = new Date().getTime();
                if(now - lastHumanNav > 5000){
                    nextSlide();
                }
            }, 5000);
        });
    })
</script>
</body>
</html>