javascript - 有个html轮换样式的需求，不知道怎么用js实现，求解。
本文介绍了javascript - 有个html轮换样式的需求，不知道怎么用js实现，求解。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
是这样的，我要在li中不停的轮换样式，求实现方法，我不知道怎么处理超过第4个时补到最前面的实现，求指点！
循环开始时 currentIndex = 0 （指针），itemLens = 4（数据条数）
1.第一次循环
if(currentIndex >= itemLens){
currentIndex = 0}
<li class="li-01"></li>
<li class="li-02"></li>
<li class="li-03"></li>
<li class="li-04"></li>
currentIndex++
2.第二次循环
<li class="li-04"></li>
<li class="li-01"></li>
<li class="li-02"></li>
<li class="li-03"></li>
currentIndex++
3.第三次循环
<li class="li-03"></li>
<li class="li-04"></li>
<li class="li-01"></li>
<li class="li-02"></li>
currentIndex++
4.第三次循环
<li class="li-02"></li>
<li class="li-03"></li>
<li class="li-04"></li>
<li class="li-01"></li>
currentIndex++
补充一下框架代码
<pre>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="farm-current">
<ul>
<li class="li-01"></li>
<li class="li-02"></li>
<li class="li-03"></li>
<li class="li-04"></li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var timer = null;
var $items = $('.farm-current').find('li');
var itemsLens = $items.length;
var currentIndex = 0;
setInterval(function(){
move($items)
}, 1000);
function move($items){
for(var i = 0; i < itemsLens; i++){
if(currentIndex >= itemsLens){
currentIndex = 0
}
/*实现代码*/
currentIndex++;
}
}
})
</script>
</body>
</html></pre>
解决方案
我水平不高，代码写的不好，但是我觉这应该是你要效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.li-01 {
color: red;
}
.li-02 {
color: green;
}
.li-03 {
color: blue;
}
.li-04 {
color: yellow;
}
</style>
</head>
<body>
<div class="farm-current">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
var timer = null;
var $items = $('.farm-current').find('li');
var itemsLen = $items.length;
var arr = ['li-01', 'li-02', 'li-03', 'li-04'];
var currentIndex = 0;
timer = setInterval(function() {
move($items)
}, 1000);
// init class
function pushClass() {
$.each($items, function(index, ele) {
$(this).addClass(arr[index]);
});
}
function move() {
var temp = arr.pop();
arr.unshift(temp);
$.each($items, function(index, ele) {
$(this).removeClass().addClass(arr[index]);
});
}
pushClass();
});
</script>
</body>
</html>
这篇关于javascript - 有个html轮换样式的需求，不知道怎么用js实现，求解。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
