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

时间 2019-12-15

标签 jquery 图片插件动轮原理解析栏目 JQuery 繁體版

原文原文链接

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

是否是感受有了jQuery，世界变得那么美好呢。css

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

下面，咱们来讨论一下图片轮播原理。java

首先来个简单的demojquery

效果图以下：post

这是个导航，咱们要作得效果则是让它每隔2秒，自动的切换背景颜色。这是否是跟图片轮播的原理相似。网站

好了，先上一段HtML代码this

<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 方法，它能触发被选定元素的指定事件。htm

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

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