首页 > 代码修改 > 添加点点文章模块幻灯片的方法
2012
09-07

添加点点文章模块幻灯片的方法

添加点点文章模块幻灯片的方法 - 第1张  | 心岛博客

如上图所示,首先说下思路:本次我通过使用点点自定义视图的方式调取文章数据,然后套用slide插件将调取到的最新文章以幻灯片的方式展示出来。

以下为代码:

一、自定义试图模块模版如下:

<script type="server/javascript">
    if (dian.request.action === 'latestpost.html'){
        var test = '<div class="slide"><a href="<%=post.url%>" title="<%=dian.tools.nohtmlTruncate(post.d_title,20)%>" target="_blank"><img src="<%=post.d_thumb%>" alt=""></a><div class="caption" style="bottom:0"><p class="ptittle"><a href="<%=post.url%>" title="<%=dian.tools.nohtmlTruncate(post.d_title,20)%>"><%=dian.tools.nohtmlTruncate(post.d_title,18)%></a></p><p class="ptext"><a href="<%=post.url%>" title="<%=dian.tools.nohtmlTruncate(post.d_content,48)%>"><%=dian.tools.nohtmlTruncate(post.d_content,56)%></a></p></div></div>';
        require('dd://assets/2012/0905/173732gRma/latest.coffee').latest({
            template:test,
            layout:"",
            thumb:"square_250",
            nothumb:"http://m2.img.libdd.com/farm5/2012/0907/00/5CF6F6C52EB161D6C0F94345A9F2FEC73688A605049E_570_270.JPEG"
        });
        return;
    }
</script>

二、js调用数据代码:

<script type="text/javascript">
                  
        $(document).ready(function(){
$("#slides .slides_container").load("/do/latestpost.html?_posts[limit]=6&_posts[type][]=photo&_posts[type][]=text",function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'http://m2.img.libdd.com/farm5/2012/0906/21/6C93D1782163AED0D36C49B92A37AD15607CE7004114_66_66.GIF',
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-45
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            }); 
});
});
    </script>

三、html代码(放置在需要展示的某个位置,自己定):

<div id="huandeng">
    <div id="example">
        <img id="ribbon" width="112" height="112" alt="New Ribbon" src="https://m1.img.libdd.com/farm5/2012/0907/00/53A8059A2E00BD7DD6200CC56199C9DFB0E9D59BE40C_112_112.PNG">
    <div id="slides">
            <div class="slides_container"></div>
    <a href="#" class="prev"><img src="https://m3.img.libdd.com/farm5/2012/0907/09/4B0BA3859E6B3E7D9CBB5DF097ADF9C6DAD85D004114_24_34.PNG" width="24" height="43" alt="Arrow Prev"></a>
                <a href="#" class="next"><img src="https://m2.img.libdd.com/farm5/2012/0907/09/1CE33B7A4E871E18A205668BD109178420FC1A004114_24_34.PNG" width="24" height="43" alt="Arrow Next"></a>
        </div>    
        <img id="frame" width="739" height="341" alt="Example Frame" src="https://m3.img.libdd.com/farm5/2012/0906/22/2DF9C3A1B88836B8652B9461F0BBED0A4851EE05049E_739_341.PNG">
            </div>    
                 
        </div>

四、样式表代码:

/*--幻灯片代码样式表--*/  
        #huandeng{width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0; }
#slides {
    position:absolute;
    top:15px;
    left:4px;
    z-index:100;
}
#example {
    height: 350px;
    position: relative;
    width: 600px;
}
        #ribbon {
    left: -15px;
    position: absolute;
    top: -4px;
    z-index: 500;
}
#frame {
    height: 341px;
    left: -80px;
    position: absolute;
    top: -3px;
    width: 739px;
    z-index: 0;
}
/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/
   
#slides .slides_container {
    width:570px;
    overflow:hidden;
    position:relative;
    display:none;
}
   
/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/
   
#slides .slides_container div.slide {
    width:570px;
    height:270px;
    display:block;
}
        #slides .slides_container div.slide img{width:570px;height:270px;overflow:hidden;}
   
/*
    Next/prev buttons
*/
   
#slides .next,#slides .prev {
    position:absolute;
    top:107px;
    left:0px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}
   
#slides .next {
    left:546px;
}
   
/*
    Pagination
*/
   
#slides .pagination {
    margin:26px auto 0;
    width:100px;
}
   
#slides .pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}
   
#slides .pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(https://m1.img.libdd.com/farm4/2012/0906/22/D765AE2DC8956B63F27846347EE036B1315044004114_12_25.PNG);
    background-position:0 0;
    float:left;
    overflow:hidden;
}
   
#slides .pagination li.current a {
    background-position:0 -12px;
}
   
/*
    Caption
*/
   
#slides .caption {
    z-index:500;
    position:absolute;
    bottom:-45px;
    left:0;
    height:30px;
    padding:5px 20px 0 20px;
    background:#000;
    background:rgba(0,0,0,.5);
    width:540px;
    font-size:1.3em;
    line-height:1.33;
    color:#fff;
    border-top:1px solid #000;
    text-shadow:none;
}
        #slides .caption p{margin:0;padding:0;font-size:9px;line-height:10px;font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti;}
        #slides .caption p a{color:#fff;}
        #slides .caption p a:hover{color:#ECECEC;}
        #slides .caption .ptittle{font-weight:bold;font-size:13px;line-height:18px;}

欢迎伸手党来拿!

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。