HTML简单广告轮播器

1、首先建立一个images 文件夹存放图片;
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>

你可能感兴趣的:(html)