0%

bxSlider插件点击分页后会自动停止滚动,且没有API来控制它,所以需要自己写代码来让轮播继续滚动,代码:

 

$(document).ready(function(){
var slider = $('.slider').bxSlider({
mode: 'horizontal',
captions: true,
auto: true,
speed: 500,
controls: false,
pause: 3000,
autoHover:true,
onSliderLoad:function(){
$(".bx-pager-item a").click(function() {
var thumbIndex = $('.bx-pager-item a').index(this);
slider.goToSlide(thumbIndex);
slider.startAuto();
$('.bx-pager-item a').removeClass('active');
$(this).addClass('active');
return false;
});
}
});
})

如果需要左右键控制的话代码如下:


$(document).ready(function(){
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
captions: true,
auto: true,
speed: 500,
controls: true,
pause: 3000,
autoHover:true,
onSliderLoad:function(){
$(".bx-pager-item a").click(function() {
var thumbIndex = $('.bx-pager-item a').index(this);
slider.goToSlide(thumbIndex);
slider.startAuto();
$('.bx-pager-item a').removeClass('active');
$(this).addClass('active');
return false;
});
$(".bx-wrapper a.bx-next,.bx-wrapper a.bx-prev").click(function() {
var thumbIndex = $('.bx-pager-item a.active').parent().index();
slider.goToSlide(thumbIndex);
slider.startAuto();
$('.bx-pager-item a').removeClass('active');
$('.bx-pager-item').eq(thumbIndex).find('a').addClass('active');
return false;
});
}
});
})

<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>

<!–[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>


<!–[if lt IE 6]> IE6以下版本可识别 <![endif]–>
<!–[if gt IE 6]> IE6以上版本可识别 <![endif]–>




技术博客一般都会在文章里面插入示例代码,这里就介绍一款我正在使用的wordpress插件:WP-Syntax,安装之后只需简单的操作就可以插入代码了,而且支持代码高亮。

一、基础使用:

1.安装:后台-插件-安装新的插件-搜索“WP-Syntax”,点击安装;或到官方下载,上传至“wp-content/plugins/”内,然后开启。

2.使用:编辑文章时,选择HTML模式下,插入

<pre lang=’LANGUAGE’ line=’1′> This is code! </pre> (引号为半角)

其中lang=”内为高亮代码的种类,WP-Syntax支持几乎所有常用的代码,line内的数值是行数,可删可留。

wp-syntax 插件支持的 language 列表:


'actionscript' => array('as'),
'ada' => array('a', 'ada', 'adb', 'ads'),
'apache' => array('conf'),
'asm' => array('ash', 'asm', 'inc'),
'asp' => array('asp'),
'bash' => array('sh'),
'bf' => array('bf'),
'c' => array('c', 'h'),
'c_mac' => array('c', 'h'),
'caddcl' => array(),
'cadlisp' => array(),
'cdfg' => array('cdfg'),
'cobol' => array('cbl'),
'cpp' => array('cpp', 'hpp', 'C', 'H', 'CPP', 'HPP'),
'csharp' => array('cs'),
'css' => array('css'),
'd' => array('d'),
'delphi' => array('dpk', 'dpr', 'pp', 'pas'),
'diff' => array('diff', 'patch'),
'dos' => array('bat', 'cmd'),
'gettext' => array('po', 'pot'),
'gml' => array('gml'),
'gnuplot' => array('plt'),
'groovy' => array('groovy'),
'haskell' => array('hs'),
'html4strict' => array('html', 'htm'),
'ini' => array('ini', 'desktop'),
'java' => array('java'),
'javascript' => array('js'),
'klonec' => array('kl1'),
'klonecpp' => array('klx'),
'latex' => array('tex'),
'lisp' => array('lisp'),
'lua' => array('lua'),
'matlab' => array('m'),
'mpasm' => array(),
'mysql' => array('sql'),
'nsis' => array(),
'objc' => array(),
'oobas' => array(),
'oracle8' => array(),
'oracle10' => array(),
'pascal' => array('pas'),
'perl' => array('pl', 'pm'),
'php' => array('php', 'php5', 'phtml', 'phps'),
'povray' => array('pov'),
'providex' => array('pvc', 'pvx'),
'prolog' => array('pl'),
'python' => array('py'),
'qbasic' => array('bi'),
'reg' => array('reg'),
'ruby' => array('rb'),
'sas' => array('sas'),
'scala' => array('scala'),
'scheme' => array('scm'),
'scilab' => array('sci'),
'smalltalk' => array('st'),
'smarty' => array(),
'tcl' => array('tcl'),
'vb' => array('bas'),
'vbnet' => array(),
'visualfoxpro' => array(),
'whitespace' => array('ws'),
'xml' => array('xml', 'svg'),
'z80' => array('z80', 'asm', 'inc')

1:使用背景图

就是两个DIV外面套一个DIV,然后repeat-y一个背景图,这种方法不是真的等高,只是只要有一个内容增多,背景图就会纵向重复,形成左右等高的效果。

2:使用表格

用table,两个TD,一侧内容增加另一侧会自动拉长

3:使用CSS控制(个人感觉最好的方法)

两个DIV都设


div{margin-bottom:-10000px; padding-bottom:10000px;}

此时两个div的父级要设overflow:hidden;

注意此种写法在页面内容中有锚点的时候会有Bug,如果页面中有锚点的话建议用第一种方法

4:使用JS控制

取一个DIV的高度,然后if一个DIV1的高度大于DIV2,然后DIV1.offsetHeight=DIV2.offsetHeight在else{DIV1.offsetHeight=DIV2.offsetHeight}