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" οnclick="setTab('one',1,7)"><i class="ico01"></i></li>
<li class="wow fadeInLeft" id="one2" οnclick="setTab('one',2,7)" data-wow-delay="0.1s"><i class="ico02"></i></li>
<li class="wow fadeInLeft" id="one3" οnclick="setTab('one',3,7)" data-wow-delay="0.2s"><i class="ico03"></i></li>
<li class="wow fadeInLeft" id="one4" οnclick="setTab('one',4,7)" data-wow-delay="0.3s"><i class="ico04"></i></li>
<li class="wow fadeInLeft" id="one5" οnclick="setTab('one',5,7)" data-wow-delay="0.4s"><i class="ico05"></i></li>
<li class="wow fadeInLeft" id="one6" οnclick="setTab('one',6,7)" data-wow-delay="0.5s"><i class="ico06"></i></li>
<li class="wow fadeInLeft" id="one7" οnclick="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>
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
