快捷導(dǎo)航

JavaScript 圖片切換展示效果alibaba拓展版

更新時間：2008年09月15日 10:27:44 作者：

看到alibaba的一個圖片切換效果，感覺不錯，想拿來用用。但代碼一大堆的，看著昏，還是自己來吧。由于有了做圖片滑動展示效果的經(jīng)驗(yàn)，做這個就容易得多了。

<!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=gb2312" /> <title>JavaScript 圖片切換展示效果</title> </head> <body> <style type="text/css"> .container, .container *{margin:0; padding:0;} .container{width:408px; height:168px; overflow:hidden;} .slider{position:absolute;} .slider li{ list-style:none;display:inline;} .slider img{ width:408px; height:168px; display:block;} .slider2{width:2000px;} .slider2 li{float:left;} .num{ position:absolute; right:5px; bottom:5px;} .num li{     float: left;     color: #FF7300;     text-align: center;     line-height: 16px;     width: 16px;     height: 16px;     font-family: Arial;     font-size: 12px;     cursor: pointer;     overflow: hidden;     margin: 3px 1px;     border: 1px solid #FF7300;     background-color: #fff; } .num li.on{     color: #fff;     line-height: 21px;     width: 21px;     height: 21px;     font-size: 16px;     margin: 0 1px;     border: 0;     background-color: #FF7300;     font-weight: bold; } </style> <div   id="wppm3vysvbp"   class="container" id="idTransformView"> <ul class="slider" id="idSlider"> <li><img src="1.jpg"/></li> <li><img src="2.jpg"/></li> <li><img src="3.gif"/></li> </ul> <ul class="num" id="idNum"> <li>1</li> <li>2</li> <li>3</li> </ul> </div>  <div   id="wppm3vysvbp"   class="container" id="idTransformView2"> <ul class="slider slider2" id="idSlider2"> <li><img src="1.jpg"/></li> <li><img src="2.jpg"/></li> <li><img src="3.gif"/></li> </ul> <ul class="num" id="idNum2"> <li>1</li> <li>2</li> <li>3</li> </ul> </div>  <div> <input id="idStop" type="button" value=" 停止自動 " /> <input id="idStart" type="button" value=" 開始自動 " /> <input id="idPre" type="button" value=" <- 上一個 " /> <input id="idNext" type="button" value=" 下一個 -> " />  切換速度： <input id="idFast" type="button" value=" + 加 速 " /> <input id="idSlow" type="button" value=" - 減 速 " />  停頓時間： <input id="idAdd" type="button" value=" + 加時間 " /> <input id="idReduce" type="button" value=" - 減時間 " />  <input id="idReset" type="button" value=" Reset " /> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: