HTML简单⼴告轮播器
1、⾸先建⽴⼀个images ⽂件夹存放图⽚；
jquery自动轮播图代码2、建⽴⼀个js⽂件夹存放jquery.js代码；
3、建⼀个html页，
代码如下：
<?xml version="1.0" encoding="gb2312"?>
<html>
<head>
<title>第⼀个⽹页</title>
<meta charset="gb123"/><!--设置编码-->
<style type="text/css">
*{
margin:0px;
}
.flash{
width:653px;height:256px;margin:100px auto;position:relative;
overflow:hidden;<!---超出范围隐藏--->
}
.flash ul{width:70px;height:15px;background-color:rgba(0,0,0,0.5);padding:5px 20px; border-radius:10px;position:absolute;top:220px;left:280px;
}
.flash ul li{width:10px;height:10px;border:1px solid white;float:left;color:#fff;
margin-right:3px;border-radius:7px;padding:1px;list-style-type:none;
}
.flash ul li.hover{
background:#fff;
}
</style>
</head>
<body >
<div class="flash">
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
<ul class="button">
<li class="hover"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript">
var index=0;//声明序列号默认从0开始的
var play=null;
$(".button li").mouseover(function(){
clearInterval(play);
index=$(this).index();
// alert(index);
$(this).addClass("hover").siblings().removeClass("hover");
<!--this表⽰当前对象sibling表⽰同等级的对象-->
$(".flash img").eq(index).show().siblings("img").hide();
}).mouseout(function(){
autoplay();
});
function autoplay(){
play=setInterval(function(){
index++;
if(index>3){index=-1;}else{
$(".button li").eq(index).addClass("hover").siblings().removeClass("hover");
$(".flash img").eq(index).show().siblings("img").hide();}
},2000);
}
autoplay();
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。