Jquery实现简单的轮播效果(代码管用).pdfVIP

这篇文章主要介绍了 Jquery 实现简单的轮播效果 (代码管用 ) 的相关资料 ,需要的朋友可 以参考下 直接给大家贴 jquery 代码了，具体代码如下所示： lt;!DOCTYPE htmlgt; lt;html lang=engt; lt;headgt; lt;meta charset=UTF-8gt; lt;titlegt;Titlelt;/titlegt; lt;link rel=stylesheet href=css/index.cssgt; lt;script src=js/jquery-1.11.3.jsgt;lt;/scriptgt; lt;script src=js/baner.jsgt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;div class=maingt; lt;a href=gt;lt;img src=img/baner-1.jpg alt=gt;lt;/agt; lt;a href=gt;lt;img src=img/baner-2.jpg alt=gt;lt;/agt; lt;a href=gt;lt;img src=img/baner-3.jpg alt=gt;lt;/agt; lt;a href=gt;lt;img src=img/baner-4.jpg alt=gt;lt;/agt; lt;ulgt; lt;ligt;1lt;/ligt; lt;ligt;2lt;/ligt; lt;ligt;3lt;/ligt; lt;ligt;4lt;/ligt; lt;/ulgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;nbsp; /************* 初始化 ************/ *{margin:0;padding: 0;border: none;list-style: none} /********* 轮播左右居中 *************/ .main{ width: 1024px; height: 320px; margin: 0 auto; position: relative; } .main a{ position: absolute; } .main a img{ width: 100%; height: 320px; } /*********** 左边小图标 ************/ .main ul li.selected{ background: #f97157; } .main ul{ position: absolute; z-index: 999; top: 120px; left: 20px; } .main ul li{ width: 20px; height: 20px; border-radius: 50%; background: #909090; cursor: pointer; text-align: center; }nbsp; /** * Created by Administrator on 16-3-12. */ /*********** 定义全局变量和定时器 *************/ var t=null; var n=0;/** 动态变化 **/ var count; /************************/ $(function(){ count=$(.main a).length;/* 给动态变化的 n 备用 */ /** 让不是轮播中的第一个隐藏 **/ $(.main a:not(:first-child)