pc相册效果制作
<div id="cont_one_3" class="one"><div class="score_in_share"><div class="show"><img src="images/score_share1.gif" /></div><div class="cl"></div></div><div class="pic_con"><div class="btn_change left_btn"><img src="images/left.gif" width="26" height="201" /></div><div class="btn_change right_btn"><img src="images/right.gif" width="26" height="201" /></div><div class="pic_content"><div class="pic_lists"><ul><li class="on"><img src="images/score_share1.gif" width="158" /></li><li><img src="images/score_share2.gif" width="158" /></li><li><img src="images/score_share1.gif" width="158" /></li><li><img src="images/score_share2.gif" width="158" /></li><li><img src="images/score_share1.gif" width="158" /></li><li><img src="images/score_share2.gif" width="158" /></li><li><img src="images/score_share2.gif" width="158" /></li><li><img src="images/score_share1.gif" width="158" /></li><li><img src="images/score_share2.gif" width="158" /></li><li><img src="images/score_share1.gif" width="158" /></li><li><img src="images/score_share2.gif" width="158" /></li><li><img src="images/score_share2.gif" width="158" /></li><li><img src="images/score_share1.gif" width="158" /></li><li><img src="images/score_share2.gif" width="158" /></li><li><img src="images/score_share1.gif" width="158" /></li></ul></div></div></div><script>$(".pic_lists li").click(function(){$(".pic_lists li").removeClass("on");$(this).addClass("on");n=$(this).children("img")[0].src;s=$(".score_in_share .show").children("img").attr("src",n);})</script><script type="text/javascript">$(function(){var page=1;var i=3;var $p_Div=$(".pic_content");var $picDiv=$(".pic_lists");var picNum=$picDiv.children("ul").children("li").length;var page_count=Math.ceil(picNum/3);var $pDiv_w=$p_Div.width()+30;$(".right_btn").click(function(){if(page_count>page){$picDiv.animate({left:'-'+page*$pDiv_w+"px"},"normal");page++;$(".left_btn").css({'background':'url(images/leftstart.jpg) no-repeat'});if(page>=page_count){$(this).css({'background':'url(images/rightstop.jpg) no-repeat'});}else{$(this).css({'background':'url(images/rightstart.jpg) no-repeat'});}} $(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); });$(".left_btn").click(function(){if(page>1){$picDiv.animate({left:"+="+$pDiv_w+'px'},"normal");page--;$(".right_btn").css({'background':'url(images/rightstart.jpg) no-repeat'});if(page<=1){$(this).css({'background':'url(images/leftstop.jpg) no-repeat'}); }else{$(this).css({'background':'url(images/leftstart.jpg) no-repeat'});}}$(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); });$(".pic_lists>ul>li").hover(function(){$(this).children("p").show();},function(){$(this).children("p").hide();});})</script></div>
手机相册效果制作（需插件辅助）
<title>来跑吧-Running Club Med-桂林站</title><link rel="stylesheet" href="css/swiper.min.css" /><script src="js/jquery-1.7.2.min.js"></script> <script src="js/swiper.min.js"></script><script>function initSwiper(){var swiper = new Swiper('.swiper-container', {nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',pagination: '.swiper-pagination',paginationType: 'fraction'});}</script><div id="cont_one_2" class="one"><div class="score_in_share swiper-container"><div class="score_in_share1 swiper-wrapper"><div class="swiper-slide"><img src="images/share1.jpg" style="border:15px solid #f0f0f0;"><span class="score_in_km">21.0975KM</span><span class="score_in_date">.10.18</span><span class="score_in_time">1:48:23</span></div><div class="swiper-slide"><img src="images/share1.jpg" style="border:15px solid #f0f0f0;"><span class="score_in_km">21.0975KM</span><span class="score_in_date">.10.18</span><span class="score_in_time">1:30:03</span></div><div class="swiper-slide"><img src="images/share1.jpg" style="border:15px solid #f0f0f0;"><span class="score_in_km">21.0975KM</span><span class="score_in_date">.10.18</span><span class="score_in_time">1:48:23</span></div><div class="swiper-slide"><img src="images/share1.jpg" style="border:15px solid #f0f0f0;"><span class="score_in_km">21.0975KM</span><span class="score_in_date">.10.18</span><span class="score_in_time">1:30:03</span></div></div><!-- Add Pagination --><div class="swiper-pagination"></div><!-- Add Arrows --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div> <div class="clear"></div></div>
