<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图片</title>
<link href="css/index.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<header>轮播图片演示</header>
<div id="slider" class="scroll-container">
<li><img src="img/53a103bf4d556be4d50ab3c9401704e2.jpg"></li>
<li><img src="img/77e585e530b79d4bfdbb75c54fbad90d.jpg"></li>
<li><img src="img/de4f585e6ebade60b7087802c3760819.jpg"></li>
</div>
<div id="instruction" class="instruction">1</div>
<footer>
</footer>
</body>
</html>
CSS代码
header{
font-size: larger;
}
.scroll-container{
width: 900px;
height: 300px;
overflow: hidden;
}
li{
list-style-type: none;
}
.instruction{
width: 900px;
height: 30px;
background-color: darkgray;
opacity: 0.5;
margin-top: -30px;
text-align: center;
color: red;
font-size: 25px;
}
JS代码
/**
* Created by dxp on 2017/4/17 0017.
*/
// <!-- 计数幻灯片 -->
var count=1;
// <!--获取总数-->
function scroll_news(){
// 图片切换
var firstNode = $('#slider li'); //获取li对象
firstNode.eq(0).fadeOut("slow", function(){ //获取li的第一个,执行fadeOut,并且call - function.
//计数
if(count==3){
count=1;
}else {
count++;
}
$("#instruction").html(count)
// 图片切换
$(this).clone().appendTo($(this).parent()).show(); //把每次的li的第一个 克隆,然后添加到父节点 对象。
$(this).remove();//最后 把每次的li的第一个 去掉。
});//注意哦,这些都是在fadeOut里面的callback函数理执行的。
}
setInterval('scroll_news()',3000);//每隔0.5秒,执行scroll_news()
<!--轮播脚本-->