html：
<html>
<head>
<style type="text/css">div, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
text-align: center;
font: 12px/20px Arial;
}
#boxljwpx2 {
position: relative;
640px;
height: 237px;
}
#boxljwpx2 .list {
position: relative;
640px;
height: 237px;
overflow: hidden;
}
#boxljwpx2 .list ul {
position: relative;
1280px;
z-index: 10;
overflow: hidden;
}
#boxljwpx2 .list li {
float: left;
display: inline;
}
#boxljwpx2 .count {
position: absolute;
left: 50%;
bottom: 5px;
z-index: 30;
margin-left: -59px;
}
#boxljwpx2 .count li {
float: left;
margin-right: 5px;
padding: 2px 4px;
cursor: pointer;
display: block;
14px;
height: 14px;
border-radius: 100%;
background: url(http://www.shangdaotong.com/Content/images/NewIndexImg/dot.png) no-repeat 0 -16px;
text-indent: -9999px;
cursor: pointer;
}
#boxljwpx2 .count li.current {
font-weight: bold;
background-position: 0 0;
}
</style>
<script type="text/javascript" src="js/my.js"></script>
</head>
<body style="margin: 0px;">
<div id="boxljwpx2">
<div class="list">
<ul style="left: -320px;">
<li>
<a target="_blank" href="http://m.shangdaotong.com" onclick="statisticalAttachevent(227,86)">
<img border="0px" class="" src="http://img.shangdaotong.com/UploadImage/Adadvert/AdCreativeImage/201605190944260001.jpg" style=" 100%;"></a>
</li>
<li>
<a target="_blank" href="http://m.shangdaotong.com" onclick="statisticalAttachevent(227,86)">
<img border="0px" class="" src="http://img.shangdaotong.com/UploadImage/Adadvert/AdCreativeImage/201605191837390018.jpg" style=" 100%;"></a>
</li>
</ul>
</div>
<ul class="count">
<li class="">1</li>
<li class="current">2</li>
</ul>
</div>
</body>
</html>
js:
window.onload=function(){
var AutoPlayljwpx = function(id) {
this.initialize(id)
};
AutoPlayljwpx.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()
}, 2000);
this.oBox.onmouseover = function() {
clearInterval(oThis.autoTimer)
};
this.oBox.onmouseout = function() {
oThis.autoTimer = setInterval(function() {
oThis.next()
}, 2000)
};
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].offsetWidth))
},
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.offsetLeft) / 2;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oThis.oUl.offsetLeft == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.left = oThis.oUl.offsetLeft + iSpeed + "px")
}, 30)
}
};
$ = function(id) {
return typeof id === "string" ? document.getElementById(id) : id
};
$$ = function(tagName, oParent) {
return (oParent || document).getElementsByTagName(tagName)
};
new AutoPlayljwpx("boxljwpx2");
}