点击左侧对应选项,右侧框中切换对应的图文。点击上下箭头可滚动菜单。
<a href="javascript:void(0);" class="udbtn uPrev">上一个</a>
<div class="tabTagBox">
<ul class="tabTagList">
<li id="tag01" class="current">服装行业</li>
<li id="tag02">旅游行业</li>
<li id="tag03">房地产行业</li>
<li id="tag04">教育培训</li>
<li id="tag05">汽车用品</li>
<li id="tag06">电子产品</li>
<li id="tag07">律所行业</li>
<li id="tag08">管理咨询</li>
<li id="tag09">服装行业</li>
<li id="tag10">酒店行业</li>
</ul>
</div>
<a href="javascript:void(0);" class="udbtn dNext">下一个</a>
选项卡与延迟插件结合
$(function() {
$("img[original]").lazyload({placeholder: ""});
});
function lazyloadForPart(container) {
container.find('img').each(function() {
var original = $(this).attr("original");
if (original) {
$(this).attr('src', original).removeAttr('original');
}
});
}
$(function() {
var navBox = $('.tabTagBox'), navList = $('.tabTagList'), navs = navList.children('li'), upBtn = $('.uPrev'), downBtn = $('.dNext'), contentBoxs = $('.tabcon');
var opts = {
moveH: 58,
moveSpeed: 200,
curMoveH: 0,
curSumH: 0,
curNavIndex: 0
}
opts.curSumH = (opts.moveH * navs.size()) - navBox.height();
var navToContentBox = function() {
navs.removeClass('current');
contentBoxs.hide().eq(opts.curNavIndex).show();
}
var navMove = function() {
var _arg = arguments.length > 0 ? arguments[0] : '';
if (_arg === 'up') {
if (-opts.curSumH === opts.curMoveH) {
alert('温馨提示:其他行业敬请期待!');
return;
}
opts.curMoveH -= opts.moveH;
opts.curNavIndex += 1;
}
if (_arg === 'down') {
if (opts.curMoveH === 0) {
alert('温馨提示:其他行业敬请期待!');
return;
}
opts.curMoveH += opts.moveH;
opts.curNavIndex -= 1;
}
navToContentBox();
navs.eq(opts.curNavIndex).addClass('current');
navList.animate({top: opts.curMoveH + 'px'}, opts.moveSpeed);
lazyloadForPart(contentBoxs);
}
upBtn.click(function() {
navMove('down');
});
downBtn.click(function() {
navMove('up');
});
navs.click(function() {
opts.curNavIndex = $(this).index();
navToContentBox();
$(this).addClass('current');
lazyloadForPart(contentBoxs);
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791