css部分
.page { width: 740px; height: 350px; float: left; margin: 10px 10px 0 10px; overflow: hidden; position: relative;}.page ul { position: absolute; left: 0;}.lli { float: left;}.uul { width: 900%; height: 100%;}.d-ol { position: absolute; right: 12px; bottom: 12px; height: 19px}.ool { list-style-type: none;}.ool li { float: left;}.ool li span { display: inline-block; width: 18px; height: 18px; line-height: 18px; overflow: hidden; margin-left: 7px; color: #333; text-align: center; cursor: pointer; background: url(../images/imgPlayer.png) no-repeat -28px -90px;}li.active span { color: #fff; background-position: 0 -90px;}.prev { display: none; background: url(../images/newx-flash.png) no-repeat 0 0; left: 20px; width: 36px; cursor: pointer; position: absolute; top: 152px; height: 50px; overflow: hidden;}.next { display: none; background: url(../images/newx-flash.png) no-repeat -47px 0; right: 10px; width: 36px; cursor: pointer; position: absolute; top: 152px; height: 50px; overflow: hidden;}复制代码 html部分
复制代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
js部分，之前分享了一个封装的动画函数 这里需要引入一下 主要思路就是 根据动画函数 每两秒让 定义的i加一 这样每两秒他就换到了一个新的图片 多了一张图片是为了实现无缝轮播 在显示最后一张图片之后 让他下一张显示第一张图片 紧接着让整个ul的left=0 他会瞬间回到第一张图片 这样 就完成了 从头开始的操作 。
var oView = document.querySelector('.page');var viewWidth = oView.offsetWidth;// 3.获取ulvar uUl = document.querySelector('.uul');console.log(uUl);var uLi = document.querySelectorAll('.lli');//获取下面的圆点var oOl = document.querySelector('.ool');var oLi=document.querySelectorAll('.ool li')var prevBtn = document.querySelector('.prev');var nextBtn = document.querySelector('.next');var num = 0;var timeId = setInterval(fn, 1500)//图片运动的方法function fn() { if (num == uLi.length - 1) { num = 0; uUl.style.left = 0 + 'px'; } num++; animate(uUl, -num * viewWidth);// 焦点样式 if (num > oLi.length - 1) { oLi[oLi.length-1].className = ""; oLi[0].className = 'active'; } else { for (var j = 0; j < oLi.length; j++) { oLi[j].removeAttribute('class'); } oLi[num].className = 'active'; } }// 下一张图片nextBtn.onclick = fn;// 上一张图片prevBtn.onclick = function () { if (num == 0) { num = uLi.length - 1; uUl.style.left = -num * viewWidth + 'px'; } num--; animate(uUl, -num * viewWidth); for (var j = 0; j < oLi.length; j++) { oLi[j].removeAttribute('class'); } oLi[num].className = 'active';}// 点击按钮换图片for (var i = 0; i < oLi.length; i++) { (function (i) { oLi[i].onclick = function () { // var dis = index - i; console.log(i); for (var j = 0; j < oLi.length; j++) { oLi[j].className = ' '; } this.className = 'active'; uUl.style.left = -i * viewWidth + 'px' // console.log(this.index); // clearInterval(timeId); /*这里让num=i 是为了解决当点击下面的小圆点 图片虽然会跳转到 对应的图片位置 但是 当移出之后 轮播图会回到 原来停止的位置 继续播放 但是当我让 圆点的索引和 图片的索引相等的时候 他会在当前位置继续播放 *／ num = i; } })(i)}// 鼠标移入 让轮播图暂停oView.onmouseover = function () { clearInterval(timeId); prevBtn.style.display = 'block'; nextBtn.style.display = 'block'; }// 鼠标移出 让轮播图继续oView.onmouseout = function () { timeId = setInterval(fn, 1500); prevBtn.style.display = 'none'; nextBtn.style.display = 'none';}复制代码