html代码
<!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>js图片自动轮播切换代码</title> <link href="lanrenzhijia.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="lanrenzhijia.js"></script> </head> <body> <div id="box_lanrenzhijia"> <div class="list"> <ul> <li><img src="01.jpg" width="1000" height="170" /></li> <li><img src="02.jpg" width="1000" height="170" /></li> <li><img src="03.jpg" width="1000" height="170" /></li> <li><img src="04.jpg" width="1000" height="170" /></li> <li><img src="05.jpg" width="1000" height="170" /></li> </ul> </div> </div> </body> </html>
CSS部分代码
@charset "utf-8"; body, div, ul, li { margin:0; padding:0; } ul { list-style-type:none; } #box_lanrenzhijia { position:relative; width:1000px;/*控制DIV大小*/ height:172px; background:#fff; border-radius:5px; border:8px solid #fff; margin:10px auto; cursor:pointer; } #box_lanrenzhijia .list { position:relative; width:1000px;/*这也改*/ height:170px; overflow:hidden; } #box_lanrenzhijia .list ul { position:absolute; top:0; left:0; } #box_lanrenzhijia .list li { width:1000px;/*这也改*/ height:170px; overflow:hidden; } #box_lanrenzhijia .count { position:absolute; right:0; bottom:5px; } #box_lanrenzhijia .count li { color:#fff; float:left; width:20px; height:20px; cursor:pointer; margin-right:5px; overflow:hidden; background:#F90; opacity:0.7; filter:alpha(opacity=70); border-radius:20px; } #box_lanrenzhijia .count li.current { color:#fff; opacity:1; filter:alpha(opacity=100); font-weight:700; background:#f60; } #tmp { width:100px; height:100px; background:red; position:absolute; }
js部分代码
// 代码整理：懒人之家 //获取ID var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id}; //获取tagName var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName)}; //自动播放对象 var AutoPlay = function (id) {this.initialize(id)}; AutoPlay.prototype = { initialize: function (id) { var oThis = this; this.oBox = $(id); this.oUl = $$("ul", this.oBox)[0]; this.aImg = $$("img", this.oBox); this.timer = null; this.autoTimer = null; this.iNow = 0; this.creatBtn(); this.aBtn = $$("li", this.oCount); this.toggle(); this.autoTimer = setInterval(function () { oThis.next() }, 3000); this.oBox.onmouseover = function () { clearInterval(oThis.autoTimer) }; this.oBox.onmouseout = function () { oThis.autoTimer = setInterval(function () { oThis.next() }, 3000) }; for (var i = 0; i < this.aBtn.length; i++) { this.aBtn[i].index = i; this.aBtn[i].onmouseover = function () { oThis.iNow = this.index; oThis.toggle() } } }, creatBtn: function () { this.oCount = document.createElement("ul"); this.oFrag = document.createDocumentFragment(); this.oCount.className = "count"; for (var i = 0; i < this.aImg.length; i++) { var oLi = document.createElement("li"); oLi.innerHTML = i + 1; this.oFrag.appendChild(oLi) } this.oCount.appendChild(this.oFrag); this.oBox.appendChild(this.oCount) }, toggle: function () { for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = ""; this.aBtn[this.iNow].className = "current"; this.doMove(-(this.iNow * this.aImg[0].offsetHeight)) }, next: function () { this.iNow++; this.iNow == this.aBtn.length && (this.iNow = 0); this.toggle() }, doMove: function (iTarget) { var oThis = this; clearInterval(oThis.timer); oThis.timer = setInterval(function () { var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px") }, 30) } }; window.onload = function () { new AutoPlay("box_lanrenzhijia"); };