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">2015.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">2015.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">2015.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">2015.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>