大家好,我是前端小白,前段時間也是在做一個項目,自己也根據搜索,學習了網站中較為常見的輪播圖,下面我就分享一下。
這是輪播圖的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庫相信大家都有了。
畢竟也是剛入門的下白,大神不喜勿噴。拜謝