经常看到项目要用到图片轮播效果，一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件，然后看下demo，再配下参数。好了，关机下班回家 其余的就交给插件吧。
是不是感觉有了jQuery，世界变得那么美好呢。
本人最近用的一个插件是 jquery.carousel.js，官方网站是：http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin
下面，我们来讨论一下图片轮播原理。
首先来个简单的demo
效果图如下：
这是个导航，我们要做得效果则是让它每隔2秒，自动的切换背景颜色。这是不是跟图片轮播的原理类似。
好了，先上一段HtML代码
<html>
<head>
<title>嵌入别人的网站</title>
<style type="text/css">
ul li{ 100px;float: left;}
.on{background: #ccc;}
</style>
</head>
<body>
<ul id="ul-list">
<li class="on" data-id="0" id="test0">导航1</li>
<li data-id="1" id="test1">导航2</li>
<li data-id="2" id="test2">导航3</li>
<li data-id="3" id="test3">导航4</li>
</ul>
<script type="text/javascript" src="js/jquery.js"></script>
</body>
</html>
然后我们再再jquery.js后面加上轮播原理代码
<script type="text/javascript">
$(function(){
function liClick()
{
var dataId = $("#ul-list").find("li[class='on']").attr('data-id');
if(dataId > 2) {
dataId = -1;
}
dataId ++ ;
$("#test" + dataId).trigger('click');
}
setInterval(liClick, 2000);
for(var i=0; i< 4; i++) {
$("#test" + i).click(function() {
$(this).siblings("li").removeClass('on');
$(this).addClass('on');
});
}
});
</script>
这里面一个核心的东西则是使用了jQuery的 trigger 方法， 它能触发被选定元素的指定事件。
原理就一句话 定时的模拟点击事件。
更多资料下载 请参考小萌库