js图片轮播插件的封装

来源：动视网责编：小OO 时间：2020-11-27 22:34:24

js图片轮播插件的封装

本文为大家分享了js图片轮播插件的具体代码，供大家参考，具体内容如下：我封装的这个轮播插件只需要获取到图片和按钮就可以啦。css 样式；，0，0，0.3)；} .left{ left： 0；background： url('../img/left.png') no-repeat center center；} .right{ right： 0；background： url('../img/right.png') no-repeat center center；}。页面结构 html 代码。

推荐度：

点击下载本文 文档为doc格式

导读本文为大家分享了js图片轮播插件的具体代码，供大家参考，具体内容如下：我封装的这个轮播插件只需要获取到图片和按钮就可以啦。css 样式；，0，0，0.3)；} .left{ left： 0；background： url('../img/left.png') no-repeat center center；} .right{ right： 0；background： url('../img/right.png') no-repeat center center；}。页面结构 html 代码。

本文为大家分享了js图片轮播插件的具体代码，供大家参考，具体内容如下

我封装的这个轮播插件只需要获取到图片和按钮就可以啦。

css 样式

.body{
 width: 700px;
 margin: 100px auto;
 position: relative;
 height: 300px;
 overflow: hidden;
 }
 .body img{
 width: 700px;
 position: absolute;
 display: none;
 }
 .body ul{
 position: absolute;
 bottom: 3px;
 left: 50%;
 transform: translateX(-50%);

 }
 .body li{
 list-style: none;
 float: left;
 width: 15px;
 height: 15px;
 border-radius: 50px;
 background: none;
 border: 2px solid #fff;
 margin-right: 10px;
 cursor: pointer;
 }
 .active{
 background-color: #fff !important;

 }
 .body a{
 text-decoration: none;
 position: absolute;
 display: block;
 top: 50%;
 transform: translateY(-50%);
 height: 50px;
 width: 30px;
 background-size: 100% 60%;
 background-color: rgba(0,0,0,0.3);
 }
 .left{
 left: 0;
 background: url('../img/left.png') no-repeat center center;
 }
 .right{
 right: 0;
 background: url('../img/right.png') no-repeat center center;
 }

页面结构 html 代码

<body>
 <div class="body">
 <img src="img/1.jpg">
 <img src="img/2.jpg">
 <img src="img/3.jpg">

<ul>
 <li class="active"></li>
 <li></li>
 <li></li>
 </ul>
 <a href="javascript:;" class="left"></a>
 <a href="javascript:;" class="right"></a>
 </div>

js部分，插件调用

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
 <script type="text/javascript" src="js/slider.js"></script>
 <script type="text/javascript">
 $.slider({
 imgElement:$(".body img"),
 liElement:$(".body li"),
 leftBtn:$(".left"),
 rightBtn:$(".right"),
 time:2000
 })
</script>

封装的插件

(function($){
 function slider(options){
 this.opts=$.extend({},slider.defaluts,options);
 this._imgSlider();
 }
 //设置默认值
 slider.defaluts={
 imgElement:null,
 liElement:null,
 leftBtn:null,
 rightBtn:null,
 time:2000
 }
 slider.prototype._imgSlider=function(){
 var opts=this.opts,
 index=0,
 len=opts.imgElement.length,
 timeInter=null;
 if(opts.imgElement=='') return;
 opts.imgElement.eq(0).show();
 showTime();
 //当鼠标经过 轮播停止，移开继续
 opts.imgElement.hover(function() {
 clearInterval(timeInter);
 }, function() {
 showTime();
 });

 //点击li 显示对应的图片
 opts.liElement.click(function(){
 var id=$(this).index();
 show(id);
 });
 //向左向右
 opts.leftBtn.click(function(){
 clearInterval(timeInter);
 --index;
 index=Math.max(0,index);
 show(index);
 showTime();
 });
 opts.rightBtn.click(function(){
 clearInterval(timeInter);
 ++index;
 index=Math.min(len-1,index);
 show(index);
 showTime();
 });


 function showTime(){
 timeInter=setInterval(function(){
 index++;
 if(index>len){
 index=0;
 }
 show(index);
 },opts.time);
 }
 function show(index){
 opts.imgElement.eq(index).fadeIn(1000).siblings('img').fadeOut(1000);
 opts.liElement.eq(index).addClass('active').siblings('li').removeClass('active');
 }

 }
 $.extend({
 slider:function(options){
 new slider(options);
 }
 })
})(jQuery)

效果图

js图片轮播插件的封装

推荐度：

点击下载本文 文档为doc格式

标签：图片 js 封装

热门焦点

js图片轮播插件的封装

js图片轮播插件的封装

js图片轮播插件的封装

最新推荐

猜你喜欢

热门推荐