HTML+CSS+JS实现banner横幅自动切换效果
imagebanner.html
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">script>
<script type="text/javascript" src="js/test.js">script>
<link rel="stylesheet" type="text/css" href="css/test.css" />
<script>
$(document).ready(function function_name() {
changeImg()
})
script>
head>
<body>
<div id="ad" style="text-align: center;">
<ul id="ad_img" >
<li><img src="img/b1.png" width="960" height="600" />li>
<li><img src="img/b2.png" width="960" height="600" />li>
<li><img src="img/b3.png" width="960" height="600" />li>
<li><img src="img/b4.png" width="960" height="600" />li>
<li><img src="img/b5.png" width="960" height="600" />li>
ul>
<ul id="ad_num">
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
div>
body>
html>test.js
function changeImg() {
/*获取图片和索引的数组*/
var $imgs = $("#ad_img li");
var $nums = $("#ad_num li");
var isStop = false;
var index = 0;
$nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
$imgs.eq(index).show();
/*鼠标悬停在数字上的事件*/
$nums.mouseover(function() {
isStop = true;
/*先把数字的背景改了*/
$(this).addClass("numsover").siblings().removeClass("numsover");
/*图片的索引和数字的索引是对应的，所以获取当前的数字的索引就可以获得图片，从而对图片进行操作*/
index = $nums.index(this);
$imgs.eq(index).show("slow");
$imgs.eq(index).siblings().hide("slow");
}).mouseout(function() {
isStop = false
});
/*设置循环*/
setInterval(function() {
if(isStop) return;
if(index >= 5) index = -1;
index++;
$nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
$imgs.eq(index).show("slow").siblings().hide("slow");
}, 3000);
}test.css
#ad{
width:960px;
height:600px;
position:absolute;
}
/*取消小圆点*/
#ad li{
list-style:none;
}
#ad_img li{
display:none;
}
/*角落显示数字的ul*/
#ad_num{
overflow:hidden;
position:absolute;
bottom:10px;
right:10px;
color:#FFF;
}
/*数字的浮动*/
#ad_num li{
border:#FFF solid 1px;
float:left;
margin:0px 5px;
padding:3px 10px;
}
.numsover{
background-color:#F08080;
color:#F00;
}
.numsout{}
效果
