国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML+jq簡單輪播圖

番茄西紅柿 / 3396人閱讀

摘要：圖片，按鈕，上下頁必須是同級元素使用按鈕變色，需要定義的樣式推薦使用插件，手機端很好用，端貌似不太好用路標

.main{
    width: 100%;
    min-width: 1100px;
    display: table;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.pic {
    width: 100%;
    min-width: 1100px;
    height: 500px;
    z-index: 0;
}
.pic ul {
    width: 100%;
    height: 100%;
}
.pic ul li {
    width: 100%;
    height: 100%;
    list-style: none;    
    position: absolute;
    top: 0;
    right: 0;
}
.pic li img {
    width: 100%;
    height: 100%;
}
.btn{
    width: 300px;
    height: 1.5px;
    margin: 0 auto;
    z-index: 1;
    position: relative;
    top: -40px;
}
.btn ul {
    width: auto;
    height: 1.5px;
    display: table;
    margin: 0 auto;
}
.btn ul li {
    width: 37px;
    height: 1.5px;
    float: left;
    list-style: none;
    margin: 0 6px;
    background: #000;
}
.btn .btn-style{
     background-color: yellow;
}

 圖片，按鈕，上下頁必須是同級元素

<div class="main">
    <div class="pic">
        <ul>
            <li><img src="img/index/b1.jpg"/>li>
            <li style="display: none;"><img src="img/index/b2.jpg"/>li>    
            <li style="display: none;"><img src="img/index/b3.jpg"/>li>
            <li style="display: none;"><img src="img/index/b4.jpg"/>li>
        ul>                        
    div>
    <div class="btn">
        <ul>
            <li style="background: yellow;">li>
            <li>li>
            <li>li>
            <li>li>
        ul>
    div>  
　  <div class="btn-next">div>
    <div class="btn-pre">div>                  
div>

 

$(document).ready(function() {
    //使用按鈕變色，需要定義.btn-style的樣式
    Carousel(.pic);
});

function Carousel(car){
    var index = 0;
    var interval;
    var pic = $(car);
    var btn = pic.siblings(.btn);            
    var pre = pic.siblings(.btn-pre);
    var next = pic.siblings(.btn-next);
    var num = pic.find(li).length;
    
    btn.find(ul li).mouseover(function() {
        index = $(this).index();
        display(index);
    });
    
    pre.click(function(){
        index--;
        if(index < 0) {
            index = num;
        }
        display(index);
    });
    
    next.click(function(){
        index++;
        if(index > num) {
            index = 0;
        }
        display(index);
    });

    function display() {
        pic.find(ul li).eq(index).fadeIn(slow);
        pic.find(ul li).eq(index).siblings().fadeOut(fast);                
        btn.find(ul li).eq(index).addClass(btn-style);
        btn.find(ul li).eq(index).siblings().removeClass(btn-style);
    }

    interval = setInterval(function() {
        index++;
        if(index > num) {
            index = 0;
        }
        display(index);
    }, 2000);

    pic.parent().mouseenter(function() {
        clearInterval(interval);
    });

    pic.parent().mouseleave(function() {
        interval = setInterval(function() {
            index++;
            if(index > num) {
                index = 0;
            }
            display(index);
        }, 2000);
    });    
}

 

推薦使用swiper插件，手機端很好用，pc端貌似ie不太好用

路標： http://www.swiper.com.cn/

swiper4 api ：http://www.swiper.com.cn/api/index.html

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/2047.html

相關(guān)文章

  • 回顧自己三次失敗的面試經(jīng)歷

    摘要：站在這個時間點上，我對自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

    DC_er 評論0 收藏0

  • 回顧自己三次失敗的面試經(jīng)歷

    摘要：站在這個時間點上，我對自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

    spacewander 評論0 收藏0

  • 《第31天：JQuery - 輪播圖》

    摘要：源碼下載地址鏈接提取碼寫這篇文章，當做是對自已這一天的一個總結(jié)寫輪播圖要準備的東西三張尺寸大小一樣的圖片分為三個模塊模塊，模塊，模塊模塊輪播圖引用本地固定的庫引入你寫的文件引入你寫的文件為你本地的圖片路徑，為你圖片的寬度，為類名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源碼下載地址：鏈接：https...

    fuyi501 評論0 收藏0

  • 《第31天：JQuery - 輪播圖》

    摘要：源碼下載地址鏈接提取碼寫這篇文章，當做是對自已這一天的一個總結(jié)寫輪播圖要準備的東西三張尺寸大小一樣的圖片分為三個模塊模塊，模塊，模塊模塊輪播圖引用本地固定的庫引入你寫的文件引入你寫的文件為你本地的圖片路徑，為你圖片的寬度，為類名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源碼下載地址：鏈接：https...

    RiverLi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<