这个颜色怎么不变化

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="新.css">
	 
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<!-- <script type="text/javascript" src="../bootstrap/bootstrap.min.js"></script> -->


	<script type="text/javascript" src="新.js"></script>
</head>
<body>

	<div class="re"></div>
</body>
</html>

setInterval(timer,1000);
var re=$('.re');
var index=0;
function timer(){
	index++;
	if(index>=3){
		index=0;
	}



	if(index==0){
		re.css('background-color','#E8E8E8');
	}
	if(index==1){
		re.css('background-color','#FF0036');
	}
	else{
		re.css('background-color','#7A45E5');
		}
	console.log(index);
}

慕头不大 2018-01-05

源自：项目：JS实现轮播特效 3-4 图片自动轮播

收起

3回答

好帮手慕糖 2018-01-05 17:03:40

你好，index=0的时候，先执行if (index == 0)之后，会接着执行下面的if语句，即 if (index == 1)，index不满足这个条件，所以会执行这个语句的else语句，所以建议：这里可以改为else if；如下：

祝学习愉快~

收起回答

Miss路 2018-01-05 15:19:58

那你的代码没有问题，要把js文件放到body的最下面。不要放到style中,放到上面有可能会引起报错，因为dom还没有加载完，js就执行的话，会报错，找不到dom元素。

参考下面的写法：（换成你自己的jQuery地址）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    .re {
        width: 500px;
        height: 500px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="re"></div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        setInterval(timer, 1000);
        var re = $('.re');
        var index = 0;

        function timer() {
            index++;
            if (index >= 3) {
                index = 0;
            }
            if (index == 0) {
                re.css('background-color', '#E8E8E8');
            }
            if (index == 1) {
                re.css('background-color', '#FF0036');
            } else {
                re.css('background-color', '#7A45E5');
            }
            console.log(index);
        }
    </script>
</body>
</html>

祝学习愉快!

收起回答