广告横幅图片轮显

发布时间:2020年07月02日      浏览次数:455 次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广告横幅图片轮显</title>
<style>
#top_banner{ clear:both; width:100%; height:50%; max-height:500px; margin:0 auto; padding:0px; background-color:#f9f9f9; overflow:hidden; position:relative; z-index:10000;}
      #top_banner img{ float:left; width:100%; height:100%; margin:0 auto; cursor:pointer; z-index:-1; }
      #top_banner .num{ position:absolute; bottom:1%; left:50%; width:30%; height:10px; margin-left:-15%; text-align:center; display:table; z-index:10001;}
            #top_banner .num span{ width:10px; height:10px; line-height:10px; margin-left:1%; cursor:pointer; background-color:#fff; border:1px #f9f9f9 solid; overflow:hidden; display:inline-block; }
            #top_banner .num span.on{ width:40px; }
      .btn_left{ position:absolute; top:45%; left:5%; width:50px; height:50px; line-height:45px; font-size:36px; color:#ccc; text-align:center; cursor:pointer; border:1px #ddd solid; border-radius:50%; background-color:#fff; filter:alpha(Opacity=70); -moz-opacity:0.7; opacity:0.7; z-index:10001; display:;}
      .btn_right{ position:absolute; top:45%; right:5%; width:50px; height:50px; line-height:45px; font-size:36px; color:#ccc; text-align:center; cursor:pointer; border:1px #ddd solid; border-radius:50%; background-color:#fff; filter:alpha(Opacity=70); -moz-opacity:0.7; opacity:0.7; z-index:10001; display:;}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
</head>

<body>
<div id="top_banner">
      <a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 1; display: none;"></a>
      <a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 0; display: none;"></a>
      <a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 0; display: none;"></a>
      <a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 0; display: none;"></a>
      <div class="num">
            <p class="mc" id="top_numinner">
                  <span class="on"></span>
                  <span class=""></span>
                  <span class=""></span>
                  <span class=""></span>
            </p>
      </div>
      <div class="btn_left"><</div>
      <div class="btn_right">></div>
</div>

<script>
var top_activeSlide = 0;
var top_numberSlides = 0;
var top_active=0; //当前图片index号
var top_slides;
var top_pre=0; //上一张图片index号
var top_clock;
var top_numpot;
var top_run = false;

//初始化
orbit=$("#top_banner a");
top_slides = orbit.children("img, a");
top_numberSlides=top_slides.size();
top_slides.each(function(){
      var _slide = $(this);
      _slide.css("z-index", "0");
});
$(".btn_left").css("display", "none"); //隐藏左箭头
$(".btn_right").css("display", "none"); //隐藏右箭头

//鼠标放上去,停止轮显,并显示左右箭头
$("#top_banner").bind('mouseover', function(e){
       clearInterval(top_clock);
       $(".btn_left").css("display", "");
       $(".btn_right").css("display", "");
});
//鼠标离开,启动轮显,并隐藏左右箭头
$("#top_banner").bind('mouseout', function(e){
       $(".btn_left").css("display", "none");
       $(".btn_right").css("display", "none");
       clearInterval(top_clock);
       top_clock = setInterval("top_step()", 2000);
});
//点击左箭头,显示上一张图片
$(".btn_left").bind('click', function(e){
      clearInterval(top_clock);
      top_pre = top_active;
      top_active -= 2;
      top_step();
});
//点击右箭头,显示下一张图
$(".btn_right").bind('click', function(e){
      clearInterval(top_clock);
      top_step();
});
//点击图片下方的小图标进行更换指定图片
top_numpot=$("#top_numinner").children("span");
top_numpot.each(function(i) {
      $(this).bind('click', {index:i}, function(e){
            clearInterval(top_clock);
            top_active=e.data.index;
            top_step();
      });
});      

//初始化开始轮显
top_step();
top_clock =setInterval("top_step()",2000);

//轮显函数
function top_step(){
      if(top_active >= top_numberSlides){
            top_active=0;
            top_pre=top_numberSlides-1;
      }
      if( top_active < 0 ){
            top_pre=0;
            top_active = top_numberSlides-1;
      }
      
      top_slides.css("display","none"); //隐藏所有图片
      top_numpot.removeClass("on");
      top_numpot.eq(top_active).addClass("on"); //当前top_active成激活状态
      
      top_slides.eq(top_pre)
      .css("display","none") //隐藏上一张图片
      .css({"z-index" : 0})
      
      top_slides.eq(top_active)
      .css({"z-index" : 0})
      .fadeIn(1000, function() {
            $(this).css("display", "") //显示当前张图片
      });
      
      top_pre=top_active;
      top_active=top_active+1;
}
</script>
</body>
</html>
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!