1.動态切換圖檔(布局)
2.動态切換圖檔---（單擊切換圖檔）// lis.onmouseover = liclick;//滑鼠移到目标上；滑鼠移進時
3.圖檔輪換加強版
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#bodDIv {
margin:50px auto;
width:460px;
border:1px solid #000;
}
#pageUL{
list-style-type:none;
border:0px solid #808080;
margin:0px;
position:relative;/*位置：相對位置*/
left:350px;
width:200px;
top:-30px;
}
#pageUL li{
display:inline-block;/*顯示：内聯的塊元素*/
width:10px;height:20px;
border:1px solid #000000;
background-color:#b6ff00;
}
</style>
<script type="text/javascript">
function gel(id) { return document.getElementById(id); }
window.onload = function () {
};
</script>
</head>
<body>
<div id="bodDIv">
<img src="image/t019b430cacfc2e1f04.jpg" width="460px"/>
<ul id="pageUL">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html> 2.動态切換圖檔
<style type="text/css">
#bodDIv {
margin:50px auto;
width:460px;
border:1px solid #000;
}
#pageUL{
list-style-type:none;
border:0px solid #808080;
margin:0px;
position:relative;/*位置：相對位置*/
left:310px;
width:200px;
top:-25px;
}
#pageUL li{
display:inline-block;/*顯示：内聯的塊元素*/
width:20px;height:22px;
border:1px solid #000000;
background-color:#b6ff00;
padding:0px 0px;
text-align:center;
}
</style>
<script type="text/javascript">
function get(id) { return document.getElementById(id); };
//圖檔數組
var imageList = [
"t019b430cacfc2e1f04.jpg",
"qq_icon.jpg",
"icon_ts.png",
"t019b430cacfc2e1f04.jpg",
"icon_yq.png"];
function gelButton()
{
var geluL = get("pageUL")
for (var i = 0; i < imageList.length; i++) {
var lis = document.createElement("li");
lis.innerHTML = i + 1;
geluL.appendChild(lis);
//為li的onclick事件綁定方法
//lis.onmouseover = liclick;//滑鼠移到目标上；滑鼠移進時
lis.onclick = liclick;
}
//點選li的方法
function liclick() {
var ds = this.innerHTML - 1;
get("imgShow").src="image/"+ imageList[ds];
}
}
window.onload = function () {
//根據圖檔數組 動态生成 按鈕
gelButton();
}
</script>
</head>
<body>
<div id="bodDIv">
<img id="imgShow" src="image/t019b430cacfc2e1f04.jpg" width="460px" height="350px"/>
<ul id="pageUL">
<!--<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>-->
</ul>
<div id="titDIv">标題在這裡...</div>
</div>
</body>
</html> 3.圖檔輪換加強版
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#imgBox {
border:1px solid #000;
width:442px;
margin:20px auto;
}
#imgBox ul {
list-style-type:none;
padding:0px;
float:right;
position:relative;
top:-50px;
right:10px;
}
#imgBox ul li {
display:inline;
color:#fff;
border:1px solid #fff;
padding:2px 5px;
cursor:pointer;
}
#msgBox {
text-align:center;
}
.redBg {
background-color:red;
}
.normalBg {
background-color:#000;
}
</style>
<script type="text/javascript">
var btns;
var btnIndexNow;
var timer;
window.onload = function () {
//新式浏覽器文法：擷取 ulBtns 對象的子節點裡的 所有 li 對象
btns = document.getElementById("ulBtns").getElementsByTagName("li");
//var btns = document.getElementById("ulBtns").childNodes;
for (var i = 0; i < btns.length; i++)
{
//alert(btns[i].nodeType);
btns[i].onclick = changeImg;
}
btns[0].onclick();
//開啟計時器
timer = setInterval(timeChange, 4000);
//關閉計時器
//clearInterval(timer);
};
function timeChange() {
btnIndexNow++;
if (btnIndexNow >= 4) btnIndexNow = 0;
//alert(btnIndexNow);
btns[btnIndexNow].onclick();
}
//切換 圖檔
function changeImg() {
btnIndexNow = parseInt(this.innerHTML) - 1;
//修改 圖檔 路徑
document.getElementById("imgShow").src = "imgs/" + this.innerHTML + ".jpg";
document.getElementById("msgBox").innerHTML = this.getAttribute("title");
//設定 被點選 li标簽的 class屬性（注意：寫做 className）
this.className = "redBg";
for (var i = 0; i < btns.length; i++)
{
if (this != btns[i])
{
btns[i].className = "normalBg";
}
}
}
</script>
</head>
<body>
<div id="imgBox">
<img width="442" id="imgShow" src="imgs/1.jpg" />
<ul id="ulBtns">
<li title="劉德華35歲就挂了~~">1</li>
<li title="劉德華36歲又複活了~~">2</li>
<li title="我愛廣州小蠻腰~~">3</li>
<li title="it人要學會鍛煉身體啊~~~~">4</li>
</ul>
<div id="msgBox"></div>
</div>
</body>
</html>