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

经常看到项目要用到图片轮播效果,一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件,然后看下demo,再配下参数。好了,关机下班回家 其余的就交给插件吧。

是不是感觉有了jQuery,世界变得那么美好呢。

本人最近用的一个插件是 jquery.carousel.js,官方网站是:http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin

下面,我们来讨论一下图片轮播原理。

首先来个简单的demo

效果图如下:

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

这是个导航,我们要做得效果则是让它每隔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 方法, 它能触发被选定元素的指定事件。

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

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

你可能感兴趣的:(jquery)