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)

效果圖