Jquery制作--焦點圖左右輪播

2024-04-27 15:02:37

字體：大中小

來源：轉載

供稿：網(wǎng)友

公司項目經(jīng)常用到輪播焦點圖，于是自己寫了一個純jq形式的橫向輪播焦點圖，可點擊小圓點或者左右按鈕進行切換，屬于定寬類型。改成自適應寬度的也不難，將CSS里面的bannerCon寬度改為百分比，再在js里面將ul和li的寬度跟隨父級容器的寬度變化即可，需要用到$(window).resize，目前公司暫時沒用到，就先放這個定寬的出來啦。

兼容到IE6+以上瀏覽器，有輪播速度和切換間隔兩個參數(shù)可以改。效果圖如下：

Html代碼如下：

<!doctype html><html lang="zh-CN"><head>  <meta charset="utf-8">  <title>banner圖</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 clearfix">          <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 {    position: relative;    height: 400px;    overflow: hidden;}.banner .bannerCon {    position: absolute;    top: 0;    left: 50%;    width: 800px;    height: 400px;    margin-left: -400px;    overflow: hidden;}.bannerCon .imgList {    position: absolute;    top: 0;    left: 0;    width: 99999px;    height: 400px;}.bannerCon .imgList li {    float: left;    width: 800px;    height: 400px;}.bannerCon .imgList li a {    position: relative;    display: block;    height: 100%;}.bannerCon .imgList li img {    width: 800px;    height: 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: 2;    _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; }