Jquery制作--焦點圖淡出淡入

2024-04-27 15:02:54

字體：大中小

來源：轉載

供稿：網友

之前寫了一個焦點圖左右輪播的，感覺淡出淡入用得也比較多，就干脆一起放上來啦。這個容器用了百分比寬度，圖片始終保持居中處理，定寬或者自適應寬度都是可以的。

兼容到IE6+以上瀏覽器，有淡出淡入速度和切換間隔兩個參數可以改。效果圖如下：

Html代碼如下：

<!doctype html><html lang="zh-CN"><head>  <meta charset="utf-8">  <title>淡出淡入焦點圖</title>  <link href="CSS/style.css" rel="stylesheet"/>  <script src="js/jquery-1.9.1.min.js"></script>  <script src="js/common.js"></script></head><body>  <div class="wrap">    <div class="banner">      <div class="bannerCon">        <!-- 容器有做自適應寬度處理，下面的圖片會保持居中顯示，建議使用最大尺寸的圖片填充 -->        <ul class="imgList">          <li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>          <li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>          <li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>        </ul>        <ul class="btnList">          <li class="cur"><span></span></li>          <li><span></span></li>          <li><span></span></li>        </ul>        <span class="PRe-nex prev">&lt;</span>         <span class="pre-nex next">&gt;</span>       </div>    </div>  </div></body></html>

Css樣式如下：

@charset "utf-8";/* 簡單reset */body,  p,  ul, ol, li {    margin: 0;    padding: 0;}ul, ol {    list-style: none;}img { border:none; }a,button{ outline: none; }.clearfix:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";    clear: both;    height: 0;} /* 具體樣式 */.banner { height: 400px; }.banner .bannerCon {    position: relative;    width: 60%;    height: 100%;    margin: 0 auto;    overflow: hidden;}.bannerCon .imgList {    width: 100%;    height: 100%;}.bannerCon .imgList li {    display: none;    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: #e2f6fd; /* 這個背景是為了展示寬度大于圖片寬度時的區域，可以刪除 */    z-index: 1;}.bannerCon .imgList li a {    display: block;    height: 100%;    text-align: center;}.imgList li a img {    position: absolute;    top: 0;    left: 50%;    margin-left: -400px; /* 這個數值填圖片的實際寬度的一半 */}.bannerCon .pre-nex {    display: none;    position: absolute;    top: 50%;    width: 40px;    height: 60px;    margin-top: -40px;    font: bold 40px/60px Simsun;    color: #ccc;    text-align: center;    border:none;    background: rgba(0,0,0,.30);    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);    cursor: pointer;    z-index: 3;}.bannerCon .pre-nex.show { display: inline-block; }.bannerCon .prev { left: 13%; }.bannerCon .next { right: 13%; }.bannerCon .btnList {    position: absolute;    left: 0;    bottom: 20px;    width: 100%;    height: 12px;    text-align:center;    z-index: 6;    _overflow: hidden;}.bannerCon .btnList li { display: inline; }.bannerCon .btnList li span {    display: inline-block;    width: 12px;    height: 12px;    margin: 0 5px;    border-radius: 6px;    background-color:#14829e;    cursor: pointer;}.bannerCon .btnList li.cur span { background-color: #f30; }