jquery实现图片切换

来源：互联网发布：淘宝村高峰论坛编辑：程序博客网时间：2024/06/02 08:08

1.设置样式

<style type="text/css">.top{width: 1100px;height: 30px;border: 1px blue solid;background-color:green;}.menu{margin-left: 0px;}li{text-align:center;float: left;list-style-type: none;width: 200px;margin-top: -10px;color: white;}.test{background-color: white;color: green;}.con{border: 1px solid; #2324Dc;width: 1100px;height: 300px;}.con1{border: 1px solid; #2324Dc;width: 1100px;height: 300px;display: none;}img{width: 1100px;height: 300px;}</style>

jquery代码

//图片切换var num = 1;function changeAll(){var num2 = num % 5 ;if(num2 == 1){$('#div1').show();$('#div2').hide();$('#div3').hide();$('#div4').hide();$('#div5').hide();}if(num2 == 2){$('#div1').hide();$('#div2').show();$('#div3').hide();$('#div4').hide();$('#div5').hide();}if(num2 == 3){$('#div1').hide();$('#div2').hide();$('#div3').show();$('#div4').hide();$('#div5').hide();}if(num2 == 4){$('#div1').hide();$('#div2').hide();$('#div3').hide();$('#div4').show();$('#div5').hide();}if(num2 == 0){$('#div1').hide();$('#div2').hide();$('#div3').hide();$('#div4').hide();$('#div5').show();}num= num+1;}setInterval(changeAll,3000);

内容

<body>  <div align="center">   <div class="top" align="center">   <ul class="menu">   <li id="li1">菜单一</li>   <li id="li2">菜单二</li>   <li id="li3">菜单三</li>   <li id="li4">菜单四</li>   <li id="li5">菜单五</li>   </ul>   </div>  </div>  <div align="center" style="margin-top: 5px;" >  <div id="div1" class="con" align="center">  <img src="image/361750.jpg">  </div>  <div id="div2" class="con1" align="center">  <img src="image/581925.jpg">  </div>  <div id="div3" class="con1" align="center">  <img src="image/582906.jpg">  </div>  <div id="div4" class="con1" align="center">  <img src="image/587873.jpg">  </div>  <div id="div5" class="con1" align="center">  <img src="image/589153.jpg">  </div>  </div>  </body>

0 0