<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>
可以用最简单的方法,不会改变插件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>