呼吸效果
实现原理：
布局：将需要轮播的图片层叠定位在父元素上，只显示一张图片，布局好左右按钮及下方高亮数字按钮位置，
js实现: 利用图片索引和opacity的值来切换轮播的图片，最后设置定时。
实现代码
<!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;
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>
</html>注：jQuery版本代码，详情 https://jquery.com/ 下载
点击按钮图片：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。