相关代码如下，只要把代码粘贴进编辑器，修改图片路径，即可看到效果。
1、html部分
| <body> | |
| <ul class="banner"> | |
| <li><img src="images/01.jpg"/></li> | |
| <li><img src="images/02.jpg"/></li> | |
| <li><img src="images/03.jpg"/></li> | |
| <li><img src="images/04.jpg"/></li> | |
| <li><img src="images/05.jpg"/></li> | |
| </ul> | |
| <ul class="product"> | |
| <li class="on"> | |
| <span>网站建设</span> | |
| <ul> | |
| <li>网站建设</li> | |
| <li>网站建设</li> | |
| <li>网站建设</li> | |
| </ul> | |
| </li> | |
| <li class="on"> | |
| <span>网络营销</span> | |
| <ul> | |
| <li>网络营销</li> | |
| <li>网络营销</li> | |
| <li>网络营销</li> | |
| </ul> | |
| </li> | |
| <li class="on"> | |
| <span>UI设计</span> | |
| <ul> | |
| <li>UI设计</li> | |
| <li>UI设计</li> | |
| <li>UI设计</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </body> |
2、css部分
| <style type="text/css"> | |
| *{margin:0px;padding:0px} | |
| .banner{180px;height:180px;overflow:hidden;margin:100px auto} | |
| .banner li{list-style:none;180px;height:180px;} | |
| .product{100px;background:blue;margin:100px auto} | |
| .product li{list-style:none;text-align:center} | |
| span{background:url(images/open.gif) no-repeat 5px;display:block} | |
| .on ul{display:none} | |
| .on span{background:url(images/close.gif) no-repeat 5px;display:block} | |
| </style> |
3、js部分
| <script type="text/javascript" src="jquery-1.11.0.min.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| setInterval(function(){ | |
| if($(".banner li:last").is(":hidden")){ | |
| $(".banner li:visible").addClass("on"); | |
| $(".banner li[class=on]").next().fadeIn("slow"); | |
| $(".banner li[class=on]").removeClass("on").hide(); | |
| }else{ | |
| $(".banner li:last").hide(); | |
| $(".banner li:first").fadeIn("slow"); | |
| } | |
| },2000) | |
| }) | |
| $(".product li:has('ul')").click(function(){ | |
| if($(this).hasClass('on')){ | |
| $(this).removeClass('on').siblings().addClass('on'); | |
| }else{ | |
| $(this).addClass('on'); | |
| } | |
| }) | |
| }) |
有问题可以找我一起交流哦！QQ：1047832475