<div class="slider"> <ul class="num" id="homePushName"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul class="bg" id="homePushBg"> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <ul style="margin-top:0px;" class="pic" id="homePushShow"> <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动" src="images/1.jpg" /></a></li> <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动" src="../images/2.jpg" /></a></li> <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt=" javascript滚动图片带按钮控制上下左右自动无缝滚动" src="images/3.jpg" /></a></li> <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt=" javascript滚动图片按钮控制图片左右自动滚动" src="images/4.jpg" /></a></li> <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li> </ul> </div>
<script type="text/javascript"> var listItem = document.getElementById("homePushShow"); var tList = document.getElementById("homePushName").childNodes; var controlItem = []; for (var i = 0; i < tList.length; i++) { if (tList[i].nodeName.toLowerCase() == "li") { controlItem.push(tList[i]); } } var picCount = controlItem.length; var cid = 0; var tid = Math.floor(Math.random() * picCount); window.cTop = 0 window.gTop = 0; window.speed = 0; window.controlAction = ""; window.timeCount = 0; setInterval(function () { if (cid != tid) { gTop = tid * 180; speed = (gTop - cTop) / 10; cid = tid; for (var i = 0; i < picCount; i++) { controlItem[i].className = ((i == cid) ? "current" : ""); } } if (window.cTop != window.gTop) { window.cTop += parseInt(speed); listItem.style.marginTop = "-" + parseInt(window.cTop) + "px"; } document.getElementById("homePushBg").style.display = "block"; document.getElementById("homePushName").style.display = "block"; }, 20); for (var i = 0; i < picCount; i++) { controlItem[i].onmouseover = function () { var goId = parseInt(this.innerHTML) - 1; clearTimeout(window.controlAction); window.controlAction = setTimeout(function () { tid = goId; timeCount = 0; }, 300); } controlItem[i].onmouseout = function () { clearTimeout(window.controlAction); } } setInterval(function () { timeCount += 1 if (timeCount >= 5) { window.controlAction = setTimeout(function () { tid = tid + 1; if (tid >= picCount) { tid = 0; } }, 20); timeCount = 0; } }, 1000); </script>
/* slider */ .slider{position:relative;width:490px;height:180px;overflow:hidden;border:solid 1px #ddd;margin:100px auto} .slider .pic li{height:180px;overflow:hidden;} .slider .pic img{width:490px;height:180px;} .slider .num{z-index:2;position:absolute;right:10px;bottom:7px;width:95px;height:16px;} .slider .num li{float:left;display:inline;width:16px;height:16px;line-height:16px;margin-left:3px;text-align:center;color:#595959;cursor:pointer;} .slider .num li.current{background:#ffffff;font-weight:bold;color:#ff4e00;} .slider .bg{z-index:1;position:absolute;right:10px;bottom:7px;width:95px;height:16px;} .slider .bg li{float:left;display:inline;width:16px;height:16px;line-height:16px;margin-left:3px;background-color:#fff;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background:#ffffff;font-size:0;text-align:center;color:#595959;}