当前位置：首页 - 正文

Jquery 一个每隔十秒自动切换,这样循环的效果

发布网友发布时间：2022-05-15 02:40

共3个回答

懂视网时间：2022-05-15 07:01

这次给大家带来jQuery做出循环时间自动更换样式功能，jQuery做出循环时间自动更换样式的注意事项有哪些，下面就是实战案例，一起来看一下。

js核心代码部分：

$(document).ready(function(){
 // 皮肤列表选项切换
 $(".ulSkin li").click(function(){
 $(this).addClass("active").siblings("li").removeClass("active");
 });
});
// 皮肤背景切换
function skin1(){
 $("#skins").removeClass("skin0 skin2 skin3 skin4").addClass("skin1");
}
function skin2(){
 $("#skins").removeClass("skin0 skin1 skin3 skin4").addClass("skin2");
}
function skin3(){
 $("#skins").removeClass("skin0 skin1 skin2 skin4").addClass("skin3");
}
function skin4(){
 $("#skins").removeClass("skin0 skin1 skin2 skin3").addClass("skin4");
}
function skin0(){
 $("#skins").removeClass("skin4 skin1 skin2 skin3").addClass("skin0");
}
// 设定循环切换相隔时间
$(window).load(function() {
 setInterval("autochange()",3000);
})
// 设置一个判断计数器
var count=0;
// 根据计数器状态切换响应的皮肤
function autochange() {
 if (count==0) {
 skin1();
 }
 if (count==1) {
 skin2();
 }
 if (count==2) {
 skin3();
 }
 if (count==3) {
 skin4();
 }
 if (count==4) {
 skin0();
 }
 count=count+1;
 if (count>4) {
 count=0;
 }
}

css样式部分：

