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