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

原理就一句話定時的模擬點擊事件。

更多資料下載請參考小萌庫