ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > 应用开发 > Java > 简单的切换代码 附控制多个切换方法

简单的切换代码 附控制多个切换方法

原创 Java 作者：aubreyl 时间：2016-03-09 09:44:52 0 删除 编辑

　　现在做网站，难免会用到切换，让有限的空间展示更多的内容，甚至有时候一个页面还不止一个切换版块。那么，这个时候要如何让代码简洁、简单呢?

　　最近在网上找到一个方法，感觉还可以。程序代码比较简单，而且可以单独写CSS样式来实现多样化!以下是我改好之后的一个案例，分享出来供大家或者今后遗忘掉这个方法的自己来参考!

　　首先，调用jquery，最好去网上下载最新版本:

<script type="text/javascript" src="/js/jquery-1.11.0.js">
<script type="text/javascript" src="/js/SuperSlide.js">

然后是css样式：

  1. *{margin:0;padding:0;}
  2. img{border:0;}
  3. ul,li,form{list-style:none;}
  4. a:link{text-decoration:none;}
  5. /***********第一个切换的样式***************/
  6. .idx4{width:100%;overflow:hidden;background:url(http://www.39gd.com/img2015/idx4_bg.jpg) center 0 repeat-y;height:641px;}
  7. .slide{width:1000px;margin:0 auto;height:641px;overflow:hidden;}
  8. .slide .bh{float:left;width:158px;}
  9. .slide .bh li{width:145px;float:left;background:#1390b6;height:213px;margin-bottom:1px;position:relative;}
  10. .slide .bh li img{width:94px;height:109px;float:left;padding:52px 25px;}
  11. .slide .bh li img.idx4_on{width:13px;height:22px;position:absolute;right:-14px;top:95px;padding:0;display:none;}
  12. .slide .bh li.on img.idx4_on{display:block;}
  13. .slide .bd{float:right;width:828px;height:641px;}
  14. .slide .bd img{float:left;}
  15. .slide .bd a:hover{opacity:0.9;filter:alpha(opacity=90);}
  16. /***********第二个切换的样式***************/
  17. .art{width:1000px;margin:0 auto;overflow:hidden;}
  18. .slide2{width:1000px;background:#ebebeb;overflow:hidden;height:240px;float:left;padding:6px;}
  19. .art .bh{width:100px;float:left;}
  20. .art .bh li{width:100px;height:25px;padding-left:10px;margin-top:8px;font:14px/22px "SimSun";float:left;border-bottom:1px dashed #e5e5e5;}
  21. .art .bh li a{color:#202020;}
  22. .art .bh li.on{background:#fff;}
  23. .art .bd{width:884px;height:240px;float:left;background:#fff;}
  24. .art .bd div{width:884px;height:240px;}
  25. .art .bd ul{width:380px;height:198px;padding:16px;overflow:hidden;float:left;margin:0 10px;}
  26. .art .bd li{font:14px/26px "SimSun";height:26px;margin-top:6px;border-bottom:1px dotted #b2b2b2;color:#727171;}
  27. .art .bd li a{color:#202020;}

　　HTML代码：

  1. <div class="idx4">
  2. <div class="slide">
  3. <ul class="bh">
  4. <li><img alt="99天快速治疗不孕不育" src="http://www.39gd.com/img2015/idx4_bh1.jpg" /><img alt="相关技术" class="idx4_on" src="http://www.39gd.com/img2015/idx4_on.jpg" /></li>
  5. <li><img alt="赶走妇科疾病,从此萌萌哒" src="http://www.39gd.com/img2015/idx4_bh2.jpg" /><img alt="相关技术" class="idx4_on" src="http://www.39gd.com/img2015/idx4_on.jpg" /></li>
  6. <li><img alt="安心产检,放心分娩" src="http://www.39gd.com/img2015/idx4_bh3.jpg" /><img alt="相关技术" class="idx4_on" src="http://www.39gd.com/img2015/idx4_on.jpg" /></li></ul>
  7. <ul class="bd">
  8. <li>
  9. <a href="http://www.39gd.com/yy/tsjs/13000.html"><img alt="智能型生育镜" src="http://www.39gd.com/img2015/idx4_bd1_01.jpg" /></a>
  10. <a href="http://www.39gd.com/yy/tsjs/13001.html"><img alt="无痛输卵管造影" src="http://www.39gd.com/img2015/idx4_bd1_02.jpg" /></a>
  11. <a href="http://www.39gd.com/yy/tsjs/13002.html"><img alt="内分泌平衡四维疗法" src="http://www.39gd.com/img2015/idx4_bd1_03.jpg" /></a>
  12. <a href="http://www.39gd.com/yy/tsjs/13003.html"><img alt="中西医平衡辩证理疗法" src="http://www.39gd.com/img2015/idx4_bd1_04.jpg" /></a>
  13. <a href="javascript:void(0)" onClick="openZoosUrl('chatwin','&r=39gd.com&p=39gd.com');LR_HideInvite();return false;" rel="nofollow" target="_blank"><img alt="十五项治不孕金牌技术" src="http://www.39gd.com/img2015/idx4_bd1_05.jpg" /></a>
  14. <a href="http://www.39gd.com/yy/tsjs/13004.html"><img alt="输卵管堵塞'全景式'探查术" src="http://www.39gd.com/img2015/idx4_bd1_06.jpg" /></a>
  15. <a href="http://www.39gd.com/yy/tsjs/13005.html"><img alt="孕前U+检查法" src="http://www.39gd.com/img2015/idx4_bd1_07.jpg" /></a>
  16. <a href="http://www.39gd.com/yy/zgjl/12267.html"><img alt="动脉栓塞介入疗法" src="http://www.39gd.com/img2015/idx4_bd1_08.jpg" /></a>
  17. <a href="http://www.39gd.com/yy/tsjs/13006.html"><img alt="治不育 针功夫" src="http://www.39gd.com/img2015/idx4_bd1_09.jpg" /></a></li>
  18. <li>
  19. <a href="http://www.39gd.com/yy/jc/13007.html"><img alt="营养修复因子导入疗法" src="http://www.39gd.com/img2015/idx4_bd2_01.jpg" /></a>
  20. <a href="http://www.39gd.com/yy/tslf/11678.html"><img alt="量子平衡疗法" src="http://www.39gd.com/img2015/idx4_bd2_02.jpg" /></a>
  21. <a href="/zt/myke/"><img alt="韩国美珂Myke呵乳" src="http://www.39gd.com/img2015/idx4_bd2_03.jpg" /></a>
  22. <a href="http://www.39gd.com/yy/alzx/12094.html"><img alt="CEO人流服务体系" src="http://www.39gd.com/img2015/idx4_bd2_04.jpg" /></a>
  23. <a href="javascript:void(0)" onClick="openZoosUrl('chatwin','&r=39gd.com&p=39gd.com');LR_HideInvite();return false;" rel="nofollow" target="_blank"><img alt="治女人病,选对技术很重要!" src="http://www.39gd.com/img2015/idx4_bd2_05.jpg" /></a>
  24. <a href="/zt/zswtrl/"><img alt="爱维丝直视人流手术" src="http://www.39gd.com/img2015/idx4_bd2_06.jpg" /></a>
  25. <a href="http://www.39gd.com/yy/SWEET/13008.html"><img alt="薇薇无痛人流技术" src="http://www.39gd.com/img2015/idx4_bd2_07.jpg" /></a>
  26. <a href="http://www.39gd.com/yy/SHE/13009.html"><img alt="SHE'S人流术" src="http://www.39gd.com/img2015/idx4_bd2_08.jpg" /></a>
  27. <a href="http://www.39gd.com/yy/qps/13010.html"><img alt="微创宫腔镜取胚术" src="http://www.39gd.com/img2015/idx4_bd2_09.jpg" /></a></li>
  28. <li>
  29. <a href="/zt/omswcz/"><img alt="欧美版四维彩超" src="http://www.39gd.com/img2015/idx4_bd3_01.jpg" /></a>
  30. <a href="http://www.39gd.com/yy/pfc/13011.html"><img alt="隐藏式'无痕'剖宫产" src="http://www.39gd.com/img2015/idx4_bd3_02.jpg" /></a>
  31. <a href="/zt/mscqs/"><img alt="美式'隐形'会阴侧切术" src="http://www.39gd.com/img2015/idx4_bd3_03.jpg" /></a>
  32. <a href="http://www.39gd.com/yy/ch/13012.html"><img alt="盆底康复治疗和卵巢保养项目计划" src="http://www.39gd.com/img2015/idx4_bd3_04.jpg" /></a>
  33. <a href="http://www.39gd.com/yy/cqjc/13013.html"><img alt="无创基因检测" src="http://www.39gd.com/img2015/idx4_bd3_05.jpg" /></a>
  34. <a href="javascript:void(0)" onClick="openZoosUrl('chatwin','&r=39gd.com&p=39gd.com');LR_HideInvite();return false;" rel="nofollow" target="_blank"><img alt="国际顶尖技术,消除从怀孕到分娩的顾虑" src="http://www.39gd.com/img2015/idx4_bd3_06.jpg" /></a></li></ul></div></div>
  35. <div class="art">
  36. <div class="slide2">
  37. <ul class="bh">
  38. <li><a href="http://www.39gd.com/yy/new/">医院新闻</a></li>
  39. <li><a href="http://www.39gd.com/yy/Yunyu/">不孕不育</a></li>
  40. <li><a href="http://www.39gd.com/yy/Chanke/">产科中心</a></li>
  41. <li><a href="http://www.39gd.com/yy/fkzx/">妇科中心</a></li>
  42. <li><a href="http://www.39gd.com/yy/Huaiyun/">无痛人流</a></li>
  43. <li><a href="http://www.39gd.com/yy/zhongliu/">妇科肿瘤</a></li>
  44. <li><a href="http://www.39gd.com/yy/Zhengxing/">妇科整形</a></li></ul>
  45. <div class="bd">
  46. <div><ul>
  47. <li><span>[2016-03.09]</span><a href="http://www.39gd.com/yy/new/13927.html">庆三八节，百医千号公益行</a></li>
  48. <li><span>[2016-01.14]</span><a href="http://www.39gd.com/yy/alzx/13606.html">2016抢生猴宝倒计时!</a></li>
  49. <li><span>[2016-01.09]</span><a href="http://www.39gd.com/yy/alzx/13585.html">她9岁时失去的，28岁的今天广州女子医院还给</a></li>
  50. <li><span>[2015-10.27]</span><a href="http://www.39gd.com/yy/alzx/13226.html">1443名孕妇同练瑜伽&nbsp;刷新吉尼斯世界纪录荣誉</a></li>
  51. <li><span>[2015-10.19]</span><a href="http://www.39gd.com/yy/alzx/13203.html">“生育力评估”公益活动，专家会诊，优惠检</a></li>
  52. <li><span>[2015-10.19]</span><a href="http://www.39gd.com/yy/alzx/13202.html">要备孕治不孕，先免费评估，再享检查优惠</a></li></ul>
  53. <ul>
  54. <li><span>[2015-09.09]</span><a href="http://www.39gd.com/yy/new/7936.html">广州做人流去哪家医院好</a></li>
  55. <li><span>[2009-10.24]</span><a href="http://www.39gd.com/yy/new/2381.html">“排阴毒”真能治所有妇科病？？</a></li>
  56. <li><span>[2009-10.24]</span><a href="http://www.39gd.com/yy/new/2383.html">微创技术治疗妇科肿瘤成主流</a></li>
  57. <li><span>[2009-10.24]</span><a href="http://www.39gd.com/yy/new/2382.html">农村妇女妇科重症高发</a></li>
  58. <li><span>[2009-11.27]</span><a href="http://www.39gd.com/yy/alzx/2721.html">22年雌雄难辨一朝手术变女人</a></li>
  59. <li><span>[2009-10.24]</span><a href="http://www.39gd.com/yy/new/2380.html">雷人广告：妇科广告爬上红绿灯枝头</a></li></ul></div>
  60. <div><ul>
  61. <li><span>[2016-03.04]</span><a href="http://www.39gd.com/yy/slg/13934.html">治疗输卵管性不孕需要注意什么</a></li>
  62. <li><span>[2016-02.26]</span><a href="http://www.39gd.com/yy/zgx/13859.html">子宫不规律出血原因</a></li>
  63. <li><span>[2016-02.26]</span><a href="http://www.39gd.com/yy/zgx/13858.html">治疗子宫内膜炎需要多少钱</a></li>
  64. <li><span>[2016-02.26]</span><a href="http://www.39gd.com/yy/zgx/13857.html">子宫内膜薄的症状</a></li>
  65. <li><span>[2016-02.26]</span><a href="http://www.39gd.com/yy/zgx/13856.html">子宫囊肿如何治疗</a></li>
  66. <li><span>[2016-02.26]</span><a href="http://www.39gd.com/yy/zgx/13855.html">子宫松弛怎么治疗</a></li></ul>
  67. <ul>
  68. <li><span>[2009-10.17]</span><a href="http://www.39gd.com/yy/anli/1631.html">进行人工授精后的注意事项</a></li>
  69. <li><span>[2009-10.27]</span><a href="http://www.39gd.com/yy/byzl/2412.html">什么时候做卵泡监测最好</a></li>
  70. <li><span>[2009-10.17]</span><a href="http://www.39gd.com/yy/anli/1633.html">人工授精可以选择生男生女吗</a></li>
  71. <li><span>[2009-10.27]</span><a href="http://www.39gd.com/yy/byzl/2411.html">监测卵泡有哪些作用</a></li>
  72. <li><span>[2009-10.17]</span><a href="http://www.39gd.com/yy/anli/1629.html">人工授精的机率有多少</a></li>
  73. <li><span>[2010-08.02]</span><a href="http://www.39gd.com/yy/anli/4423.html">广州有哪些医院可以做人工受精</a></li></ul></div>
  74. <div><ul>
  75. <li><span>[2016-02.13]</span><a href="http://www.39gd.com/yy/ch/13734.html">产后女性的饮食方面需要注意什么？</a></li>
  76. <li><span>[2016-01.30]</span><a href="http://www.39gd.com/yy/cwcz/13670.html">广州女子医院四维</a></li>
  77. <li><span>[2016-01.30]</span><a href="http://www.39gd.com/yy/cwcz/13667.html">广州女子医院四维预约</a></li>
  78. <li><span>[2016-01.30]</span><a href="http://www.39gd.com/yy/cwcz/13665.html">广州女子医院四维彩超怎么样</a></li>
  79. <li><span>[2016-01.28]</span><a href="http://www.39gd.com/yy/zb/13656.html">排卵期可以通过哪些方法来计算呢</a></li>
  80. <li><span>[2016-01.27]</span><a href="http://www.39gd.com/yy/xs/13652.html">护理新生儿需重视哪些方面的事项</a></li></ul>
  81. <ul>
  82. <li><span>[2015-09.09]</span><a href="http://www.39gd.com/yy/cwcz/10052.html">广州女子医院做四维彩超多少钱一次</a></li>
  83. <li><span>[2010-06.23]</span><a href="http://www.39gd.com/yy/hyzz/4269.html">性生活后几天可测出怀孕</a></li>
  84. <li><span>[2010-01.25]</span><a href="http://www.39gd.com/yy/zq/3157.html">孕妇第一次B超检查是什么时候</a></li>
  85. <li><span>[2011-01.30]</span><a href="http://www.39gd.com/yy/zq/5110.html">早孕反应从什么时候开始</a></li>
  86. <li><span>[2010-11.09]</span><a href="http://www.39gd.com/yy/zb/4901.html">冬季不适合怀孕，那个季节怀孕最好呢？</a></li>
  87. <li><span>[2010-01.15]</span><a href="http://www.39gd.com/yy/zq/3039.html">怀孕初期不能吃什么</a></li></ul></div>
  88. <div><ul>
  89. <li><span>[2016-03.07]</span><a href="http://www.39gd.com/yy/pqy/13939.html">盆腔炎会造成哪些危害</a></li>
  90. <li><span>[2016-02.29]</span><a href="http://www.39gd.com/yy/yuejing/13926.html">经血黑色是什么原因</a></li>
  91. <li><span>[2016-02.29]</span><a href="http://www.39gd.com/yy/rxai/13911.html">生活中要如何预防乳腺癌</a></li>
  92. <li><span>[2016-03.08]</span><a href="http://www.39gd.com/yy/gjfd/13941.html">为了预防宫颈肥大女性要做好什么?</a></li>
  93. <li><span>[2016-03.01]</span><a href="http://www.39gd.com/yy/fkzx/13928.html">做妇科检查需要注意哪些事情</a></li>
  94. <li><span>[2016-01.30]</span><a href="http://www.39gd.com/yy/nxjk/13674.html">广州女子医院生殖科</a></li></ul>
  95. <ul>
  96. <li><span>[2009-11.24]</span><a href="http://www.39gd.com/yy/wyy/2592.html">女性外阴部瘙痒是什么原因引起的</a></li>
  97. <li><span>[2010-03.05]</span><a href="http://www.39gd.com/yy/yjls/3538.html">月经量少吃什么食物</a></li>
  98. <li><span>[2010-04.03]</span><a href="http://www.39gd.com/yy/rxzs/3824.html">乳腺增生不可以吃什么</a></li>
  99. <li><span>[2010-02.22]</span><a href="http://www.39gd.com/yy/gjml/3437.html">宫颈糜烂的白带会有哪些异常症状</a></li>
  100. <li><span>[2016-03.01]</span><a href="http://www.39gd.com/yy/fkzx/13928.html">做妇科检查需要注意哪些事情</a></li>
  101. <li><span>[2010-09.16]</span><a href="http://www.39gd.com/yy/jkcs/4720.html">月经刚完是安全期吗</a></li></ul></div>
  102. <div><ul>
  103. <li><span>[2016-03.08]</span><a href="http://www.39gd.com/yy/gwy/13940.html">引起宫外孕的原因是什么</a></li>
  104. <li><span>[2016-03.04]</span><a href="http://www.39gd.com/yy/rgyc/13935.html">引产前重要的检查有哪些？</a></li>
  105. <li><span>[2016-02.27]</span><a href="http://www.39gd.com/yy/rljc/13882.html">安全期避孕可靠吗？有哪些事情要注意？</a></li>
  106. <li><span>[2016-02.22]</span><a href="http://www.39gd.com/yy/Huaiyun/13759.html">人流需要住院吗</a></li>
  107. <li><span>[2016-02.22]</span><a href="http://www.39gd.com/yy/Huaiyun/13758.html">做人流要做哪些检查</a></li>
  108. <li><span>[2016-02.22]</span><a href="http://www.39gd.com/yy/Huaiyun/13757.html">做人流痛吗</a></li></ul>
  109. <ul>
  110. <li><span>[2009-12.02]</span><a href="http://www.39gd.com/yy/byjy/2761.html">体外射精避孕方式安全吗</a></li>
  111. <li><span>[2010-06.10]</span><a href="http://www.39gd.com/yy/shtl/4222.html">人流后为什么不能同房</a></li>
  112. <li><span>[2010-10.22]</span><a href="http://www.39gd.com/yy/rlsj/4851.html">怀孕几周可以做人流</a></li>
  113. <li><span>[2010-04.06]</span><a href="http://www.39gd.com/yy/rljg/3838.html">无痛人流一般花多少钱</a></li>
  114. <li><span>[2009-10.16]</span><a href="http://www.39gd.com/yy/zyzc/1501.html">尿检弱阳性是怀孕吗</a></li>
  115. <li><span>[2010-09.02]</span><a href="http://www.39gd.com/yy/gwy/4643.html">宫外孕早期症状hcg是多少</a></li></ul></div>
  116. <div><ul>
  117. <li><span>[2016-02.29]</span><a href="http://www.39gd.com/yy/zgjl/13910.html">患良性子宫肌瘤会出现哪些症状?</a></li>
  118. <li><span>[2016-02.26]</span><a href="http://www.39gd.com/yy/lczl/13860.html">卵巢囊肿严重吗</a></li>
  119. <li><span>[2016-02.26]</span><a href="http://www.39gd.com/yy/zgjl/13850.html">微创子宫肌瘤多少钱</a></li>
  120. <li><span>[2016-02.25]</span><a href="http://www.39gd.com/yy/zgjl/13829.html">子宫肌瘤的治疗方法</a></li>
  121. <li><span>[2016-02.25]</span><a href="http://www.39gd.com/yy/zgjl/13828.html">子宫肌瘤需要手术吗</a></li>
  122. <li><span>[2016-02.25]</span><a href="http://www.39gd.com/yy/lczl/13826.html">卵巢囊肿微创手术多少钱</a></li></ul>
  123. <ul>
  124. <li><span>[2009-10.22]</span><a href="http://www.39gd.com/yy/qtzl/2310.html">恶性葡萄胎和绒毛膜癌治愈后还能怀孕吗</a></li>
  125. <li><span>[2009-11.30]</span><a href="http://www.39gd.com/yy/zgjl/2758.html">得了子宫肌瘤怎么办</a></li>
  126. <li><span>[2010-05.07]</span><a href="http://www.39gd.com/yy/zgjl/4106.html">子宫肌瘤会影响怀孕吗</a></li>
  127. <li><span>[2011-05.03]</span><a href="http://www.39gd.com/yy/zgjl/5518.html">女性小肚子变硬是怎么回事呢</a></li>
  128. <li><span>[2009-10.22]</span><a href="http://www.39gd.com/yy/qtzl/2309.html">阴道排液很多是为什么</a></li>
  129. <li><span>[2009-12.26]</span><a href="http://www.39gd.com/yy/zgjl/2875.html">女性有子宫肌瘤是否能上环</a></li></ul></div>
  130. <div><ul>
  131. <li><span>[2016-03.03]</span><a href="http://www.39gd.com/yy/qtzx/13933.html">子宫小会不会对生育有影响吗?</a></li>
  132. <li><span>[2016-01.29]</span><a href="http://www.39gd.com/yy/ydjss/13659.html">分娩后做阴道紧缩术要注意什么</a></li>
  133. <li><span>[2016-01.12]</span><a href="http://www.39gd.com/yy/ydjss/13596.html">常见的阴道松弛的原因有哪些</a></li>
  134. <li><span>[2015-12.29]</span><a href="http://www.39gd.com/yy/cnm/13539.html">女性做处女膜修复术后应该要多吃什么食物</a></li>
  135. <li><span>[2015-12.28]</span><a href="http://www.39gd.com/yy/ydjss/13536.html">阴道松弛会有哪些危害</a></li>
  136. <li><span>[2015-12.21]</span><a href="http://www.39gd.com/yy/cnm/13507.html">哪些情况是不能做处女膜修复手术</a></li></ul>
  137. <ul>
  138. <li><span>[2009-11.03]</span><a href="http://www.39gd.com/yy/cg/2450.html">我第二次做处女膜“修补”</a></li>
  139. <li><span>[2009-10.30]</span><a href="http://www.39gd.com/yy/qtzx/2442.html">阴蒂与女性性能力有关吗</a></li>
  140. <li><span>[2009-10.31]</span><a href="http://www.39gd.com/yy/cg/2447.html">“石女”4小时手术重获新“身”(图)</a></li>
  141. <li><span>[2010-04.03]</span><a href="http://www.39gd.com/yy/cnm/3827.html">处女膜修复术大概要多少钱</a></li>
  142. <li><span>[2009-10.31]</span><a href="http://www.39gd.com/yy/qtzx/2445.html">阴蒂肥大怎么办</a></li>
  143. <li><span>[2009-10.31]</span><a href="http://www.39gd.com/yy/qtzx/2443.html">什么是阴毛种植术</a></li></ul></div></div></div></div>
　　最后是切换代码：

<script type="text/javascript">
$(".slide").slide({ titCell:".bh li", mainCell:".bd", effect:"fold"});
$(".slide2").slide({ titCell:".bh li", mainCell:".bd", effect:"fold"});
</script>

来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/30111374/viewspace-2051659/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： 为了对付Uber Lyft抱上了谷歌的大腿
下一篇： Facebook在谷歌的地盘上异军突起
请登录后发表评论 登录
全部评论
aubreyl

注册时间：2015-01-20

  • 博文量
    53
  • 访问量
    55761

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593