HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <link rel="stylesheet" href="css/banner.css"> <script src="js/cartonns.js"></script> <script src="js/banner.js"></script> </head> <script> </script> <body> <div class="box"> <div class="banner"> <!-- 左右按钮 --> <div class=‘last-sheet‘><a href="javascript::">?</a></div> <div class=‘next-sheet‘><a href="javascript::">?</a></div> <!-- 轮播图片 --> <ul class=‘bannerImg‘> <li><img src="images/cy6.jpg" alt="超越妹妹太美了"></li> <li><img src="images/cy7.jpg" alt="超越妹妹太美了"></li> <li><img src="images/cy8.jpg" alt="超越妹妹太美了"></li> <li><img src="images/cy9.jpg" alt="超越妹妹太美了"></li> <li><img src="images/cy10.jpg" alt="超越妹妹太美了"></li> </ul> <!-- 小圆点 --> <ol class="circle"> </ol> </div> </div> </body> </html>
CSS部分
* { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .box { margin: 0 auto; width: 800px; height: 600px; } .banner { position: relative; width: 100%; height: 100%; overflow: hidden; } .banner .bannerImg { position: absolute; left: 0px; top: 0px; width: 900%; } .banner ul li img { width: 800px; height: 600px; } .banner ul li { float: left; } .last-sheet, .next-sheet { display: none; position: absolute; text-align: center; width: 50px; height: 50px; line-height: 50px; background-color: #000; opacity: .5; top: 50%; margin-top: -30px; border-radius: 50%; z-index: 1; } .last-sheet { left: 5px; } .next-sheet { right: 5px; } .circle { position: absolute; left: 50%; bottom: 100px; margin-left: -50px; } .circle li { float: left; width: 15px; height: 15px; margin-left: 10px; border-radius: 50%; background-color: rgb(108, 112, 120); cursor: pointer; } .banner .first-circle { background-color: red; }
JS部分
// 1，实现小圆点功能，可使用排它思想 // 2，让四张图片动起来，实现无缝轮播效果 // 3，让小圆点绑定图片，跟随图片轮播，当鼠标点击某个小圆点时图片跟着小圆点变化 // 4，实现左右功能播放上一张和下一张的功能 window.addEventListener(‘load‘, function() { // 当鼠标经过图片时显示左右按钮功能，当鼠标离离开时则隐藏 var banner = document.querySelector(‘.banner‘); var last_sheet = banner.querySelector(‘.last-sheet‘); var next_sheet = banner.querySelector(‘.next-sheet‘); var bannerImg = banner.querySelector(‘.bannerImg‘) var circle = banner.querySelector(‘.circle‘); var num = 0; var circles = 0; // 当鼠标经过时显示左按钮 banner.addEventListener(‘mouseenter‘, function() { last_sheet.style.display = ‘block‘; next_sheet.style.display = ‘block‘; clearInterval(timer); timer = null; }); // 当鼠标离开时隐藏右按钮 banner.addEventListener(‘mouseleave‘, function() { last_sheet.style.display = ‘none‘; next_sheet.style.display = ‘none‘; timer = setInterval(function() { next_sheet.click(); }, 2000); }); // 动态生成小圆圈，后给小圆圈添加点击事件 for (var i = 0; i < bannerImg.children.length; i++) { var li = document.createElement(‘li‘); li.setAttribute(‘index‘, i); circle.appendChild(li); //给小li添加点击事件 li.addEventListener(‘click‘, function() { var index = this.getAttribute(‘index‘); for (var i = 0; i < circle.children.length; i++) { circle.children[i].className = ‘‘; } this.className = ‘first-circle‘; // 当我点击哪张图片就移动到第几张图片上去 // 移动的距离=第几个小li* num = index; circles = index; var bannerWidth = -index * banner.offsetWidth; cartoons(bannerImg, bannerWidth); }); } // 将ol中的第一个小li设置一个类名 circle.children[0].className = ‘first-circle‘; // 克隆第一张图片添加进去 var first = bannerImg.children[0].cloneNode(true); bannerImg.appendChild(first); // 当我点击右边按钮时通过index来判断当前是第几张后减去banner的宽度即可 next_sheet.addEventListener(‘click‘, function() { if (num == bannerImg.children.length - 1) { bannerImg.style.left = 0; num = 0; } num++; var bWidth = num * banner.offsetWidth; cartoons(bannerImg, -bWidth); circles++; if (circles == circle.children.length) { circles = 0; } for (var i = 0; i < circle.children.length; i++) { circle.children[i].className = ‘‘; } circle.children[circles].className = ‘first-circle‘; }); // 当我点击左边按钮时通过index来判断当前是第几张后减去banner的宽度即可 last_sheet.addEventListener(‘click‘, function() { if (num == 0) { num = bannerImg.children.length - 1; bannerImg.style.left = -num * banner.offsetWidt + ‘px‘; } console.log(num); num--; var bWidth = num * banner.offsetWidth; cartoons(bannerImg, -bWidth); circles--; console.log(circles); if (circles < 0) { circles = circle.children.length - 1; } for (var i = 0; i < circle.children.length; i++) { circle.children[i].className = ‘‘; } circle.children[circles].className = ‘first-circle‘; }) // 让轮播图自动播放.可以让系统自动点击下一页功能 var timer = setInterval(function() { next_sheet.click(); }, 2000); });
// 动画函数封装
function cartoons(obj, targer, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (targer - obj.offsetLeft) / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == targer) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + ‘px‘;
}, 15);
}