JS图片幻灯 焦点图 teJS图片幻灯 焦点图 te.doc

JS图片幻灯 焦点图 te !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title用JS图片幻灯6焦点图 /title style type=text/css body { background: #0000; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; } .play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; } .big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; } .big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(/d/demo/flashjs/loading.gif) no-repeat center center; } .mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; } .mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; } .big_pic .prev { width: 60px; height: 60px; background: url(/d/demo/flashjs/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; display: none; cursor: pointer; } .big_pic .next { width: 60px; height: 60px; background: url(/d/demo/flashjs/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001; display: none;cursor: pointer; } .big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; } .big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; } .big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; } .small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; } .small_pic ul { height: 94px; position: absolute; top: 0; left: 0; } .small_pic li { width: 1