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>