jQuery简单实现旗帜图片切换

主要运用了定时器的原理，绑定，触发应用等复制代码代码如下：DOCTYPE html html head meta charset=' utf-8 '标题横幅切换实现/title style type=' text/CSS '/* * @ description :横幅切换样式* @作者：蓝凤(beryl)* @时间：2013-02-26 */*重置*/* {边距： 0；padd : 0；} body{font:12px/1.5 Tahoma，' \5B8B\4F53 '，arial，Tahoma，helvetica，sans-serif；颜色： # 333333背景-color : # ffffff；位置：相对；} h1、h2、h3、h4、h5、h6{font-size:100%}地址，em { font-style : normal；} code，kbd，pre，samp { font-family : courier new，courier，monospace} ul，ol{list-style:none外部无；} fieldset，img { border:0} img {垂直对齐：中间}表格{边框-塌陷：塌陷；边框间距：0;font-size :继承；*字号：100%；}输入，按钮，textarea，选择{竖排阿里安Helvetica : middlefont :100%对齐，无衬线；颜色：继承。}清除修复程序：在{content:}之后。显示：块；高度：0;clear:both可见性：隐藏；} .clearfix { * zoom:1}。清除{ font-size :0线高：0;高度：0;clear:both可见性：隐藏；飞越：隐藏；} .d-ftab {宽度：510 px高度： 180像素；相对位置：余量： 100像素自动；} .d-fShow ul li{左侧浮动：宽度： 510像素；高度： 180像素；} .d-FShow {宽度： 510 px高度： 180像素；飞越：隐藏；} .d-FSHOw img {宽度： 510 px高度： 180像素；向左浮动：} .d-fs-控制{位置：绝对值；宽度宽度：510px绝对位置：左： 0；底部： 0；高度： 25px线高： 25pxbackground: rgba(0，0，0，0.4)；过滤器： progid : maximagettransform .微软。渐变(渐变类型=0，StartColorStr=' # 66000000 '，endcolorst=' # 66000000 ')；} :root .d-fs-control { filter : progid : maximagettransform .微软。渐变(渐变类型=0，StartColorStr=' # 66000000 '，endcolorst=' # 66000000 ')\ 9；} .d-fs-控制ul{位置：绝对值；bottom :3 pxright : 5px h8 : 16px }。d-fs-控制ul li {宽度：16像素重量：16像素背景技术： # 777675;边框半径： 2px 2px 2pxfloat:left边距-左侧：5 pxcolor: # dcdcdc文本对齐：居中；字体粗细：700；光标：指针指针；行高：16 pxfilter: alpha(不透明度=70);opacity: 0.7 }。d-fs-控制ul li:hover .控制ul李。选择{ background : # ffffffcolor: # ff6700}/style脚本类型=' text/JavaScript ' src=' http : js/jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ var wrap=$(').d-ftab’)；var imgs=wrap.find ' .d-FShow ul Li '；var len=imgs . length var Tabtime=100 var OutTime=4000 var select=' selectvar num=0；定义变量区间；var type=' click var btns=wrap . find ' .d-fs-控制ulli’)；btns.bind(type，function(){ var _ this=$(this)；_this.addClass('select ').兄弟姐妹()。移除CLaSS(' select ')；num=_this。普雷瓦尔()。长度；imgs.stop().eq(数量)。fadeTo(tabTime，1)；imgs.not(':eq(' num ')).过滤器(' :可视').淡出（标签时间);返回false})。eq(数量)。触发器（类型);var interFunc=function(){ num=(num 1)% len；btns.eq(num).triggerHandler(类型);} wrap.bind('mouseover '，function(){ clearInterval(interval)；}).bind('mouseout '，function(){ interval=setInterval(interFunc，OutTime)})})/script/headdy div class=' d-ftab ' div class=' d-FShow ' ul阿利href=' # ' img alt=' src=' http 3360 images/1。jpg '/a/李阿利href=' # ' img alt=' src=' http : images/2。巴布亚新几内亚'/a/Li阿利href=' # ' img alt='效果如下图