基于jquery实现轮播焦点图插件

直接上代码，可能不是最好的，欢迎吐槽。


/**
* Created by Steven on 2015/07/10/0010.
* @email zhuttymore@126.com
*/

(function ($) {

$.fn.slider = function (opt) {
opt = $.extend({
speed:'fast',
auto: false,
interval: 1000
}, opt);

var _this = this;
var index = 0;
_this.find('.window li').width(_this.width());

var animate = function(index){
var win = _this.find('.window');
var offset = win.parent().width();
win.animate({'marginLeft': -offset * index}, opt.speed);
_this.find('.tab li').removeClass('select');
_this.find('.tab li').eq(index).addClass('select');
};

_this.find('.tab li').mouseover(function () {
index = parseInt($(this).index());
animate(index);

});

_this.find('.btn li:first-child').click(function(){
--index;
if(index < 0){
index = _this.find('.window li').length - 1;
}
animate(index);
});

_this.find('.btn li:last-child').click(function(){
++index;
if(index >= _this.find('.window li').length){
index = 0;
}
animate(index);
});

if(opt.auto){
var time = setInterval(function(){
++index;
if(index >= _this.find('.window li').length){
index = 0;
}
animate(index);
},opt.interval);
}

return $.each(this,function(index,ele){});
};
})(jQuery);


Html


<div class="slider">
<ul class="btn">
<li><i class=" icon-caret-left"></i></li>
<li><i class=" icon-caret-right"></i></li>
</ul>
<ul class="window">
<li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li>
<li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li>
<li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li>
<li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li>
</ul>
<ul class="tab">
<li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li>
<li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li>
<li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li>
<li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li>
</ul>
</div>

CSS


.slider {
height: 440px;
overflow: hidden;
position: relative;
}
.slider .btn li{
position: absolute;
width: 30px;
height: 50px;
cursor: pointer;
color: #fff;
text-align: center;
font-size: 40px;
top:45%;
}
.slider .btn li:first-child {

left:0;

}

.slider .btn li:last-child {

right:0;

}

.slider img {
width: 100%;
height: 100%;
}

.slider .window {
width: 40000px;
height: 400px;
overflow: hidden;
}

.slider .window li {
float: left;
overflow: hidden;
width: 1200px;
}

.slider .tab {
position: absolute;
z-index: 5;
width: 880px;
margin: -40px auto;
left: 13%;
}

.slider .tab li {
float: left;
width: 200px;
height: 80px;
margin-left: 18px;
cursor: pointer;
}


Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。
Run 起来： $('.slider').slider({auto: true, interval: 2000});
改进js结构：


/**
* Created by Steven on 2015/07/10/0010.
* @email zhuttymore@126.com
*/

(function ($) {

$.fn.extend({
slider:function (opt) {
opt = $.extend({

}, opt);
//Do something here

return $.each(this,function(index,ele){});
}
});

})(jQuery);


以上就是本文的全部内容，希望对大家学习jqueryt程序设计有所帮助。


有用  |  无用 取消

猜你喜欢