idangerous.swiper.js怎么样获取当前页面

<!DOCTYPE html>



demo







<br> body { margin: 0; }<br> .swiper-container { width: 100%; height: 480px; }<br> .swiper-slide img { width: 100%; }<br> #audio_btn { position: absolute; left: 10px; bottom: 10px; z-index: 200; display: none; width: 50px; height: 50px; background-repeat: no-repeat; }<br> .loading_background { background-image: url(img/music_loading.gif); background-size: 30px 30px; opacity: 0.5; background-position: center center; }<br> .loading_yinfu { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-image: url(img/yinfu.png); background-repeat: no-repeat; background-position: center center; }<br> .play_yinfu { background-image: url(img/music.gif); background-repeat: no-repeat; background-position: center center; background-size: 60px 60px; }<br> .rotate { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-size: 100% 100%; background-image: url(img/music_off.png); -webkit-animation: rotating 1.2s linear infinite; -moz-animation: rotating 1.2s linear infinite; -o-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite; }<br> @-webkit-keyframes rotating { from {<br> -webkit-transform: rotate(0deg);<br> }<br> to { -webkit-transform: rotate(360deg); }<br> }<br> @keyframes rotating { from {<br> transform: rotate(0deg);<br> }<br> to { transform: rotate(360deg); }<br> }<br> @-moz-keyframes rotating { from {<br> -moz-transform: rotate(0deg);<br> }<br> to { -moz-transform: rotate(360deg); }<br> }<br> .off { background-image: url(img/music_off.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: center center; }<br> @-webkit-keyframes start { 0%, 30% {<br> opacity: 0;<br> -webkit-transform: translate(0, 10px);<br> }<br> 60% {<br> opacity: 1;<br> -webkit-transform: translate(0, 0);<br> }<br> 100% {<br> opacity: 0;<br> -webkit-transform: translate(0, -8px);<br> }<br> }<br> @-moz-keyframes start { 0%, 30% {<br> opacity: 0;<br> -moz-transform: translate(0, 10px);<br> }<br> 60% {<br> opacity: 1;<br> -moz-transform: translate(0, 0);<br> }<br> 100% {<br> opacity: 0;<br> -moz-transform: translate(0, -8px);<br> }<br> }<br> @keyframes start { 0%, 30% {<br> opacity: 0;<br> transform: translate(0, 10px);<br> }<br> 60% {<br> opacity: 1;<br> transform: translate(0, 0);<br> }<br> 100% {<br> opacity: 0;<br> transform: translate(0, -8px);<br> }<br> }<br>

$(function(){ $('#audio_btn').click(function() { if($(this).hasClass('play_yinfu')){ $(this).attr('class','off'); $(this).find('#yinfu').removeClass(); $('audio')[0].pause(); }else{ $(this).attr('class','play_yinfu'); $(this).find('#yinfu').addClass('rotate'); $('audio')[0].play(); } }); });

var mySwiper; setTimeout("ready()", 1000); function ready(){ if($("img")[0].height == 0){ $("img")[0].onload = function () { $(".swiper-container").css("height", $("img")[0].height); mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true, mode: 'vertical', speed : 500, freeMode:true, freeModeFluid:true, // onSlidePrev:function(swiper){ // alert(2); // } }) } } else { $(".swiper-container").css("height", $("img")[0].height); mySwiper = new Swiper('.swiper-container',{ pagination: false, paginationClickable: true, mode: 'vertical', }) // mySwiper.activeSlide = function(swiper){ // alert(swiper) // $('header').addClass('animated fadeInDown'); // } } } $(".swiper-container").css("height", document.documentElement.clientHeight+"px"); $(".swiper-slide").css("height", $("img")[0].height+"px"); // alert($(".swiper-slide").css("height")+"haha"+$("img")[0].height+"nrg"+$(".swiper-container").css("height"));



要做css3动画效果，急求