焦点图插件
2018-01-17 20:19
113 查看
<div id="test">
<h1>DEMO1</h1>
<div id="demo1" class="hd res">
<ul>
<li><a href=""><img src="images/1.jpg" this is the Focus title 1" data-info="this is the Focus info for 1" /></a></li>
<li><a href=""><img src="images/2.jpg" this is the Focus title 2" data-info="this is the Focus info for 2" /></a></li>
<li><a href=""><img src="images/3.jpg" this is the Focus title 3" data-info="this is the Focus info for 3" /></a></li>
<li><a href=""><img src="images/4.jpg" this is the Focus title 4" data-info="this is the Focus info for 4" /></a></li>
<li><a href=""><img src="images/5.jpg" this is the Focus title 5" data-info="this is the Focus info for 5" /></a></li>
</ul>
</div>
</div>
JS调用
$(function(){
$("#demo1").banner({
index : 0,
tarrget : 'click',
speed : 10000,
showway : 'dowm'
});
})
JS代码
(function($){
$.fn.banner = function(J){
$.extend({
index : 0,
tarrget : 'click',
speed : 10000,
showway : 'dowm'
},J)
var index = J.index,
tarrget = J.tarrget,
speed = J.speed,
showway = J.showway;
var obj = $(this);
obj.children('ul').addClass('FocusPic')
var ul = obj.children('.FocusPic');
var li = ul.children('li');
var lisize = li.size();
li.each(function(){
var T = $(this);
var I = T.index();
var img = T.find('img');
var title = img.prop('alt');
var info = img.data('info');
T.append('<p>' + info + '</p><b>' + title + '</b>');
if (I != index){
T.hide();
}
})
obj.append('<div class="FocusLeft"></div><div class="FocusRight"></div><ul class="FocusNum"></ul>');
var num = obj.children('ul.FocusNum');
for(var i = 1;i<=lisize;i++){
num.append('<li>' + i + '</li>');
}
var numli = num.children('li');
numli.each(function(){
var T = $(this);
var I = T.index();
if(I == index){
T.addClass("on");
}
T.on(tarrget,function(){
T.addClass('on').siblings('li').removeClass('on');
imgway(I)
})
})
var left = obj.children('.FocusLeft');
var right = obj.children('.FocusRight');
left.click(function(){
goLeft();
})
right.click(function(){
goRight();
})
function goLeft(){
var I = num.children('li.on').index() - 1;
if (I == -1){
var I = lisize - 1;
}
numon(I);
imgway(I)
}
function goRight(){
var I = num.children('li.on').index() + 1;
if(I == lisize){
var I = 0;
}
numon(I);
imgway(I)
}
function numon(I){
numli.eq(I).addClass('on').siblings().removeClass('on')
}
function imgway(I){
switch(showway){
case 'dowm' :
li.stop().eq(I).slideDown(500).siblings().slideUp(500);
break;
default :
li.eq(I).fadeIn(200).siblings().hide()
}
}
function timer(){
return setInterval(function(){
goRight();
},speed)
}
var atimer = timer();
obj.hover(function(){
clearInterval(atimer)
},function(){
var atimer = timer();
})
}
})(jQuery)
转自FungLeo's Blog
<h1>DEMO1</h1>
<div id="demo1" class="hd res">
<ul>
<li><a href=""><img src="images/1.jpg" this is the Focus title 1" data-info="this is the Focus info for 1" /></a></li>
<li><a href=""><img src="images/2.jpg" this is the Focus title 2" data-info="this is the Focus info for 2" /></a></li>
<li><a href=""><img src="images/3.jpg" this is the Focus title 3" data-info="this is the Focus info for 3" /></a></li>
<li><a href=""><img src="images/4.jpg" this is the Focus title 4" data-info="this is the Focus info for 4" /></a></li>
<li><a href=""><img src="images/5.jpg" this is the Focus title 5" data-info="this is the Focus info for 5" /></a></li>
</ul>
</div>
</div>
JS调用
$(function(){
$("#demo1").banner({
index : 0,
tarrget : 'click',
speed : 10000,
showway : 'dowm'
});
})
JS代码
(function($){
$.fn.banner = function(J){
$.extend({
index : 0,
tarrget : 'click',
speed : 10000,
showway : 'dowm'
},J)
var index = J.index,
tarrget = J.tarrget,
speed = J.speed,
showway = J.showway;
var obj = $(this);
obj.children('ul').addClass('FocusPic')
var ul = obj.children('.FocusPic');
var li = ul.children('li');
var lisize = li.size();
li.each(function(){
var T = $(this);
var I = T.index();
var img = T.find('img');
var title = img.prop('alt');
var info = img.data('info');
T.append('<p>' + info + '</p><b>' + title + '</b>');
if (I != index){
T.hide();
}
})
obj.append('<div class="FocusLeft"></div><div class="FocusRight"></div><ul class="FocusNum"></ul>');
var num = obj.children('ul.FocusNum');
for(var i = 1;i<=lisize;i++){
num.append('<li>' + i + '</li>');
}
var numli = num.children('li');
numli.each(function(){
var T = $(this);
var I = T.index();
if(I == index){
T.addClass("on");
}
T.on(tarrget,function(){
T.addClass('on').siblings('li').removeClass('on');
imgway(I)
})
})
var left = obj.children('.FocusLeft');
var right = obj.children('.FocusRight');
left.click(function(){
goLeft();
})
right.click(function(){
goRight();
})
function goLeft(){
var I = num.children('li.on').index() - 1;
if (I == -1){
var I = lisize - 1;
}
numon(I);
imgway(I)
}
function goRight(){
var I = num.children('li.on').index() + 1;
if(I == lisize){
var I = 0;
}
numon(I);
imgway(I)
}
function numon(I){
numli.eq(I).addClass('on').siblings().removeClass('on')
}
function imgway(I){
switch(showway){
case 'dowm' :
li.stop().eq(I).slideDown(500).siblings().slideUp(500);
break;
default :
li.eq(I).fadeIn(200).siblings().hide()
}
}
function timer(){
return setInterval(function(){
goRight();
},speed)
}
var atimer = timer();
obj.hover(function(){
clearInterval(atimer)
},function(){
var atimer = timer();
})
}
})(jQuery)
转自FungLeo's Blog
相关文章推荐
- 二分查找递归非递归算法对比
- OSPF多区域配置和划分特殊与普通(华为)
- 按两次返回键退出
- STC双串口使用
- *BZOJ3514: Codechef MARCH14 GERALD07加强版
- linux下用户权限相关权限
- 蓝桥杯 - 找素数
- Shader 三种方法实现玻璃效果
- tab选项卡插件
- Python基础-列表生成式
- 数据结构 简单栈 java
- 改进版直接插入排序
- Linux 管理服务启动工具
- (十一)使用Jconsole监控线程
- [转] HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)
- C++ 恺撒密码(cin和getline连用出现问题)
- UVA10104 Euclid Problem【扩展欧几里得算法】
- 读《高效程序员的45个习惯:敏捷开发修炼之道》的读书笔记(一)
- Redux源码解读--(5)createStore
- 113. Path Sum II