jq 플러그인 처녀자리 사진 윤방
25691 단어 사진 윤방
(function($) {
$.fn.carousel = function(options) {
if($(this).length==0)return false;
var opts = $.extend({},$.fn.carousel.defaults,options);
function Slide(o){
this.o = o;
this.box = o.find(opts['imgbox']);
this.cirEle = this.box.find(opts['cirEle'])
this.nav = o.find(opts['slideNav']);
this.rightAr = o.find(opts['rightAr']);
this.leftAr = o.find(opts['leftAr']);
this.et = opts['eventType'];
this.autoPlay = opts['autoPlay'];
this.navClass = opts['navClass'];
this.speed = opts['speed']
this.timer = null;
this.len = this.cirEle.length;
this.cirNavEle = null;
this.onOff = true;
this.activeIndex = 0;
this.iNow = 0;
this.boxWidth = this.box.outerWidth()
}
Slide.prototype.init = function(){
var _this = this;
_this.createNav().togglePage();
this.leftAr.on('click',function(){
_this.play(1);
})
this.rightAr.on('click',function(){
_this.play();
})
if(this.autoPlay){
this.stop();
this.timer = setInterval(function(){
_this.play();
},this.speed[1]);
this.o.hover(function(){
_this.stop();
},function(){
_this.timer = setInterval(function(){
_this.play();
},_this.speed[1])
})
}
}
Slide.prototype.createNav = function(){
var _this = this;
var arr = [];
$.each(_this.cirEle,function(i,n){
if(i == 0){
arr.push('<span class="cur">'+ (i+1) +'</span>');
}else{
arr.push('<span>'+ (i+1) +'</span>');
_this.cirEle.eq(i).css({'left':_this.boxWidth});
}
});
_this.nav.html(arr.join(''));
this.cirNavEle = _this.nav.find('span');
return this;
}
Slide.prototype.togglePage = function(){
var _this = this;
this.cirNavEle.on(_this.et,function(){
if(_this.onOff){
_this.onOff = false;
_this.activeIndex = $(this).index();
$(this).addClass(_this.navClass).siblings().removeClass(_this.navClass);
if(_this.activeIndex > _this.iNow){
_this.toggleRight();
}else if( _this.activeIndex < _this.iNow ){
_this.toggleLeft();
}
_this.cirEle.eq(_this.activeIndex).animate({'left':0},_this.speed[0],function(){
_this.onOff = true;
$(this).css({'z-index':1}).siblings().css({'z-index':0})
})
_this.iNow = _this.activeIndex;
}
})
return this;
}
Slide.prototype.toggleLeft= function(){
var _this = this;
_this.cirEle.eq(_this.activeIndex).css({'left':-_this.boxWidth})
_this.cirEle.eq(_this.iNow).animate({'left':_this.boxWidth},_this.speed[0])
}
Slide.prototype.toggleRight= function(){
var _this = this;
_this.cirEle.eq(_this.activeIndex).css({'left':_this.boxWidth})
_this.cirEle.eq(_this.iNow).animate({'left':-_this.boxWidth},_this.speed[0])
}
Slide.prototype.play = function(dir){
var _this = this;
if(_this.onOff){
_this.onOff = false;
if(!dir){
_this.activeIndex++;
_this.activeIndex %= _this.len;
_this.toggleRight();
}else{
_this.activeIndex--;
if(_this.activeIndex <= 0){
_this.activeIndex = 0;
}
_this.toggleLeft();
}
_this.cirEle.eq(_this.activeIndex).animate({'left':0},_this.speed[0],function(){
_this.onOff = true;
_this.iNow = _this.activeIndex;
_this.cirNavEle.eq(_this.activeIndex).addClass(_this.navClass).siblings().removeClass(_this.navClass);
$(this).css({'z-index':1}).siblings().css({'z-index':0})
})
}
}
Slide.prototype.stop = function(){
clearInterval(this.timer);
}
return this.each(function () {
var $this = $(this);
var obj = new Slide($this);
obj.init();
});
};
//
$.fn.carousel.defaults = {
'imgbox' : '.carousel-box', //
'cirEle' : 'li', //
'slideNav' : '.carousel-nav', //
'autoPlay' : true, //
'rightAr' : '.arR', //
'leftAr' : '.arL', //
'speed':[500,3000], // ，
'eventType' : 'click', //
'navClass' : 'cur' // css
}
})(jQuery); HTML
<div class="area">
<div class="carousel-box">
<ul>
<li><a href="#1"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#2"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#3"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#4"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#5"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#6"><img src="images/6.jpg" alt=""></a></li>
<li><a href="#7"><img src="images/7.jpg" alt=""></a></li>
</ul>
</div>
<div class="carousel-nav"></div>
<span class="arL"><</span>
<span class="arR">></span>
</div>
<script>
$(function(){
$('.area').carousel();
})
</script>css
.area, .area .carousel-box {
width: 310px; }
.area .carousel-nav span, .area .arR, .area .arL {
width: 20px;
height: 20px;
border: 1px solid #666;
text-align: center;
display: inline-block; }
.area .carousel-box ul, .area .carousel-box li {
position: absolute;
left: 0;
top: 0; }
.area {
margin: 50px auto; }
.area .carousel-box {
height: 350px;
overflow: hidden;
position: relative; }
.area .carousel-nav span.cur {
background: #000;
color: #FFF; }
.area .arR, .area .arL {
margin-top: 20px; } 지금 돌이켜 생각해 보면 사실 jq플러그인은 생각보다 어렵지 않다. 어려운 것은 기능을 실현하는 사고방식에서 쓰는 방법과 평상시 js도 차이가 많지 않다. 위에서 지금은 간단하게 좌우 윤방을 실현할 뿐이다. 시간이 있으면 위아래 방향도 추가한다.
좋은 웹페이지 즐겨찾기
