<html lang=“en”> <head> <meta charset=“UTF-8”> <title>轮播图</title> <style> * { margin: 0; padding: 0; } ul,ol { list-style: none; } #play { margin: 100px auto; width: 900px; height: 350px; position:relative; } #play img { display: block; } .image-list li { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1s; } .image-list li.current { opacity: 1; } .icon-list { position: absolute; bottom: 10px; right: 10px; } .icon-list li { float: left; margin-right: 8px; width: 20px; height: 20px; color: #fff; font-size: 14px; text-align: center; line-height: 20px; border: 1px solid #fff; border-radius: 50%; cursor: pointer; } .icon-list li.current { color: #f60; border-color: #f60; background: #000; } .prev-btn,.next-btn { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; width: 40px; height: 100px; background: url(‘images/play/index.png’) no-repeat; } .prev-btn { left: 0; } .next-btn { right: 0; background-position:-50px 0; } </style> </head> <body> <div id=“play”> <ul class=“image-list”> <li class=“current”><img src=“images/play/01.jpg” alt=“轮播图”></li> <li><img src=“images/play/02.jpg” alt=“轮播图”></li> <li><img src=“images/play/03.jpg” alt=“轮播图”></li> <li><img src=“images/play/04.jpg” alt=“轮播图”></li> <li><img src=“images/play/05.jpg” alt=“轮播图”></li> </ul> <ol class=“icon-list”> <li class=“current”>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <div class=“control-btns”> <div class=“prev-btn”></div> <div class=“next-btn”></div> </div> </div>
<script>
//获取元素
var play = document.querySelector('#play'); //包裹元素
var imageItems = play.querySelectorAll('.image-list li'); //所有图片的集合
var iconItems = play.querySelectorAll('.icon-list li'); //所有的控制按钮元素
var prevBtn = play.querySelector('.prev-btn'); //上一张的按钮
var nextBtn = play.querySelector('.next-btn'); //下一张的按钮
var currentIndex = 0; //标记当前显示的图片的索引
var itemLength = iconItems.length; //图片的数量
var duration = 3000; //自动播放时间间隔
// 给每一个控制按钮 绑定单击事件
iconItems.forEach(function (iconItem, index) {
iconItem.onclick = function(){
//重新设置索引标记
currentIndex = index;
//设置高亮
setPlay();
}
});
//点击上一张
prevBtn.onclick = function() {
setIndex('prev');
};
//点击下一张
nextBtn.onclick = function(){
setIndex('next');
};
// 自动播放
var intervalId = setInterval(function () {
setIndex('next');
}, duration);
// 鼠标悬停在轮播图上，停止定时
play.onmouseenter = function () {
clearInterval(intervalId);
};
//鼠标离开轮播图，轮播继续
play.onmouseleave = function(){
intervalId = setInterval(function(){
setIndex('next');
}, duration);
};
/**
* @param tag 值是prev表示上一张， 值是next表示下一张
*/
function setIndex(tag) {
if (tag === 'prev') {
//当前的索引 -1
currentIndex --;
//判断范围
if (currentIndex < 0) {
currentIndex = itemLength - 1;
}
//设置高亮
setPlay();
} else if (tag === 'next') {
//当前的索引标记 +1
currentIndex ++;
//如果 currentIndex 超出范围
if (currentIndex > itemLength - 1) {
currentIndex = 0;
}
//设置高亮
setPlay();
}
}
// 实现根据 currentIndex 显示当前的图片和控制按钮
function setPlay() {
//排他 所有控制按钮的取消高亮，所有图片的隐藏
iconItems.forEach(function (item, index) {
item.classList.remove('current');
imageItems[index].classList.remove('current');
});
//当前控制按钮设置高亮 当前的图片显示
iconItems[currentIndex].classList.add('current');
imageItems[currentIndex].classList.add('current');
}
</script>
</body> </html>
#### jQuery实现代码
<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>jQuery</title> <style> * { margin: 0; padding: 0; } ul,ol { list-style: none; } #play { position: relative; margin: 100px auto; width: 900px; height: 350px; } .image-list li { position: absolute; left:0; top: 0; width: 900px; height: 350px; opacity: 0; transition: opacity .5s; } .image-list li img { display: block; } .image-list li.actived { opacity: 1; } .icon-list { position: absolute; left: 0; bottom: 10px; width: 100%; text-align: center; font-size: 0; } .icon-list li { display: inline-block; margin: 2px; width: 20px; height:20px; text-align: center; line-height:20px; color: #fff; font-size: 16px; background-color: #000; border:1px solid #000; border-radius: 50%; cursor: pointer; } .icon-list li.actived { border-color: #f90; color: #f90; } .prev-btn,.next-btn { position: absolute; top: 50%; margin-top: -50px; width: 40px; height: 100px; background-image: url(images/play/index.png); background-repeat: no-repeat; cursor: pointer; } .prev-btn { left: 0; } .next-btn { right: 0; background-position: -50px 0; }
</style>
</head> <body> <div id=“play”> <ul class=“image-list”> <li class=“actived”><img src=“images/play/p01.jpg” alt=“图”></li> <li><img src=“images/play/p02.jpg” alt=“图”></li> <li><img src=“images/play/p03.jpg” alt=“图”></li> <li><img src=“images/play/p04.jpg” alt=“图”></li> <li><img src=“images/play/p05.jpg” alt=“图”></li> </ul> <ol class=“icon-list”> <li class=“actived”>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <div class=“prev-btn”></div> <div class=“next-btn”></div> </div>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
//定义全局变量 表示索引
var index = 0;
//时间间隔
var delay = 5000;
//按钮单击事件
$('.icon-list li').click(function(){
index = $(this).index();
setPlay();
});
//点击上一个 下一个
$('.prev-btn').click(function(){
index --;
if (index < 0) {
index = $('.image-list li').length - 1;
}
setPlay();
});
$('.next-btn').click(function(){
index ++;
if (index > $('.image-list li').length - 1) {
index = 0;
}
setPlay();
});
//定时器
var intervalId = setInterval(runPlay, delay);
//鼠标移入暂停定时
$('#play').mouseenter(function () {
clearInterval(intervalId);
}).mouseleave(function(){
intervalId = setInterval(runPlay, delay);
});
//定时器函数
function runPlay(){
index ++;
if (index > $('.image-list li').length - 1) {
index = 0;
}
setPlay();
}
//设置轮播图
function setPlay(){
$('.icon-list li').removeClass('actived').eq(index).addClass('actived');
$('.image-list li').removeClass('actived').eq(index).addClass('actived');
}
});
</script>
</body> </html>
## 无缝滚动
#### 实现原理
**布局：** 将轮播图片排在一排，定位在父元素上，设置图片父元素宽度为一张图片宽度，overflow为hidden，布局好左右按钮及下方高亮数字按钮位置。
**js实现：** 在原图片元素列表中的最前面添加原图片的最后一张图片元素、最后面添加原图片的第一张图片元素，利用索引值和图片元素的left偏移值的关系来切换轮播的图片，当图片到达图片列表临界点时，瞬间调整图片列表的位置以实现无缝滚动，最后设置定时。
#### 实现代码
<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>轮播图</title> <style> * { margin: 0; padding: 0; } ul,ol { list-style: none; } #play { margin: 100px auto; width: 900px; height: 350px; overflow: hidden; position:relative; } #play img { display: block; } .image-list { position: absolute; left: 0; top: 0; } .image-list li { float: left; width: 900px; height: 350px;
}
.image-list li.current {
}
.icon-list {
position: absolute;
bottom: 10px;
right: 10px;
}
.icon-list li {
float: left;
margin-right: 8px;
width: 20px;
height: 20px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 20px;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
}
.icon-list li.current {
color: #f60;
border-color: #f60;
background: #000;
}
.prev-btn,.next-btn {
position: absolute;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
width: 40px;
height: 100px;
background: url('images/play/index.png') no-repeat;
}
.prev-btn {
left: 0;
}
.next-btn {
right: 0;
background-position:-50px 0;
}
</style>
</head> <body> <div id=“play”> <ul class=“image-list”> <li><img src=“images/play/01.jpg” alt=“轮播图”></li> <li><img src=“images/play/02.jpg” alt=“轮播图”></li> <li><img src=“images/play/03.jpg” alt=“轮播图”></li> <li><img src=“images/play/04.jpg” alt=“轮播图”></li> <li><img src=“images/play/05.jpg” alt=“轮播图”></li> </ul> <ol class=“icon-list”> <li class=“current”>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <div class=“control-btns”> <div class=“prev-btn”></div> <div class=“next-btn”></div> </div> </div>
<script>
//获取元素
var play = document.querySelector('#play'); //包裹元素
var imageList = play.querySelector('.image-list');
var imageItems = imageList.getElementsByTagName('li'); //所有图片的集合
var iconItems = play.querySelectorAll('.icon-list li'); //所有的控制按钮元素
var prevBtn = play.querySelector('.prev-btn'); //上一张的按钮
var nextBtn = play.querySelector('.next-btn'); //下一张的按钮
var currentIndex = 0; //标记图标的索引
var currentImageIndex = 1; //标记当前图片的索引
var itemLength = iconItems.length; //图片的数量
var duration = 5000; //自动播放时间间隔
//把原来的第一张图片克隆追加到最后，把原来的最后一张克隆追加到最前
var firstImageItemClone = imageItems[0].cloneNode(true);
var lastImageItemClone = imageItems[imageItems.length-1].cloneNode(true);
imageList.appendChild(firstImageItemClone);
imageList.insertBefore(lastImageItemClone, imageList.firstElementChild);
//设置ul.image-list 元素的宽度， 宽度=所有图片宽度和
imageList.style.width = imageItems[0].offsetWidth * imageItems.length + 'px';
// 调整图片的位置
setPlay();
// 给每一个控制按钮 绑定单击事件
iconItems.forEach(function (iconItem, index) {
iconItem.onclick = function(){
//重新设置索引标记
currentIndex = index;
//设置图片的索引
currentImageIndex = index + 1;
//设置高亮
imageList.style.transition = 'left .5s';
setPlay();
}
});
//点击上一张
prevBtn.onclick = function() {
setIndex('prev');
};
//点击下一张
nextBtn.onclick = function(){
setIndex('next');
};
// 自动播放
var intervalId = setInterval(function () {
setIndex('next');
}, duration);
// 鼠标悬停在轮播图上，停止定时
play.onmouseenter = function () {
clearInterval(intervalId);
};
//鼠标离开轮播图，轮播继续
play.onmouseleave = function(){
intervalId = setInterval(function(){
setIndex('next');
}, duration);
};
/**
* @param tag 值是prev表示上一张， 值是next表示下一张
*/
function setIndex(tag) {
if (tag === 'prev') {
//当前的索引 -1
currentIndex --;
//判断范围
if (currentIndex < 0) {
currentIndex = itemLength - 1;
}
// 图片索引变化
currentImageIndex --;
// 判断图片的索引范围
if (currentImageIndex < 0) {
//瞬间切换imageList的位置
imageList.style.transition = 'none';
imageList.style.left = -imageItems[0].offsetWidth*(imageItems.length-2) + 'px';
//重新设置currentImageIndex
currentImageIndex = imageItems.length - 3;
}
setTimeout(function(){
// 设置过渡
imageList.style.transition = 'left .5s';
//设置高亮
setPlay();
}, 1);
} else if (tag === 'next') {
//当前的索引标记 +1
currentIndex ++;
//如果 currentIndex 超出范围
if (currentIndex > itemLength - 1) {
currentIndex = 0;
}
// 图片的索引变化
currentImageIndex ++;
// 如果图片的索引超出范围
if (currentImageIndex > imageItems.length - 1) {
//瞬间 调整imageList的位置，调整到索引是1的位置
imageList.style.transition = 'none';
imageList.style.left = -imageItems[0].offsetWidth + 'px';
//设置索引应该显示第二张图片
currentImageIndex = 2;
}
setTimeout(function(){
// 设置过渡
imageList.style.transition = 'left .5s';
//设置高亮
setPlay();
}, 1);
}
}
// 实现根据 currentIndex 显示当前的图片和控制按钮
function setPlay() {
//排他 所有控制按钮的取消高亮，所有图片的隐藏
iconItems.forEach(function (item, index) {
item.classList.remove('current');
});
//当前控制按钮设置高亮 当前的图片显示
iconItems[currentIndex].classList.add('current');
//设置相应图片显示
imageList.style.left = -currentImageIndex * imageItems[0].offsetWidth + 'px'
}
</script>
</body>
[转载]原文链接：https://segmentfault.com/a/1190000021197382
本站文章除注明转载外，均为本站原创或编译。欢迎任何形式的转载，但请务必注明出处。
转载请注明：文章转载自 JavaScript中文网 [https://www.javascriptcn.com]
本文地址：https://www.javascriptcn.com/read-80436.html
文章标题：常见轮播图实现效果
微信公众号搜索： FedJavaScript ，选择关注，与十万前端开发者一起探讨前端学习
