你的位置:首页 > Java教程

[Java教程]基于jQuery可悬停控制图片轮播代码


基于jQuery可悬停控制图片轮播代码。这是一款可悬停切换全屏轮播jQuery幻灯片。效果图如下:

在线预览    源码下载

实现的代码:

<!-- 轮播广告 -->  <div id="banner_tabs" class="flexslider">    <ul class="slides">      <li>        <a title="" target="_blank" href="#">          <img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png">        </a>      </li>      <li>        <a title="" href="#">          <img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png">        </a>      </li>      <li>        <a title="" href="#">          <img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png">        </a>      </li>    </ul>    <ul class="flex-direction-nav">      <li><a class="flex-prev" href="javascript:;">Previous</a></li>      <li><a class="flex-next" href="javascript:;">Next</a></li>    </ul>    <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">      <li><a>1</a></li>      <li><a>2</a></li>      <li><a>2</a></li>    </ol>  </div>  <script src="js/jquery-1.10.2.min.js"></script>  <script src="js/slider.js"></script>  <script type="text/javascript">    $(function () {      var bannerSlider = new Slider($('#banner_tabs'), {        time: 5000,        delay: 400,        event: 'hover',        auto: true,        mode: 'fade',        controller: $('#bannerCtrl'),        activeControllerCls: 'active'      });      $('#banner_tabs .flex-prev').click(function () {        bannerSlider.prev()      });      $('#banner_tabs .flex-next').click(function () {        bannerSlider.next()      });    })  </script>

css代码:

 .flexslider {      margin: 0px auto 20px;      position: relative;      width: 100%;      height: 482px;      overflow: hidden;      zoom: 1;    }      .flexslider .slides li {        width: 100%;        height: 100%;      }    .flex-direction-nav a {      width: 70px;      height: 70px;      line-height: 99em;      overflow: hidden;      margin: -35px 0 0;      display: block;      background: url(images/ad_ctr.png) no-repeat;      position: absolute;      top: 50%;      z-index: 10;      cursor: pointer;      opacity: 0;      filter: alpha(opacity=0);      -webkit-transition: all .3s ease;      border-radius: 35px;    }    .flex-direction-nav .flex-next {      background-position: 0 -70px;      right: 0;    }    .flex-direction-nav .flex-prev {      left: 0;    }    .flexslider:hover .flex-next {      opacity: 0.8;      filter: alpha(opacity=25);    }    .flexslider:hover .flex-prev {      opacity: 0.8;      filter: alpha(opacity=25);    }      .flexslider:hover .flex-next:hover,      .flexslider:hover .flex-prev:hover {        opacity: 1;        filter: alpha(opacity=50);      }    .flex-control-nav {      width: 100%;      position: absolute;      bottom: 10px;      text-align: center;    }      .flex-control-nav li {        margin: 0 2px;        display: inline-block;        zoom: 1;        *display: inline;      }    .flex-control-paging li a {      background: url(images/dot.png) no-repeat 0 -16px;      display: block;      height: 16px;      overflow: hidden;      text-indent: -99em;      width: 16px;      cursor: pointer;    }      .flex-control-paging li a.flex-active,      .flex-control-paging li.active a {        background-position: 0 0;      }    .flexslider .slides a img {      width: 100%;      height: 482px;      display: block;    }

via:http://www.w2bc.com/article/54959