pc相册制作，手机版相册制作

来源：互联网发布：大数据imf 编辑：程序博客网时间：2024/05/01 06:10

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>

1 0