.ulSkin{height:150px; width:auto;}
.ulSkin li{float:left; width:80px; list-style: none;}
.active{font-weight:700; font-size:18px;}
.skin0{color:#000;}
.skin1{color:#00f;}
.skin2{color:#0f0;}
.skin3{color:#f00;}
.skin4{color:#ff0;}

HTML代码部分：

<p>
<ul class="ulSkin">
 <li class="active skin0">样式0</li>
 <li class="skin1">样式1</li>
 <li class="skin2">样式2</li>
 <li class="skin3">样式3</li>
 <li class="skin4">样式4</li>
</ul>
<p id="skins" class="skin0">样式自动更换测试</p>
</p>

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.gxlcms.com jQuery自动定时更换样式</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
.ulSkin{height:150px; width:auto;}
.ulSkin li{float:left; width:80px; list-style: none;}
.active{font-weight:700; font-size:18px;}
.skin0{color:#000;}
.skin1{color:#00f;}
.skin2{color:#0f0;}
.skin3{color:#f00;}
.skin4{color:#ff0;}
</style>
<body>
<p>
<ul class="ulSkin">
 <li class="active skin0">样式0</li>
 <li class="skin1">样式1</li>
 <li class="skin2">样式2</li>
 <li class="skin3">样式3</li>
 <li class="skin4">样式4</li>
</ul>
<p id="skins" class="skin0">样式自动更换测试</p>
</p>
<script>
$(document).ready(function(){
 // 皮肤列表选项切换
 $(".ulSkin li").click(function(){
 $(this).addClass("active").siblings("li").removeClass("active");
 });
});
// 皮肤背景切换
function skin1(){
 $("#skins").removeClass("skin0 skin2 skin3 skin4").addClass("skin1");
}
function skin2(){
 $("#skins").removeClass("skin0 skin1 skin3 skin4").addClass("skin2");
}
function skin3(){
 $("#skins").removeClass("skin0 skin1 skin2 skin4").addClass("skin3");
}
function skin4(){
 $("#skins").removeClass("skin0 skin1 skin2 skin3").addClass("skin4");
}
function skin0(){
 $("#skins").removeClass("skin4 skin1 skin2 skin3").addClass("skin0");
}
// 设定循环切换相隔时间
$(window).load(function() {
 setInterval("autochange()",3000);
})
// 设置一个判断计数器
var count=0;
// 根据计数器状态切换响应的皮肤
function autochange() {
 if (count==0) {
 skin1();
 }
 if (count==1) {
 skin2();
 }
 if (count==2) {
 skin3();
 }
 if (count==3) {
 skin4();
 }
 if (count==4) {
 skin0();
 }
 count=count+1;
 if (count>4) {
 count=0;
 }
}
</script>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

react router4+redux控制路由权限步骤详解

Webpack path与publicPath使用优劣势详解

热心网友时间：2022-05-15 04:09

JS部分修改成下面这样就可以了

热心网友时间：2022-05-15 05:27

覆盖你写的js

<script>
var a=1,time=10000,s;
function test(){
if(a == 3){a=0;}
$('.con .txt').fadeOut('slow').filter(':eq('+a+')').fadeIn('slow');
$(".focus li").removeClass("on").filter(':eq('+a+')').addClass("on");
a++;
s=setTimeout(test,time);
}

s=setTimeout(test,time);
$(".focus li").click(function () {
$(this).addClass("on").siblings("li").removeClass("on");
$ ('.con .txt:eq(' + $ (this).index () + ')').fadeIn("slow").siblings ().fadeOut();

clearTimeout(s);
var b=$(".focus li"),c=b.index(this);
a=c+1;
s=setTimeout(test,time);
});


</script>

Jquery 一个每隔十秒自动切换,这样循环的效果

Jquery 点击切换,按10秒钟自动切换到下一个,依资助循环,点击按钮也可 ...

按时间循环自动切换* {padding: 0;margin: 0;}body {margin: 0;padding: 0;font: 12px/1.5 \5b8b\4f53, Arial, sans-serif;}ol,ul,li {list-style: none;}a {color: #252525

jquery实现图片自动切换和点击切换

(function () { $(".dummy").click(function () { return false; }); var flipDelay = 5500; var flipCount = $("div.banner_footer a").size(); // 图片总数 var flipId = 1; var flipId1 = 0; var flipTimer = null; var flipTimer1 = null; var ...

jquery中插件怎么制作一个一秒一更新的时间

id="text">setInterval('refreshTime()',1000);//refreshTime();你自己定义的刷新时间function(){}方法function refreshTime(){ var today = new Date(); $('#text').html(today.getHours()+":"+today.getMinutes()+":"+today.getSeconds());}使用setInterval定时循环执行 ...

我想给这段jQuery代码添加自动循环向上滚动效果,请高手帮忙,代码如下...

给你一个函数你调用下就OK了，支持加速滚动、循环滚动、间隔滚动、上下滚动、左右滚动等等直接将这段代码拷贝到一个JS文件里面，这段代码需要jquery1.3以上运行环境。代码里面有调用示例。望采纳··/ classDescription 超级Marquee，可做图片导航，图片轮换 dependence jQuery 1.3.2 DOM CSS...

JQUERY的TAB标签,我想实现5秒钟自动切换的效果,怎么做

…原理：1.设置了一个定时器，每2秒触发。2.如果用户自己切换，停止定时器。当用户鼠标离开区域时，再次进入定时切换。不懂再问~ $(function(){var i=0;//初始记录用户鼠标经过是第几个livar canmove=true;$('.menu li').mouseenter(function(){canmove=false;clearInterval(li_timer);i=$...

JQuery 如何实现隔5秒钟后再执行播放的效果?

弄个定时器，然后调用上面的方法 var iTime iTime=setTimeout("test()",5000);function test(){ clearTimeout(iTime); //清除定时器 jQuery(".layB").slide({ mainCell:".slide",effect:"leftLoop",autoPlay:true,});} 试试这个呢

jquery,点击一个节点,执行某一事件,再次点击,执行另一个事件,要能循环...

1、新建一个html文件，命名为test.html，用于讲解>怎么让jquery事件执行一次。2、在test.html文件内，引入jquery.min.js库文件，成功加载该文件，才能使用jquery中的方法。3、在test.html文件内，使用p标签创建一行文字，文字内容为“这是一段测试的文字”,并设置其class为mypp。4、在js标签内，在页面...

jquery获取不断切换的div内容

不能光在加载的时候调用,还要在切换的时候调用,如果不知道切换时怎么调用,那就根据切换的间隔时间在你显示标题的js方法的内部的最后用settimeout("aa()",1000);循环调用;aa()你替换为当前的方法名,1000是1000毫秒,你改为图片切换的间隔时间

如何能让它自动循环切换,是自动循环,不是循环一遍就停止,需要完整的...

min.js" type="text/javascript" charset="utf-8"> (function(){ //调用轮播效果（横向）('.enterprise-con-main ul').scrollable({ width: "auto",

每隔十秒自动切换下一张幻灯片每隔一秒自动切换实现每隔3秒自动切换幻灯片每隔五秒自动切换在哪里 ppt每隔两秒自动切换每隔5秒自动换页自动切换内循环内外循环自动切换功能汽车自动切换内外循环

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

焦点

Jquery 一个每隔十秒自动切换,这样循环的效果

最新推荐

猜你喜欢

热门推荐