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>