jquery li循环轮播切换

最新推荐文章于 2022-10-18 09:39:11 发布

夏末_阳光依然耀眼

最新推荐文章于 2022-10-18 09:39:11 发布

阅读量2.9k

点赞数

分类专栏： javascript jquery 文章标签： jquery

本文链接：https://blog.csdn.net/boyit0/article/details/77504455

版权

javascript 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

jquery

39 篇文章 0 订阅

订阅专栏

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>