jquery li循环轮播切换

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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值