<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
*{
margin:0;
padding:0;
}
ul li{
list-style:none;
}
.banner{
width:100%;
height:590px;
position: relative;
}
.bimg{
width:100%;
height:590px;
position: relative;
}
.bimg li{
position: absolute;
width: 100%;
height: 590px;
opacity: 0;
transition: .3s;
z-index: 0;
background: red;
}
.bimg li.on{
opacity: 1;
z-index: 1;
}
</style>
<body>
<div class="banner">
<ul class="bimg">
<li class="on" style="background:url('https://m.360buyimg.com/babel/jfs/t1/29896/20/13350/41922/5c9ed5d7E2e2b6412/8b81cde63fbac215.jpg')center center no-repeat">
</li>
<li style="background:url('https://m.360buyimg.com/babel/jfs/t1/23375/23/13064/94132/5c9dbd64E41cec9c9/a84a20b6fd02f06c.jpg')center center no-repeat">
</li>
<li style="background:url('https://m.360buyimg.com/babel/jfs/t1/20204/8/11496/97824/5c8f393cE5ebd698b/a6727f61aa8217b3.jpg')center center no-repeat">
</li>
</ul>
</div>
<div class="option">
<a href="javascript:void(0);" onclick="left();">左</a>
<ul class="hover-ul"><li>1</li><li>2</li><li>3</li></ul>
</div>
<script>
$(function(){
setInterval("auto_banner_do();",3000);
//悬停
$(".hover-ul li").hover(function(){
var len = $(".banner .bimg li").length;
var index = $(".hover-ul li").index(this);
index++;
auto_banner(index);
});
});
var banner_i = 2;
function auto_banner_do(){
auto_banner(banner_i);
banner_i++;
}
function auto_banner(x){
var len = $(".banner .bimg li").length;
if( x>len ){
x = 1;
}
$(".banner .bimg li").removeClass("on");
$(".banner .bimg li").eq(x-1).addClass("on");
banner_i=x;
}
//向左
function left(){
var len = $(".banner .bimg li").length;
var index = $(".banner .bimg li").index($(".banner .bimg li.on"));
auto_banner(index);
}
</script>
</body>
</html>
