类似图片切换

来源：互联网发布：java包的概念编辑：程序博客网时间：2024/04/28 13:38

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>ceshi</title><mce:style></mce:style><style mce_bogus="1">#image div{ width:390px; height:190px; display:none;}#text div{ width:390px; height:190px; display:none;}.button2{ float:left; margin-left:5px ; height:12px; width:12px; background:#fff;}.button1{ float:left; margin-left:5px ; height:12px; width:12px; background:#12aa34;}.button3{ float:left; margin-left:5px ; height:12px; width:12px; background:#12aa34;}</style><mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></mce:script><mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js" mce_src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></mce:script><mce:script type="text/javascript"></mce:script> </head><body><div style="width:400px;height:200px;background:#000;position:relative;"> <div id="image" style="float:left;width:390px;height:190px;margin:5px;background:#aa1234"> <div id="image1">图片1</div> <div id="image2">图片2</div> <div id="image3">图片3</div> <div id="image4">图片4</div> </div> <div id="text" style="position:absolute;width:390px;height:30px;z-index:2;right:5px; bottom:5px;background:#fff"> <div id="text1">文字1</div> <div id="text2">文字2</div> <div id="text3">文字3</div> <div id="text4">文字4</div> </div> <div id="button" style="position:absolute;width:390px;height:12px;z-index:2;left:5px; bottom:40px;"> <div id="button1" class="button2"></div> <div id="button2" class="button2"></div> <div id="button3" class="button2"></div> <div id="button4" class="button2"></div> </div></div></body></html>