- <!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>
- *{
- margin:0px;padding:0px;
- }
- #wf{
- width:600px;height:100px;background:red;margin:100px auto;position:relative;overflow:hidden;
- }
- ul {
- position: absolute;
- }
- ul li{
- list-style:none;float:left;
- }
- ul li img{
- width:150px;height:100px;
- }
- .btn{
- position:absolute;width:30px;height:50px;background:#d7c1c1;font-size:28px;font-weight:900;left:158px;top:120px;line-height:50px;text-align:center;
- }
- .btn2{
- left:788px;
- }
- </style>
- <script>
- window.onload = function () {
- timer = null;
- oDiv = document.getElementById("wf");
- oUl = oDiv.getElementsByTagName("ul")[0];
- oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
- aLi = oUl.getElementsByTagName("li");
- oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
- var sped = 1;
- aSpan = document.getElementsByTagName("span");
- aSpan[0].onmouseover = function () {
- sped = 2;
- }
- aSpan[1].onmouseover = function () {
- sped = -2;
- }
- setInterval(timer);
- function move() {
- if (oUl.offsetLeft<-oUl.offsetWidth / 2 ) {
- oUl.style.left ="0";
- }
- if (oUl.offsetLeft> 0) {
- oUl.style.left = -oUl.offsetWidth / 2 + "px";
- }
- oUl.style.left = oUl.offsetLeft + sped + "px";
- document.getElementById("aa").innerHTML = oUl.offsetLeft;
- document.getElementById("bb").innerHTML = oUl.offsetWidth;
- }
- var timer = setInterval(move, 30);
- oUl.onmouseover = function () {
- clearInterval(timer);
- }
- oUl.onmouseout = function () {
- timer=setInterval(move, 30);
- }
- }
- </script>
- </head>
- <body>
- <div id="wf">
- <ul>
- <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201712/03/221408u6yu5szurjy64s22.jpg" /></li>
- <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201712/03/221427v9q8z9tbtyktk1uz.jpg" /></li>
- <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201712/03/221420nzvcwvsv3qmmy9v6.jpg" /></li>
- <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201712/03/221414czqvpwl9vwlq7prl.jpg" /></li>
- </ul>
- </div>
- <span class="btn">></span>
- <span class="btn btn2"><</span>
- <div id="aa"></div>
- <div id="bb"></div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/48108/7fce4be6bce3bacfa0bad9d56d9604b2.html