jquery li循环轮播切换

叁歲伎倆 2022-06-09 00:42 144阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关利用jQuery实现图片无限循环轮播(不借助于轮播插件)

原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能，而这次是用jQuery来实现图片无限循环轮播！用到的技术有：html、css、JavaScript

阳光穿透心脏的1/2处/ 2023年06月02日 14:00/ 0 赞/ 13 阅读

相关 jQuery圆点图片轮播切换插件

[下载地址][Link 1]效果很普通的网站banner图片切换插件，但又是一款很实用的jQuery轮播图插件，可以点击圆点控制图片索引。 ![1631495188.png]

Myth丶恋晨/ 2022年09月11日 06:17/ 0 赞/ 6 阅读

相关循环轮播图

循环轮播图，想必大家都在很多app山看到过，但是具体怎么实现呢？今天小弟就跟大家一种通过组合自定义view来实现的方法。先看一张效果图： ![Center][]

男娘i/ 2022年08月05日 02:24/ 0 赞/ 173 阅读

相关 jquery li循环轮播切换

jquery li循环轮播切换效果，请自行引入jquery <!doctype html> <html> <head> <meta chars

叁歲伎倆/ 2022年06月09日 00:42/ 0 赞/ 145 阅读

相关 JQ轮播(左右轮播切换，小圆点hover)

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

缺乏、安全感/ 2022年06月03日 00:39/ 0 赞/ 271 阅读

相关 jquery 实现轮播图_滑动切换

<!doctype html> <html> <head> <meta charset="utf-8"> <titl

待我称王封你为后i/ 2022年05月11日 12:56/ 0 赞/ 330 阅读

相关 jquery 轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

骑猪看日落/ 2022年05月11日 05:22/ 0 赞/ 111 阅读

相关 jquery图片轮播

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery轮播</title> <

布满荆棘的人生/ 2022年04月22日 05:32/ 0 赞/ 362 阅读

相关 iOS 循环渐进轮播

![Image 1][] iOS UICollectionView实现跑马灯和轮播效果 > 功能描述：[WSL\_RollView][WSL_RollView]是基于UIC

落日映苍穹つ/ 2022年04月08日 13:26/ 0 赞/ 167 阅读

相关无缝轮播图切换

这里我们就不多废话了，大家应该都能看懂，直接上代码了，如果大神看到代码有问题，可以帮忙指点一下，谢谢 html <div class="banner">

深藏阁楼爱情的钟/ 2022年02月21日 07:47/ 0 赞/ 515 阅读