首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2013-09-12 
基于transition完成的特效轮播相册htmlheadmeta charsetutf-8script srchttp://libs.baidu.co

基于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>


热点排行