面板支持单个，多个元素的jQuery图片轮播插件
一、先附上demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>contenteditable</title>
<style> </style>
<link href="http://a.tbcdn.cn/apps/tbtx/miiee/css/base.css" rel="stylesheet">
<link href="switchable.css" rel="stylesheet">
<style>
/*1002*380图片切换*/
.w1002-img-switch {
position: relative;
width: 1002px;
height: 380px;
overflow: hidden;
margin: 50px auto;
}
.w1002-img-switch .switch-content {
width: 100%;
height: 100%;
}
.w1002-img-switch .switch-content a {
float: left;
display: inline;
width: 1002px;
height: 100%;
}
.w1002-img-switch .switch-prev-btn,
.w1002-img-switch .switch-next-btn {
position: absolute;
top: 160px;
width: 61px;
height: 61px;
cursor: pointer;
opacity: .3;
filter: alpha(opacity=50);
background-image: url(http://img01.taobaocdn.com/tps/i1/T1jGOxXqthXXahT_rS-300-150.png);
background-repeat: no-repeat;
}
.w1002-img-switch .switch-prev-btn {
left: 0;
background-position: -120px 0;
}
.w1002-img-switch .switch-next-btn {
right: 0;
background-position: -185px 0;
}
.w1002-img-switch .switch-prev-btn:hover {
transition: opacity .12s linear;
opacity: 1;
filter: alpha(opacity=100);
background-position: -120px -70px;
}
.w1002-img-switch .switch-next-btn:hover {
transition: opacity .12s linear;
opacity: 1;
filter: alpha(opacity=100);
background-position: -185px -70px;
}
</style>
<link href="http://a.tbcdn.cn/apps/tbtx/miiee/css/home.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head> <body> <div class="miiee-content">
<div id="first-block">
<div id="first-block-switch" class="switch-img">
<div class="switch-content-wrap">
<ul class="switch-content clearfix"> <li>
<a href="http://miiee.taobao.com/themes/theme_133.htm" target="_blank">
<img src="http://gtms01.alicdn.com/tps/i1/T18ITBFmXfXXXKa4be-670-490.jpg" alt="型男奶爸正当红" title="型男奶爸正当红">
</a>
</li> <li>
<a href="http://detail.tmall.com/item.htm?id=35257025329" target="_blank">
<img src="http://gtms04.alicdn.com/tps/i4/T1qtrGFcpbXXXKa4be-670-490.jpg" alt="都赢男装旗舰店" title="都赢男装旗舰店">
</a>
</li> <li>
<a href="http://miiee.taobao.com/themes/theme_130.htm" target="_blank">
<img src="http://gtms01.alicdn.com/tps/i1/T1Od6EFcBaXXXKa4be-670-490.jpg" alt="蜜桃爱语" title="蜜桃爱语">
</a>
</li> <li>
<a href="http://www.taobao.com/go/app/tbtx/tashuo.php" target="_blank">
<img src="http://gtms01.alicdn.com/tps/i1/T1BvPDFnBcXXXKa4be-670-490.jpg" alt="明星" title="明星">
</a>
</li> <li>
<a href="http://miiee.taobao.com/themes/theme_131.htm" target="_blank">
<img src="http://gtms01.alicdn.com/tps/i1/T1mR6EFhBbXXXKa4be-670-490.jpg" alt="音乐节穿点不一样的" title="音乐节穿点不一样的">
</a>
</li> <li>
<a href="http://jiuxian.tmall.com/" target="_blank">
<img src="http://gtms03.alicdn.com/tps/i3/T11DLvFedfXXXKa4be-670-490.jpg" alt="酒仙" title="酒仙">
</a>
</li> <li>
<a href="http://miiee.taobao.com/bargain.htm" target="_blank">
<img src="http://gtms04.alicdn.com/tps/i4/T1tpmVFataXXXKa4be-670-490.jpg" alt="砍你妹" title="砍你妹">
</a>
</li> <li>
<a href="http://nvren.taobao.com/" target="_blank">
<img src="http://gtms01.alicdn.com/tps/i1/T1ipfHFlpaXXcmcNbe-670-490.png" alt="拍卖" title="淘宝女人">
</a>
</li> </ul>
</div>
<div class="switch-nav">
<span class="ks-active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
</div>
</div> <div class="w1002-img-switch">
<div class="clearfix switch-content">
<a href="" target="_blank">
<img width="1002" height="380" src="http://img.la/green/gif/1002x380">
</a>
<a href="" target="_blank">
<img width="1002" height="380" src="http://img.la/01531e/gif/1002x380">
</a>
<a href="" target="_blank">
<img width="1002" height="380" src="http://img.la/af8003/gif/1002x380">
</a>
<a href="" target="_blank">
<img width="1002" height="380" src="http://img.la/green/gif/1002x380">
</a>
<a href="" target="_blank">
<img width="1002" height="380" src="http://img.la/01531e/gif/1002x380">
</a>
<a href="" target="_blank">
<img width="1002" height="380" src="http://img.la/af8003/gif/1002x380">
</a>
</div>
<div class="switch-trigger" style="position: absolute; right: 0; bottom: 15px;">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a class="switch-prev-btn" href="javascript:void(0);"></a>
<a class="switch-next-btn" href="javascript:void(0);"></a>
</div> <div id="switchable-wrap">
<div class="switchable-content-wrap">
<div class="clearfix switchable-content">
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1okV1FmdbXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1EWd1FnJbXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1WQR0FjBcXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1dvF0FmVeXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1JRN2FdJXXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1S6F2FXhcXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T179FZFkFeXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1s5VYFetgXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1UyF0FjJfXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1PXB3FltXXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1tvV0FgdeXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1nZJ3FcRXXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T13stZFnJfXXb1upjX.jpg">
</div>
<div>
<img width="180" height="180" src="http://img01.taobaocdn.com/bao/uploaded/i1/T11q43FepaXXb1upjX.jpg">
</div>
</div>
</div>
<div class="prev-btn"></div>
<div class="next-btn"></div>
</div>
<script>
/*
* jQuery.switchable(config) 图片轮播插件
* @param: {Object} 配置参数对象
* @author: 博客园华子yjh
*/
jQuery.extend({
/*
图片轮播 yjh update 2013/11/25
config = {
wrapSelector: 外围选择器,
contentSelector: 内容选择器,
prevBtnSelector: 触发器(上一个),
nextBtnSelector: 触发器(下一个),
triggerSelector: '.switch-trigger', 触发器
autoPlay: true, 自动轮播
delay: 3000 延迟时间,
interval: 3000 间隔时间,
duration: 400 动画时间
}
*/
switchable: function(config) {
var timeoutId,
$wrap = $( config.wrapSelector ),
$content = $wrap.find( config.contentSelector ),
$contentParent = $content.parent().css({ position: 'relative' }),
$panels = $content.children(), len = $panels.length, // 单个面板盒子宽度
singlePanelBoxWidth = $panels.eq(0).outerWidth(true), // 视口宽度
viewportWidth = $contentParent.width(), // 视口中的面板个数
viewportPanelCount = Math.ceil(viewportWidth/singlePanelBoxWidth), // 视口中所有面板盒子宽度的总和
// 即: 动画过度的像素
viewSize = /*config.viewSize || */singlePanelBoxWidth*viewportPanelCount, // 所有面板占用的视口个数
viewportCount = Math.ceil(len/viewportPanelCount), // 所有面板占用的视口个数 * viewSize
totalViewSize = viewportCount*viewSize; if ( len <= viewportPanelCount ) {
$( config.prevBtnSelector ).remove();
$( config.nextBtnSelector ).remove();
return;
} $content.css({ width: totalViewSize + 'px', position: 'absolute' }); var leftVal, startState = true, endState = false;
function dynamicUpdate() {
leftVal = Math.abs( parseInt($content.css('left'), 10) ) || 0; if ( leftVal < viewSize ) {
startState = true;
endState = false;
}
else if ( (leftVal + viewSize) >= totalViewSize ) {
endState = true;
startState = false;
}
else {
startState = false;
endState = false;
}
} // 激活触发器的状态
function activateTrigger(arg) {
var leftVal = arg;
var idx = Math.ceil(leftVal/viewSize);
if ( idx < 0 ) {
idx = idx*(-1); // 需将负数转为正数
}
if ( idx >= viewportCount ) {
idx = 0;
}
$triggers.eq(idx).addClass('trigger-active ks-active').siblings().removeClass('trigger-active ks-active');
} function nextEvent() {
var tempVal;
if ( $content.filter(':animated').length === 0 ) {
dynamicUpdate();
tempVal = leftVal + viewSize; if ( !endState ) {
$content.animate({ left: -tempVal + 'px'}, config.duration || 400, 'swing', function(){
if ( config.triggerSelector ) {
activateTrigger(tempVal);
}
});
}
else {
var $outPanels = $panels.filter(function(idx){ return idx < len-viewportPanelCount });
$outPanels.css({ position: 'relative', left: tempVal + 'px' });
$content.animate({ left: -tempVal + 'px'}, config.duration || 400, 'swing', function(){
$outPanels.removeAttr('style');
$content.css({ left: 0 }); if ( config.triggerSelector ) {
activateTrigger(tempVal);
}
});
}
}
} function prevEvent() {
var tempVal;
if ( $content.filter(':animated').length === 0 ) {
dynamicUpdate();
tempVal = -leftVal + viewSize;
if ( !startState ) {
$content.animate({ left: tempVal + 'px'}, config.duration || 400, 'swing', function(){
if ( config.triggerSelector ) {
activateTrigger(tempVal);
}
});
}
else {
tempVal = -totalViewSize + viewSize;
var $outPanels = $panels.filter(function(idx){ return idx >= viewportPanelCount });
$outPanels.css({ position: 'relative', left: -totalViewSize + 'px' });
$content.animate({ left: viewSize + 'px'}, config.duration || 400, 'swing', function(){
$outPanels.removeAttr('style');
$content.css({ left: tempVal + 'px' }); if ( config.triggerSelector ) {
activateTrigger(tempVal);
}
});
}
}
} function autoSwitch(){
clearTimeout(timeoutId); // fix two timeoutId execute
timeoutId = setTimeout(function callee(){
nextEvent();
timeoutId = setTimeout(callee, config.interval || 3000);
}, config.delay || 3000);
}
function wrapEventHandle(e){
if ( e.type === 'mouseenter' ) {
clearTimeout(timeoutId);
}
else if ( e.type === 'mouseleave' ) {
if ( config.autoPlay ) {
autoSwitch();
}
}
} if ( config.autoPlay || false ) {
autoSwitch(); // 自动轮播
$wrap.bind('mouseenter mouseleave', wrapEventHandle);
} $( config.nextBtnSelector ).bind('click', function(){
nextEvent();
});
$( config.prevBtnSelector ).bind('click', function(){
prevEvent();
}); // 处理触发器
if ( config.triggerSelector ) {
var $triggers = $(config.triggerSelector).children().addClass('switch-item-trigger');
$(document).delegate(config.wrapSelector + ' ' + '.switch-item-trigger', 'mouseenter click', triggerEventHandle);
}
function triggerEventHandle(e){
var idx = $triggers.index( $(e.target) ); if ( idx < viewportCount ) {
var tmpVal = viewSize*idx;
if ( $content.filter(':animated').length === 0 ) {
$content.animate({ left: '-' + tmpVal + 'px'}, config.duration || 400, 'swing');
if ( e.type === 'mouseenter' || e.type === 'click' ) {
$triggers.eq(idx).addClass('trigger-active ks-active').siblings().removeClass('trigger-active ks-active');
}
}
}
}
return jQuery;
}
}); $(function(){
$.switchable({
wrapSelector: '#first-block-switch',
contentSelector: '.switch-content',
prevBtnSelector: '.prev',
nextBtnSelector: '.next',
triggerSelector: '.switch-nav',
autoPlay: true,
duration: 300,
interval: 3000
})
.switchable({
wrapSelector: '.w1002-img-switch',
contentSelector: '.switch-content',
prevBtnSelector: '.switch-prev-btn',
nextBtnSelector: '.switch-next-btn',
autoPlay: true,
duration: 300,
interval: 4000,
triggerSelector: '.switch-trigger'
})
.switchable({
wrapSelector: '#switchable-wrap',
contentSelector: '.switchable-content',
prevBtnSelector: '.prev-btn',
nextBtnSelector: '.next-btn',
autoPlay: true,
duration: 300,
interval: 4000,
delay: 3000
});
});
</script>
</body>
</html>
二、实现思路
1、设置面板容器元素的left属性值，触发下一轮轮播，将left - viewSize(大于等于面板宽度)，当前为最后一轮时，将当前显示的面板子元素的兄弟元素设置相对定位，并设置相应的位置，支持下一轮轮播循环；触发上一轮轮播，将left + viewSize，当前为首轮时，同理将当前显示的面板子元素的兄弟元素设置相对定位，并设置相应的位置，支持下上一轮轮播循环；
2、如果当前面板显示的元素只有一个时，允许有触发器，监听mouseenter事件，并显示对应的面板子元素；
3、激活面板子元素所对应的当前触发器的状态，这一部分在动画完成后实现，当前触发器的className为固定trigger-active ks-active，当然也可以自行配置；
4、当鼠标移动在整个外围容器中时，将清除自动轮播的定时器，离开时重新执行定时器，支持自动轮播，自动轮播的延迟时间为可配置项delay，其他配置项interval为自动轮播
的间隔时间，duration为动画时间，autoplay默认为false。
三、源码
/**
* jQuery.switchable(config) 图片轮播插件
* @param: {Object} 配置参数对象
* @author: 博客园华子yjh
* update-time: 2013/12/12
*/
jQuery.extend({
/**
图片轮播
config = {
wrapSelector: 外围选择器,
contentSelector: 内容选择器,
prevBtnSelector: 触发器(上一个),
nextBtnSelector: 触发器(下一个),
triggerSelector: '.switch-trigger', 触发器
autoPlay: true, 自动轮播
delay: 3000 延迟时间,
interval: 3000 间隔时间,
duration: 400 动画时间,
handleImgLoad: 用于懒加载的事件处理函数
}
*/
switchable: function(config) {
var timeoutId,
$wrap = $( config.wrapSelector ),
$content = $wrap.find( config.contentSelector ),
$contentParent = $content.parent().css({ position: 'relative' }),
$panels = $content.children(), len = $panels.length, // 单个面板盒子宽度
singlePanelBoxWidth = $panels.eq(0).outerWidth(true), // 视口宽度
viewportWidth = $contentParent.width(), // 视口中的面板个数
viewportPanelCount = Math.ceil(viewportWidth/singlePanelBoxWidth), // 视口中所有面板盒子宽度的总和
// 即: 动画过度的像素
viewSize = /*config.viewSize || */singlePanelBoxWidth*viewportPanelCount, // 所有面板占用的视口个数
viewportCount = Math.ceil(len/viewportPanelCount), // 所有面板占用的视口个数 * viewSize
totalViewSize = viewportCount*viewSize; if ( len <= viewportPanelCount ) {
$( config.prevBtnSelector ).remove();
$( config.nextBtnSelector ).remove();
return;
} $content.css({ width: totalViewSize + 'px', position: 'absolute' }); var leftVal, startState = true, endState = false;
function dynamicUpdate() {
leftVal = Math.abs( parseInt($content.css('left'), 10) ) || 0; if ( leftVal < viewSize ) {
startState = true;
endState = false;
}
else if ( (leftVal + viewSize) >= totalViewSize ) {
endState = true;
startState = false;
}
else {
startState = false;
endState = false;
}
} // 预加载图片处理
function handleImgLoad(tempVal, e) {
if ( config.handleImgLoad ) {
if ( e && $(e.target).length > 0 && $(e.target).is(config.prevBtnSelector) ) {
var idx = Math.abs( Math.ceil(tempVal/singlePanelBoxWidth) );
if (startState) {
idx = len - 1;
}
}
else { // 默认为next
idx = Math.abs( Math.ceil(tempVal/singlePanelBoxWidth) );
if (endState) {
idx = 0;
}
}
config.handleImgLoad(idx);
}
} // 激活触发器的状态
function activateTrigger(arg) {
var leftVal = arg;
var idx = Math.ceil(leftVal/viewSize);
if ( idx < 0 ) {
idx = idx*(-1); // 需将负数转为正数
}
if ( idx >= viewportCount ) {
idx = 0;
}
$triggers.eq(idx).addClass('trigger-active ks-active').siblings().removeClass('trigger-active ks-active');
} function nextEvent(e) {
var event, tempVal, triggerCls;
if ( $content.filter(':animated').length === 0 ) {
dynamicUpdate();
tempVal = leftVal + viewSize;
handleImgLoad(tempVal, e); // 图片预加载 if ( !endState ) {
$content.animate({ left: -tempVal + 'px'}, config.duration || 400, 'swing', function(){
if ( config.triggerSelector ) {
activateTrigger(tempVal);
}
});
}
else {
var $outPanels = $panels.filter(function(idx){ return idx < len-viewportPanelCount });
$outPanels.css({ position: 'relative', left: tempVal + 'px' });
$content.animate({ left: -tempVal + 'px'}, config.duration || 400, 'swing', function(){
$outPanels.removeAttr('style');
$content.css({ left: 0 }); if ( config.triggerSelector ) {
activateTrigger(tempVal);
}
});
}
}
} function prevEvent(e) {
var tempVal;
if ( $content.filter(':animated').length === 0 ) {
dynamicUpdate();
tempVal = -leftVal + viewSize;
handleImgLoad(tempVal, e); // 图片预加载 if ( !startState ) {
$content.animate({ left: tempVal + 'px'}, config.duration || 400, 'swing', function(){
if ( config.triggerSelector ) {
activateTrigger(tempVal);
}
});
}
else {
tempVal = -totalViewSize + viewSize;
var $outPanels = $panels.filter(function(idx){ return idx >= viewportPanelCount });
$outPanels.css({ position: 'relative', left: -totalViewSize + 'px' });
$content.animate({ left: viewSize + 'px'}, config.duration || 400, 'swing', function(){
$outPanels.removeAttr('style');
$content.css({ left: tempVal + 'px' }); if ( config.triggerSelector ) {
activateTrigger(tempVal);
}
});
}
}
} function autoSwitch(){
clearTimeout(timeoutId); // fix two timeoutId execute
timeoutId = setTimeout(function callee(){
nextEvent();
timeoutId = setTimeout(callee, config.interval || 3000);
}, config.delay || 3000);
}
function wrapEventHandle(e){
if ( e.type === 'mouseenter' ) {
clearTimeout(timeoutId);
}
else if ( e.type === 'mouseleave' ) {
if ( config.autoPlay ) {
autoSwitch();
}
}
} if ( config.autoPlay || false ) {
autoSwitch(); // 自动轮播
$wrap.bind('mouseenter mouseleave', wrapEventHandle);
} $( config.nextBtnSelector ).bind('click', nextEvent);
$( config.prevBtnSelector ).bind('click', prevEvent); // 处理触发器
if ( config.triggerSelector ) {
var $triggers = $(config.triggerSelector).children().addClass('switch-item-trigger');
$(document).delegate(config.wrapSelector + ' ' + '.switch-item-trigger', 'mouseenter click', triggerEventHandle);
}
function triggerEventHandle(e){
var idx = $triggers.index( $(e.target) ); if ( idx < viewportCount ) {
var tempVal = viewSize*idx;
config.handleImgLoad(idx);
if ( $content.filter(':animated').length === 0 ) {
$content.animate({ left: '-' + tempVal + 'px'}, config.duration || 400, 'swing');
if ( e.type === 'mouseenter' || e.type === 'click' ) {
$triggers.eq(idx).addClass('trigger-active ks-active').siblings().removeClass('trigger-active ks-active');
}
}
}
}
return jQuery;
}
});
PS: 实现的过程操作均在动画完成之后执行的，就是用户必须在轮播完后，进行下一次的上下轮播，这也算是我的实现瓶劲，望高手多多指教
转载请注明出处博客园，华子yjh。
面板支持单个，多个元素的jQuery图片轮播插件的更多相关文章
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- jquery图片轮播插件slideBox
效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...
- jquery图片轮播-插件
更新内容: 1. 页面结构和css样式必定类似下边放置 2. 点击左右按钮,实现左右滑动. 3. 这一般用于多个图片轮播使用,简化并优化代码. 若因不同需求,均可自行将插件scrollimgplus. ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- jQuery.YesShow - 图片轮播插件（带图片放大功能）
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
随机推荐
- Unity Dotween官方案例学习
本文只涉及一些案例,具体查看 DoTween 官方文档. 一. Basics public class Basics : MonoBehaviour { public Transform redCub ...
- C与C++的编程风格区别
c和c++都是在实践中发展起来的语言.实用性极强.c是与UNIX/Linux的发展相辅相成的.而C++是B.S为了摆脱c与硬件以及底层过于紧密的苦恼,而开发的语言.C++可以说就是c语言的超集.任何c ...
- 『编程题全队』Alpha 阶段冲刺博客Day6
1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.添加JSON处理模块 2.添加了团队看板中的添加团队任务功能 3.添加了团队看板中的添加按钮 孙慧君: 1.个人任务框UI的设 ...
- js 判断是否选中
js的方法 window.onload = function(){ var oDiv = document.getElementById('div1'); alert(oDiv.checked) } ...
- k8s kubectl edit 方式修改 nodeport 的端口
0. 买了一本 每天五分钟玩转 k8s 还有 刚才转帖的blog 里面有一个 kubectl edit 的语法能够在线更改端口号 ,之前一直没弄明白. 刚才做了下实验.发现很好用 这里记录一下. 1. ...
- Android Manifest文件
Manifest文件内容 1.自定义权限(Permission) : <permission android:description="string resource" a ...
- OneZero第一次站立会议&Sprint Planning Meeting（2016.3.21）
会议时间:2016年3月21日 11:40~12:00 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:列举第一周工作内容,确定第一周工作分配.即挑选出一个Story作为本次迭代完成的目标. 会议内容 ...
- c#public、private、protected、internal、protected internal
public 公有访问.不受任何限制.private 私有访问.只限于本类成员访问,子类,实例都不能访问.protected 保护访问.只限于本类和子类访问,实例不能访问.internal 内部访问. ...
- Luogu2257 YY的GCD/BZOJ2818 Gcd加强版（莫比乌斯反演+线性筛）
一通套路之后得到 求出中间那个函数的前缀和的话就可以整除分块了. 暴力求的话复杂度其实很优秀了,大约在n~nlogn之间. 不过可以线性筛做到严格线性.考虑其最小质因子,如果是平方因子那么只有其有贡献 ...
- jquery 绑定文本即时查询功能
bindFilterFunc: function () { if ("\v" == "v") { // IE only ...