<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <style> * { margin: 0; padding: 0; list-style: none; } #banner { width: 992px; height: 420px; margin: 100px auto; position: relative; } #main { width: 992px; height: 420px; overflow: hidden; } #con { width: 7000px; height: 420px; overflow: hidden; } #con img { width: 992px; height: 420px; float: left; cursor: pointer; } #banner ol { position: absolute; bottom: 10px; right: 10px; } #banner ol li { height: 20px; width: 30px; cursor: pointer; background: rgba(0, 0, 0, 0.5); border: 1px solid #fff; line-height: 20px; text-align: center; margin-left: 10px; float: left; } #banner #left, #banner #right { width: 41px; height: 69px; position: absolute; background: url("img/arr.png") no-repeat -84px 0; top: 50%; margin-top: -35px; } #banner #right { right: 0; background-position: -125px 0; } #banner #left:hover { background-position: 0 0; } #banner #right:hover { background-position: -42px 0; } #num .show { border-color: #000; background: rgba(255, 255, 255, 0.5); } </style> <div id="banner"> <div id="main"> <div id="con"> <img src="img/1.jpg" alt=""/> <img src="img/2.jpg" alt=""/> <img src="img/3.jpg" alt=""/> <img src="img/4.jpg" alt=""/> </div> </div> <ol id="num"> <li class="show">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <a href="javascript:;" id="left"></a> <a href="javascript:;" id="right"></a> </div> <script src="../tween.js"></script> <script> var con = document.getElementById('con'); //得到图片的父级 var imgs = con.getElementsByTagName('img'); //根据图片的父级得到图片 var num = document.getElementById('num'); var lis = num.getElementsByTagName('li'); var left = document.getElementById('left'); var right = document.getElementById('right'); var picNum = 1,num = 0;//picNum保存当前要滚动的图片的下标值,num表示下面的数字 var timer1 = null, timer2 = null; // timer1用来控制换图片的间隔,timer2用来控制图片滚动 /*新建图片节点插入到图片块中*/ var newImg1 = document.createElement('img'); newImg1.src = imgs[0].src; var newImg2 = document.createElement('img'); newImg2.src = imgs[imgs.length-1].src; con.appendChild(newImg1); con.insertBefore(newImg2,imgs[0]); main.scrollLeft=imgs[0].clientWidth;//初始化滚动条的位置在一张图片宽度位置 function move() { var start = main.scrollLeft; //获取滚动开始位置 var end = imgs[0].clientWidth * picNum; //获取滚动结束位置 var change = end - start; //求得滚动距离的差值 var minStep = 0; //设置最小步数 var maxStep = 31; //设置最大步数 var aveSpace = change / maxStep; //求得平均每步的距离 clearInterval(timer2); timer2 = setInterval(function () { minStep++; if (minStep >= maxStep) { clearInterval(timer2); } start += aveSpace; main.scrollLeft = start; // main.scrollLeft = Tween.Quint.easeIn(minStep,start,change,maxStep); //main.scrollLeft = Tween.Quart.easeIn(minStep,start,change,maxStep); //main.scrollLeft = Tween.Sine.easeIn(minStep,start,change,maxStep); //main.scrollLeft = Tween.Bounce.easeIn(minStep,start,change,maxStep); }, 10); for (var i = 0; i < lis.length; ++i) { lis[i].className = ''; } lis[num].className = 'show'; } function autoMove() { clearInterval(timer1); //在建立一个计时器时要先清除一个 timer1 = setInterval(function () { picNum++; if (picNum >= imgs.length) { picNum = 2; main.scrollLeft=imgs[0].clientWidth; } num++; if(num>=lis.length){ num=0; } move(); }, 2000); } autoMove(); //刚打开后自动播放 //点击右按钮 right.onclick = function () { picNum++; if (picNum >= imgs.length) { picNum = 2; main.scrollLeft=imgs[0].clientWidth; } num++; if(num>=lis.length){ num=0; } move(); autoMove(); } //点击左按钮 left.onclick = function () { picNum--; if (picNum < 0) { picNum = imgs.length - 3; main.scrollLeft=imgs[0].clientWidth*(picNum+1); } num--; if (num < 0) { num = lis.length - 1; } move(); autoMove(); } //当鼠标移动到数字上 for (var i = 0; i < lis.length; ++i) { lis[i].index = i; lis[i].onmouseenter = function () { num = this.index; picNum = num+1; move(); autoMove(); } } for(var i = 0 ; i < imgs.length ; ++i){ imgs[i].onmouseenter = function () { clearInterval(timer1); clearInterval(timer2); } imgs[i].onmouseleave = function () { autoMove(); } } </script> </body> </html>
图片没贴上