请问以下3D旋转特效如何添加左右按钮上去呢

Question

效果预览地址效果预览地址

 <ul>
    <li><span>Block 1</span></li>
    <li><span>Block 2</span></li>
    <li><span>Block 3</span></li>
    <li><span>Block 4</span></li>
    <li><span>Block 5</span></li>
</ul>

<div class="interact">
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.roundabout2.js"></script>
<script>
            $(document).ready(function() {
                $('ul').roundabout();
            });
        </script>
        <style>
            ul {
                list-style: none;
                padding: 0;
                margin: 0 auto;
                width: 42em;
                height: 24em;
            }
            li {
                height: 20em;
                width: 30em;
                background-color: #ccc;
                text-align: center;
                cursor: pointer;
            }
                li.roundabout-in-focus {
                    cursor: default;
                }
            li span {
                display: block;
                padding-top: 6em;
            }

            #carbonads-container .carbonad {
                margin: 0 auto;
            }
        </style>

Answer 1

可以用最简单的方法，不会改变插件js的源码。jquery.roundabout2.js主要是给ul和li加上class属性，通过绑定点击事件触发3D旋转。

那左右翻页就可以通过触发li标签的点击事件来达到旋转的效果。

当左右按钮点击时，先找到最上方的li标签，class是roundabout-in-focus；
代码：

<p id="left">left</p>
<ul id="round">
    <li><span>Block 1</span></li>
    <li><span>Block 2</span></li>
    <li><span>Block 3</span></li>
    <li><span>Block 4</span></li>
    <li><span>Block 5</span></li>
</ul>
<p id="right">right</p>

<div class="interact">
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.roundabout2.js"></script>
<script>
            $(document).ready(function() {
                $('ul').roundabout();
            });
                        $("#left").click(function(){
                            $("#round li.roundabout-in-focus").next().click();
                        });
                        $("#right").click(function(){
                            $("#round li.roundabout-in-focus").prev().click();
                        });
        </script>
        <style>
            ul {
                list-style: none;
                padding: 0;
                margin: 0 auto;
                width: 42em;
                height: 24em;
            }
            li {
                height: 20em;
                width: 30em;
                background-color: #ccc;
                text-align: center;
                cursor: pointer;
            }
                li.roundabout-in-focus {
                    cursor: default;
                }
            li span {
                display: block;
                padding-top: 6em;
            }

            #carbonads-container .carbonad {
                margin: 0 auto;
            }
        </style>