jquery li循环轮播切换

来源：互联网发布：system01.dbf数据大编辑：程序博客网时间：2024/05/18 23:12

jquery li循环轮播切换效果，请自行引入jquery

<!doctype html><html><head><meta charset="utf-8"><title>jquery li循环轮播切换</title><script src="js/jquery/jquery-1.8.3.js"></script></head><body><div class="jhtab"><ul><li class="wow fadeInLeft active" id="one1" onclick="setTab('one',1,7)"><i class="ico01"></i></li><li class="wow fadeInLeft" id="one2" onclick="setTab('one',2,7)" data-wow-delay="0.1s"><i class="ico02"></i></li><li class="wow fadeInLeft" id="one3" onclick="setTab('one',3,7)" data-wow-delay="0.2s"><i class="ico03"></i></li><li class="wow fadeInLeft" id="one4" onclick="setTab('one',4,7)" data-wow-delay="0.3s"><i class="ico04"></i></li><li class="wow fadeInLeft" id="one5" onclick="setTab('one',5,7)" data-wow-delay="0.4s"><i class="ico05"></i></li><li class="wow fadeInLeft" id="one6" onclick="setTab('one',6,7)" data-wow-delay="0.5s"><i class="ico06"></i></li><li class="wow fadeInLeft" id="one7" onclick="setTab('one',7,7)" data-wow-delay="0.6s"><i class="ico07"></i></li></ul></div><script type="text/javascript">$(document).ready(function(){$(".jhtab ul").delegate("li","click",function(){var index = $(this).index();if(index!=0){var slideLiWidth = $(".jhtab ul").children().outerWidth(true)*index;$(".jhtab ul").animate({ marginLeft:"-"+slideLiWidth+"px"},function(){$(".jhtab ul li.active").prevAll().appendTo($(".jhtab ul"));$(".jhtab ul").css("margin-left",0);console.log(slideLiWidth);});}})})</script></body></html>

阅读全文

0 0