jQuery响应式对话轮播插件

刚开始看到的是一个轮播图片演示，当点击“查看全部”，可以看到所有的对话列表，你可以制作成说说或留言模板，还有瀑布流效果哦。

分类：图片代码 > 图片轮播难易：高级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

对话ul列表

<div class="cd-testimonials-wrapper cd-container"> 
    <ul class="cd-testimonials"> 
        <li> 
            <p> jQuery无限级导航菜单效果 </p> 
            <div class="cd-author"> 
                <img src="img/avatar-3.jpg" alt="jQuery无限级导航菜单效果" /> 
                <ul class="cd-author-info"> 
                    <li> 标题 </li> 
                    <li> <a href="http://www.sucaihuo.com/js/352.html" target="_blank"> jQuery无限级导航菜单效果 </a> </li> 
                </ul> 
            </div> 
        </li> 
        <li> 
            <p> jQuery紫色婚庆导航菜单 </p> 
            <div class="cd-author"> 
                <img src="img/avatar-2.jpg" alt="jQuery紫色婚庆导航菜单" /> 
                <ul class="cd-author-info"> 
                    <li> 标题 </li> 
                    <li> <a href="http://www.sucaihuo.com/js/353.html" target="_blank"> jQuery紫色婚庆导航菜单 </a> </li> 
                </ul> 
            </div> 
        </li> 
        <li> 
            <p> jQuery蓝色下拉导航菜单 </p> 
            <div class="cd-author"> 
                <img src="img/avatar-2.jpg" alt="jQuery蓝色下拉导航菜单" /> 
                <ul class="cd-author-info"> 
                    <li> 标题 </li> 
                    <li> <a href="http://www.sucaihuo.com/js/354.html" target="_blank"> jQuery蓝色下拉导航菜单 </a> </li> 
                </ul> 
            </div> 
        </li> 
        <li> <p> jQuery仿京东左侧分类导航 </p> 
            <div class="cd-author"> 
                <img src="img/avatar-1.jpg" alt="jQuery仿京东左侧分类导航" /> 
                <ul class="cd-author-info"> 
                    <li> 标题 </li> 
                    <li> <a href="http://www.sucaihuo.com/js/355.html" target="_blank"> jQuery仿京东左侧分类导航 </a> </li> 
                </ul> 
            </div> </li> 
    </ul> 
    <!-- cd-testimonials --> 
    <a href="#0" class="cd-see-all">查看全部</a> 
</div> 
<!-- cd-testimonials-wrapper --> 
<div class="cd-testimonials-all"> 
    <div class="cd-testimonials-all-wrapper"> 
        <ul> 
            <li class="cd-testimonials-item"> <p> 本文以实例演示了Thinkphp在静态缓存状态下中英文切换。国际化切换四点要求如下： </p> 
                <div class="cd-author"> 
                    <img src="img/avatar-4.jpg" alt="Thinkphp静态缓存多语言切换" /> 
                    <ul class="cd-author-info"> 
                        <li> 标题 </li> 
                        <li> <a href="http://www.sucaihuo.com/js/166.html" target="_blank"> Thinkphp静态缓存多语言切换 </a> </li> 
                    </ul> 
                </div> 
            </li> 
            <li class="cd-testimonials-item"> <p> ThinkPHP框架对URL有一定的规范，所以如果你希望定制你的URL格式的话，就需要好好了解下内置的路由功能了，它能让你的URL变得更简洁和有文化。 </p> 
                <div class="cd-author"> 
                    <img src="img/avatar-5.jpg" alt="Thinkphp路由配置和静态缓存规则" /> 
                    <ul class="cd-author-info"> 
                        <li> 标题 </li> 
                        <li> <a href="http://www.sucaihuo.com/js/167.html" target="_blank"> Thinkphp路由配置和静态缓存规则 </a> </li> 
                    </ul> 
                </div> 
            </li> 
        </ul> 
    </div> 
    <!-- cd-testimonials-all-wrapper --> 
    <a href="#0" class="close-btn">Close</a> 
</div>

main.js

jQuery(document).ready(function($) {
    //create the slider
    $('.cd-testimonials-wrapper').flexslider({
        selector: ".cd-testimonials > li",
        animation: "slide",
        controlNav: false,
        slideshow: false,
        smoothHeight: true,
        start: function() {
            $('.cd-testimonials').children('li').css({
                'opacity': 1,
                'position': 'relative'
            });
        }
    });

    //open the testimonials modal page
    $('.cd-see-all').on('click', function() {
        $('.cd-testimonials-all').addClass('is-visible');
    });

    //close the testimonials modal page
    $('.cd-testimonials-all .close-btn').on('click', function() {
        $('.cd-testimonials-all').removeClass('is-visible');
    });
    $(document).keyup(function(event) {
        //check if user has pressed 'Esc'
        if (event.which == '27') {
            $('.cd-testimonials-all').removeClass('is-visible');
        }
    });

    //build the grid for the testimonials modal page
    $('.cd-testimonials-all-wrapper').children('ul').masonry({
        itemSelector: '.cd-testimonials-item'
    });
});

对话成瀑布流

$('.cd-testimonials-all-wrapper').children('ul').masonry({
        itemSelector: '.cd-testimonials-item'
});