superslide 实现选项卡内容手动、自动滚动 « ONEPOUND（万方）外贸网站优化专家

2014年12月31日

superslide 实现选项卡内容手动、自动滚动

Filed under: 英语网站设计 — 标签：JQuery, 外贸google SEO — lifengwu @ 10:49 上午

通过jquery让图片或者文字左右自动或手动滚动、选项卡自动切换，这些效果对于我们来说并不陌生，外贸网站建设过程中会经常用到，那如果选项卡自动切换而且每个选项卡的内容还需要能独立的滚动，该如何实现呢？下面我们来看一下通过superslide这个jquery插件来实现这个效果：

既然用到了superslide插件，那么jquery.superslide.2.1.1.js当然是必不可少的，对这个插件不了解的可以在网上搜索一下详细了解，在这里就不做详细介绍了。

源码：

<ul><li>Promotion Products</li><li>Promotion Products1</li></ul>

</div>

<!–第一个选项卡内容–>

<li><a href=”product_view.html” ref=”images/11.jpg” class=”tooltip”><img src=”images/feleh_30.jpg” width=”168″ height=”158″ /></a><a href=”#”>15inch LCD CCTV Monitor</a></li>

</ul><a class=”sNext” href=”javascript:void(0)”></a>

</div>

<!–第二个选项内容–>

<ul>

<li><a href=”product_view.html” ref=”images/11.jpg” class=”tooltip”><img src=”images/feleh_30.jpg” width=”168″ height=”158″ /></a><a href=”#”>17inch Floor Standing LCD Ad Player</a></li> <li><a href=”product_view.html” ref=”images/11.jpg” class=”tooltip”><img src=”images/feleh_30.jpg” width=”168″ height=”158″ /></a><a href=”#”>15inch LCD CCTV Monitor</a></li>

</ul>

</div><!– slideBox End –>

</div>

调用代码：

/* 内层图片滚动切换 */

jQuery(“.slideGroup .slideBox”).slide({ mainCell:”ul”,vis:5,prevCell:”.sPrev”,nextCell:”.sNext”,effect:”leftLoop”,autoPlay:”true”});

/* 外层tab切换 */

jQuery(“.slideGroup”).slide({titCell:”.parHd li”,mainCell:”.parBd”,trigger:”click”});

</script>

/* 内层图片滚动切换 */ jQuery(“.slideGroup .slideBox”).slide({ mainCell:”ul”,vis:5,prevCell:”.sPrev”,nextCell:”.sNext”,effect:”leftLoop”,autoPlay:”true”});
/* 外层tab切换 */ jQuery(“.slideGroup”).slide({titCell:”.parHd li”,mainCell:”.parBd”,trigger:”click”});
</script>

这样就能实现我们想要的那种效果了！

阅读 (14,237 views) Comments (0)