您的位置：首页 > Web前端 > JavaScript

HTML+CSS+JS实现banner横幅自动切换效果

2017-09-05 18:33 826 查看

imagebanner.html

<!DOCTYPE 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>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<!--<li>6</li>-->
</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{}

效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航