jQuery 簡潔實現圓點按鈕輪播圖


大家好,我是前端小白,前段時間也是在做一個項目,自己也根據搜索,學習了網站中較為常見的輪播圖,下面我就分享一下。

 

 這是輪播圖的html結構,ul里的li標簽放置三張輪播圖片,ol控制圓點效果以及加載腳本。

.example2 ol{
    position:relative;
    width: 200px;
    height: 40px;
    top:-30px;
    left:460px;}
.example2 ol li{
    float:left;
    width: 18px;
    height: 18px;
    margin: 5px;
    background: #fff;
    border-radius: 50%;
}
.example2 ol li.seleted{
    background: #fca500;
}
以上是圓點樣式
以下是內置的JS樣式
.luara-left{
    position:relative;
    padding:0;
    overflow: hidden;
}
.luara-left ul{
    position: relative;
    padding: inherit;
    margin: 0;
}
.luara-left ul li{
    float: left;
    padding: inherit;
    margin: inherit;
    list-style: none;
}
.luara-left ul li img{
    width: inherit;
    height: inherit;
}
$(".example2").luara({width:"990",height:"400",interval:4500,selected:"seleted",deriction:"left"});
以上腳本部分。
不過,在使用之前是需要引入兩個JQUERY庫,一個是JQUERY,一個是自己的LUARA插件,兩者缺一不可。

下面我放的是插件地址:https://pan.baidu.com/s/1zmeJsuymng-VmhGwdx9l2w   密碼:2sra。

jquery庫相信大家都有了。

畢竟也是剛入門的下白,大神不喜勿噴。拜謝


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM