通栏自适应通栏焦点图-05

1、结构

<!-------------------------------焦点图通栏自适应---------------------------->

<div class="fullSlide">
      <div class="bd">
        <ul>
          <li _src="url(images/banner1.jpg)" style="background:#fff center 0 no-repeat;"><a href="http://www.internetke.com/effects/css3/2015/0116/1193.html" target="_blank"></a></li>
          <li _src="url(images/banner2.jpg)" style="background:#fff center 0 no-repeat;"><a href="http://www.internetke.com/effects/css3/2015/0116/1193.html" target="_blank"></a></li>
          <li _src="url(images/banner3.jpg)" style="background:#fff center 0 no-repeat;"><a href="http://www.internetke.com/effects/css3/2015/0116/1193.html" target="_blank"></a></li>
          <li _src="url(images/banner4.jpg)" style="background:#fff center 0 no-repeat;"><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=283673468&amp;site=QQ咨询&amp;menu=yes" target="_blank"></a></li>
          
        </ul>
      </div>
      <div class="hd">
        <ul>
        </ul>
      </div>
  <span class="prev"></span> <span class="next"></span>
</div>

2、样式

/*banner焦点图*/
.fullSlide {100%;position:relative;height:500px;background:#fff;}
.fullSlide .bd {margin:0 auto;position:relative;z-index:0;overflow:hidden;}
.fullSlide .bd ul {100% !important;}
.fullSlide .bd li {100% !important;height:500px;overflow:hidden;text-align:center;}
.fullSlide .bd li a {display:block;height:500px;}
.fullSlide .hd {100%;position:absolute;z-index:1;bottom:0;left:0;height:30px;line-height:30px;}
.fullSlide .hd ul {text-align:center;}
.fullSlide .hd ul li {cursor:pointer;display:inline-block;*display:inline;zoom:1;42px;height:11px;margin:1px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px;}
.fullSlide .hd ul .on {background:#f00;}
.fullSlide .prev,.fullSlide .next {display:block;position:absolute;z-index:1;top:50%;margin-top:-30px;left:15%;z-index:1;40px;height:60px;background:url(../images/slider-arrow.png) -126px -137px #000 no-repeat;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;display:none;}
.fullSlide .next {left:auto;right:15%;background-position:-6px -137px;}

3、效果

<!-------------------------------焦点图---------------------------->

<script src="http://www.hc360.com/dx/zt/2016/0226/js/jquery-1.10.2.min.js"></script>

<script src="http://www.hc360.com/dx/zt/2016/0226/js/jsxg.js">

</script> <script src="http://www.hc360.com/dx/zt/2016/0226/js/superslide.2.1.js"></script>

<script type="text/javascript">
jQuery(".fullSlide").hover(function() {
    jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function() {
    jQuery(this).find(".prev,.next").fadeOut()
});
jQuery(".fullSlide").slide({
    titCell: ".hd ul",
    mainCell: ".bd ul",
    effect: "fold",
    autoPlay: true,
    autoPage: true,
    trigger: "click",
    startFun: function(i) {
        var curLi = jQuery(".fullSlide .bd li").eq(i);
        if ( !! curLi.attr("_src")) {
            curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
        }
    }
});
</script>