首页 > 代码库 > jQuery图片插件自动轮播原理解析
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="http://www.mamicode.com/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 方法， 它能触发被选定元素的指定事件。
原理就一句话 定时的模拟点击事件。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。