点击左侧对应选项,右侧框中切换对应的图文。点击上下箭头可滚动菜单。
- <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);
- });
- });
友情提示:垃圾评论一律封号...