jQuery图片插件自动轮播原理解析

经常看到项目要用到图片轮播效果，一般的操作流程都是先到网上找一个好看的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{ width: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 方法，它能触发被选定元素的指定事件。

原理就一句话定时的模拟点击事件。

更多资料下载请参考小萌库

来源：https://www.cnblogs.com/luodao1991/p/3887567.html

标签

轮播

jquery