Jquery制作--焦点图左右轮播

2024-04-27 15:02:37

字体：大中小

来源：转载

供稿：网友

公司项目经常用到轮播焦点图，于是自己写了一个纯jq形式的横向轮播焦点图，可点击小圆点或者左右按钮进行切换，属于定宽类型。改成自适应宽度的也不难，将CSS里面的bannerCon宽度改为百分比，再在js里面将ul和li的宽度跟随父级容器的宽度变化即可，需要用到$(window).resize，目前公司暂时没用到，就先放这个定宽的出来啦。

兼容到IE6+以上浏览器，有轮播速度和切换间隔两个参数可以改。效果图如下：

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; }