首页 > 其他 > 详细

带标题 有小圆点计数 左右翻页的焦点图 不同的效果

时间：2014-11-03 02:13:30      阅读：359      评论：0      收藏：0      [点我收藏+]

带标题 有小圆点计数 左右翻页的焦点图 不同的效果

?
bubuko.com,布布扣
演示

?

XML/HTML Code
  1. <section>??
  2. ????<div?class="title">??
  3. ??????<!--<h3>??default</h3>-->??
  4. ??????<label>Effect:</label>??
  5. ??????<select?id="effects-select">??
  6. ????????<option?value="default">default</option>??
  7. ????????<option?value="simple">simple</option>??
  8. ????????<option?value="left">left</option>??
  9. ????????<option?value="up">up</option>??
  10. ????????<option?value="leftright">leftright</option>??
  11. ????????<option?value="updown">updown</option>??
  12. ????????<option?value="switchlr">switchlr</option>??
  13. ????????<option?value="switchud">switchud</option>??
  14. ????????<option?value="fliplr">fliplr</option>??
  15. ????????<option?value="flipud">flipud</option>??
  16. ????????<option?value="reduce">reduce</option>??
  17. ????????<option?value="360">360</option>??
  18. ??????</select>??
  19. ??????<div?class="code">??
  20. ????????<code>x:?6</code>??
  21. ????????<code>y:?4</code>??
  22. ????????<code>random:?true</code>??
  23. ??????</div>??
  24. ??????<button?type="button"?class="start?action">Play</button>??
  25. ??????<button?type="button"?class="stop?action">Stop</button>??
  26. ????</div>??
  27. ????<div?class="slider-wrap">??
  28. ??????<div?class="slider">??
  29. ????????<p><strong>Pig?ham:</strong>?hock?pork?loin?brisket?pastrami?frankfurter?andouille.</p>??
  30. ????????<img?src="img/img01.jpg"/><p><strong>Sausage:</strong>?ground?round?sirloin?ball?tip?beef?ribs.</p>??
  31. ????????<img?src="img/img02.jpg"/><p><strong>Pig?ham:</strong>?hock?pork?loin?brisket?pastrami?frankfurter?andouille.</p>??
  32. ????????<img?src="img/img03.jpg"/><p><strong>Pork?turkey:</strong>?shoulder,?filet?mignon?chuck?t-bone?bacon.</p>??
  33. ??????</div>??
  34. ????</div>??
  35. ????</section>??
  36. ??
  37. ????<script>??
  38. ??
  39. ??????var?$slider?=?$(‘.slider-wrap‘);??
  40. ??????var?html?=?$slider.html();??
  41. ??
  42. ??????//?Options??
  43. ??
  44. ??????var?defaults?=?{??
  45. ????????thumbSize:?20,??
  46. ????????onSlideshowEnd:?function(){?$(‘.stop,?.start‘).toggle()?}??
  47. ??????};??
  48. ??
  49. ??????var?effects?=?{??
  50. ????????‘default‘:?{?x:6,?y:4,?random:?true?},??
  51. ????????simple:?{?x:6,?y:4,?effect:?‘simple‘,?random:?true?},??
  52. ????????left:?{?x:1,?y:8,?effect:?‘left‘?},??
  53. ????????up:?{?x:20,?y:1,?effect:?‘up‘,?rewind:?60,?backReverse:?true?},??
  54. ????????leftright:?{?x:1,?y:8,?effect:?‘leftright‘?},??
  55. ????????updown:?{?x:20,?y:1,?effect:?‘updown‘,?cssSpeed:?500,?backReverse:?true?},??
  56. ????????switchlr:?{?x:20,?y:1,?effect:?‘switchlr‘,?backReverse:?true?},??
  57. ????????switchud:?{?x:1,?y:8,?effect:?‘switchud‘?},??
  58. ????????fliplr:?{?x:20,?y:1,?effect:?‘fliplr‘,?backReverse:?true?},??
  59. ????????flipud:?{?x:20,?y:3,?effect:?‘flipud‘,?reverse:?true,?rewind:?75?},??
  60. ????????reduce:?{?x:6,?y:4,?effect:?‘reduce‘?},??
  61. ????????360:?{?x:1,?y:1,?effect:?‘360‘,?fade:?true,?cssSpeed:?600?}??
  62. ??????};??
  63. ??
  64. ??????$(‘#effects-select‘).change(function()?{??
  65. ????????var?effect?=?$(this).val();??
  66. ????????$slider.fadeTo(?0,0?).html(?html?);??
  67. ????????$(‘.stop‘).hide();??
  68. ????????$(‘.start‘).show();??
  69. ????????setTimeout(function()?{??
  70. ??????????$(‘.slider‘).tilesSlider(?$.extend(?{},?defaults,?effects[?effect?]?)?);??
  71. ??????????$slider.fadeTo(?0,1?);??
  72. ??????????$(‘body‘).removeClass(‘tiles-preload‘);??
  73. ????????},?100?);??
  74. ????????$(‘.code‘).empty().html(function()?{??
  75. ??????????var?e?=?effects[?effect?],?c?=?[];??
  76. ??????????for?(?var?i?in?e?)?{??
  77. ????????????if?(?i?!==?‘effect‘?)?{??
  78. ??????????????c.push(‘<code>‘+?i?+‘:?‘+?e[i]?+‘</code>‘);??
  79. ????????????}??
  80. ??????????}??
  81. ??????????return?c.join(‘‘);??
  82. ????????});??
  83. ??????});??
  84. ??
  85. ??????$(‘.start‘).click(function()?{??
  86. ????????$(this).hide();??
  87. ????????$(‘.stop‘).show();??
  88. ????????$(‘.slider‘).tilesSlider(‘start‘)??
  89. ??????});??
  90. ??
  91. ??????$(‘.stop‘).click(function()?{??
  92. ????????$(this).hide();??
  93. ????????$(‘.start‘).show()??
  94. ????????$(‘.slider‘).tilesSlider(‘stop‘)??
  95. ??????});??
  96. ??
  97. ??????$(‘.slider‘).tilesSlider(?$.extend(?{},?defaults,?effects[‘default‘]?)?);??
  98. ??
  99. ????</script>??

?


原文地址:http://www.freejs.net/article_jiaodiantu_307.html

带标题 有小圆点计数 左右翻页的焦点图 不同的效果

原文：http://freejs.iteye.com/blog/2151506
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！