jquery 选项卡标签带按钮控制滚动切换

点击左侧对应选项,右侧框中切换对应的图文。点击上下箭头可滚动菜单。

  立即下载
  1. <a href="javascript:void(0);" class="udbtn uPrev">上一个</a>
  2. <div class="tabTagBox">
  3. <ul class="tabTagList">
  4. <li id="tag01" class="current">服装行业</li>
  5. <li id="tag02">旅游行业</li>
  6. <li id="tag03">房地产行业</li>
  7. <li id="tag04">教育培训</li>
  8. <li id="tag05">汽车用品</li>
  9. <li id="tag06">电子产品</li>
  10. <li id="tag07">律所行业</li>
  11. <li id="tag08">管理咨询</li>
  12. <li id="tag09">服装行业</li>
  13. <li id="tag10">酒店行业</li>
  14. </ul>
  15. </div>
  16. <a href="javascript:void(0);" class="udbtn dNext">下一个</a>

选项卡与延迟插件结合


  1. $(function() {
  2. $("img[original]").lazyload({placeholder: ""});
  3. });
  4. function lazyloadForPart(container) {
  5. container.find('img').each(function() {
  6. var original = $(this).attr("original");
  7. if (original) {
  8. $(this).attr('src', original).removeAttr('original');
  9. }
  10. });
  11. }
  12. $(function() {
  13. var navBox = $('.tabTagBox'), navList = $('.tabTagList'), navs = navList.children('li'), upBtn = $('.uPrev'), downBtn = $('.dNext'), contentBoxs = $('.tabcon');
  14. var opts = {
  15. moveH: 58,
  16. moveSpeed: 200,
  17. curMoveH: 0,
  18. curSumH: 0,
  19. curNavIndex: 0
  20. }
  21. opts.curSumH = (opts.moveH * navs.size()) - navBox.height();
  22. var navToContentBox = function() {
  23. navs.removeClass('current');
  24. contentBoxs.hide().eq(opts.curNavIndex).show();
  25. }
  26. var navMove = function() {
  27. var _arg = arguments.length > 0 ? arguments[0] : '';
  28. if (_arg === 'up') {
  29. if (-opts.curSumH === opts.curMoveH) {
  30. alert('温馨提示:其他行业敬请期待!');
  31. return;
  32. }
  33. opts.curMoveH -= opts.moveH;
  34. opts.curNavIndex += 1;
  35. }
  36. if (_arg === 'down') {
  37. if (opts.curMoveH === 0) {
  38. alert('温馨提示:其他行业敬请期待!');
  39. return;
  40. }
  41. opts.curMoveH += opts.moveH;
  42. opts.curNavIndex -= 1;
  43. }
  44. navToContentBox();
  45. navs.eq(opts.curNavIndex).addClass('current');
  46. navList.animate({top: opts.curMoveH + 'px'}, opts.moveSpeed);
  47. lazyloadForPart(contentBoxs);
  48. }
  49. upBtn.click(function() {
  50. navMove('down');
  51. });
  52. downBtn.click(function() {
  53. navMove('up');
  54. });
  55. navs.click(function() {
  56. opts.curNavIndex = $(this).index();
  57. navToContentBox();
  58. $(this).addClass('current');
  59. lazyloadForPart(contentBoxs);
  60. });
  61. });

相关评论(0)
您是不是忘了说点什么?

友情提示:垃圾评论一律封号...

还没有评论,快来抢沙发吧!