基于jquery实现轮播焦点图插件
编程学习 2021-07-04 21:04www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了基于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程序设计有所帮助。