简易轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易轮播</title>
</head>
<style>
#banner{width: 560px; height: 290px; border: 1px solid #000; overflow: hidden; margin: 0 auto; position: relative;}
img{widows: 560px; height: 290px; display: none;}
ol{position: absolute; float:right; bottom: 10px;}
li{list-style: none; float: left;padding: 0 10px; margin-right:20px ; cursor: pointer;background: #999;}
ol .active{background: red;color:white;}
</style>
<script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
<body>
<div id="banner">
<img src="http://p4.qhimg.com/bdm/960_593_0/t01e71082414f50bd52.jpg">
<img src="http://p0.qhimg.com/bdm/480_296_0/t01f3894323e88ea123.jpg">
<img src="http://p15.qhimg.com/bdm/960_593_0/t01acc12e86173a0606.jpg">
<img src="http://p6.qhimg.com/bdm/960_593_0/t0127bd4f8758c42304.jpg">
<img src="http://p6.qhimg.com/bdm/480_296_0/t01e501e8d6a74a1a1d.jpg">
<ol class="active">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
<script>
//标记是否是第一次进入页面
var fistTime=true;
//图片下标
var index;
//图片下标中间变量
var index1;
//声明定时器
var timeId;
//li的总个数
var liSize;
$(document).ready(function(){
var temp = document.getElementById('banner');
var lis = temp.getElementsByTagName('li');
liSize = lis.length;
if(fistTime){
fistTime = false;
Carousel(0);
//延时1秒加载自动播放
setTimeout(autoplayCarousel(),1000);
} else {
//自动轮播
autoplayCarousel();
}
});
//手动轮播:鼠标悬停
$("li").mouseover(function(){
Carousel($(this).index());
//鼠标悬停移除定时器事件
clearInterval(timeId);
});
//鼠标移开重新加载自动轮播
$('li').mouseout(function(){
autoplayCarousel();
});
//轮播事件
function Carousel(index){
index1 = index;
$("img").eq(index).show().siblings("img").hide();
$("li").eq(index).addClass("active").siblings("li").removeClass("active");
}
//自动轮播定时器
function autoplayCarousel(){
timeId = setInterval(function(){
index = index1+1;
if(liSize==index){
index=0;
}
console.log(index);
Carousel(index);
}, 1000)
}
</script>
</html>