原生JS实现轮播图切换图片（焦点轮播，自动轮播，无缝轮播）
Java原生写简单轮播图
焦点轮播
触发轮播图中的小圆点切换轮播图
学习要点
- 排它思想；
- 定位；
- 鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 760px;
height: 370px;
margin: 0 auto;
border: 1px solid #CCC;
overflow: hidden;
position: relative;
}
#box .item{
display: block;
width: 10px;
height: 10px;
background-color: #FFF;
border-radius: 50%;
float: left;
margin: 5px;
}
#box>div {
position: absolute;
top: 330px;
left: 350px;
}
* {
padding: 0;
margin: 0;
list-style: none;
}
#ul {
width: 3800px;
position: absolute;
}
#ul li {
padding: 5px;
float: left;
}
#box .active {
background-color: #db192a;
}
</style>
</head>
<body>
<div id="box">
<ul id='ul'>
<li><img src="./pic1.jpg" alt=""></li>
<li><img src="./pic2.jpg" alt=""></li>
<li><img src="./pic3.jpg" alt=""></li>
<li><img src="./pic4.jpg" alt=""></li>
<li><img src="./pic5.jpg" alt=""></li>
</ul>
<div class="item-list">
<a href="" class="item active"></a>
<a href="" class="item"></a>
<a href="" class="item"></a>
<a href="" class="item"></a>
<a href="" class="item"></a>
</div>
</div>
<script src="./js/utils.js"></script>
<script>
// 获取ul
var ul = document.getElementById('ul');
// 获取小圆点
var item = document.getElementsByClassName('item');
for(var i = 0;i<item.length;i++){
(function(i){
item[i].onmouseover = function(){
for(var j = 0;j<item.length;j++){
item[j].className = 'item';
}
this.className = 'item active';
var target = i * (-760);
console.log(target);
animate1(ul,target);
}
})(i);
}
//动画效果
function animate1(ele, target) {
// 清除上一个定时器
clearInterval(ele.timerId);
// 提供给元素绑定定时器
ele.timerId = setInterval(function() {
if (ele.offsetLeft == target) {
clearInterval(ele.timerId);
} else {
// 步长
var step = (target - ele.offsetLeft) / 10;
// console.log('取正之前' + step);
// 大于0向上取正，小于0的话，向下取正-这样才能走完
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// console.log('取正过后' + step);
ele.style.left = ele.offsetLeft + step + 'px';
// 强调offsetLeft的返回值为四舍五入的后整数
// console.log(ele.offsetLeft);
// console.log(ele.style.left);
}
}, 10);
}
</script>
</body>
</html>
自动轮播
设置定时器自动切换轮播图
学习要点
- 排它思想；
- 定位；
- 定时器；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 760px;
height: 370px;
margin: 0 auto;
border: 1px solid #CCC;
overflow: hidden;
position: relative;
}
#box .item{
display: block;
width: 10px;
height: 10px;
background-color: #FFF;
border-radius: 50%;
float: left;
margin: 5px;
}
#box>div {
position: absolute;
top: 330px;
left: 350px;
}
* {
padding: 0;
margin: 0;
list-style: none;
}
#ul {
width: 3800px;
position: absolute;
}
#ul li {
padding: 5px;
float: left;
}
#box .active {
background-color: #db192a;
}
</style>
</head>
<body>
<div id="box">
<ul id='ul'>
<li><img src="./pic1.jpg" alt=""></li>
<li><img src="./pic2.jpg" alt=""></li>
<li><img src="./pic3.jpg" alt=""></li>
<li><img src="./pic4.jpg" alt=""></li>
<li><img src="./pic5.jpg" alt=""></li>
</ul>
<div class="item-list">
<a href="" class="item active"></a>
<a href="" class="item"></a>
<a href="" class="item"></a>
<a href="" class="item"></a>
<a href="" class="item"></a>
</div>
</div>
<script src="./js/utils.js"></script>
<script>
// 获取ul
var ul = document.getElementById('ul');
// 获取小圆点
var item = document.getElementsByClassName('item');
// 自动轮播
function autoPlay(){
var flag = 1;
ul.timeId = setInterval(function(){
flag = flag>item.length-1?0:flag;
for(var j = 0;j<item.length;j++){
item[j].className = 'item';
}
item[flag].className = 'item active';
var target = flag * (-760);
animate1(ul,target);
flag++;
},2000)
}
autoPlay();
// 缓慢动画效果（可封装）；
function animate1(ele, target) {
// 清除上一个定时器
clearInterval(ele.timerId);
// 提供给元素绑定定时器
ele.timerId = setInterval(function() {
if (ele.offsetLeft == target) {
clearInterval(ele.timerId);
} else {
// 步长
var step = (target - ele.offsetLeft) / 10;
// console.log('取正之前' + step);
// 大于0向上取正，小于0的话，向下取正-这样才能走完
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// console.log('取正过后' + step);
ele.style.left = ele.offsetLeft + step + 'px';
// 强调offsetLeft的返回值为四舍五入的后整数
// console.log(ele.offsetLeft);
// console.log(ele.style.left);
}
}, 10);
}
</script>
</body>
</html>
无缝轮播
设置定时器自动切换轮播图，触碰小圆点切换图片，点击左右按钮切换下一张上一张；
学习要点
- 排它思想；
- 定位；
- 定时器；
- 标志位；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 760px;
height: 370px;
margin: 0 auto;
border: 1px solid #CCC;
overflow: hidden;
position: relative;
}
#box .item {
display: block;
width: 10px;
height: 10px;
background-color: #FFF;
border-radius: 50%;
float: left;
margin: 5px;
}
#box .item-list {
position: absolute;
top: 330px;
left: 350px;
}
* {
padding: 0;
margin: 0;
list-style: none;
}
#ul {
width: 4560px;
position: absolute;
float: left;
}
#ul li {
padding: 5px;
float: left;
}
#box .active {
background-color: #db192a;
}
#box #prev,
#box #next {
width: 50px;
height: 100px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 30%;
left: 10px;
line-height: 100px;
font-size: 32px;
text-align: center;
display: none;
color: #fff;
}
#box #next {
left: 700px;
}
</style>
</head>
<body>
<div id="box">
<ul id='ul'>
<li><img src="./pic1.jpg" alt=""></li>
<li><img src="./pic2.jpg" alt=""></li>
<li><img src="./pic3.jpg" alt=""></li>
<li><img src="./pic4.jpg" alt=""></li>
<li><img src="./pic5.jpg" alt=""></li>
<li><img src="./pic1.jpg" alt=""></li>
</ul>
<!--左右两边按钮-->
<div id="prev"><</div>
<div id="next">></div>
<!-- 小圆点 -->
<div class="item-list">
<a href="" class="item active"></a>
<a href="" class="item"></a>
<a href="" class="item"></a>
<a href="" class="item"></a>
<a href="" class="item"></a>
</div>
</div>
<script src="./js/utils.js"></script>
<script>
// 获取ul
var ul = document.getElementById('ul');
// 获取小圆点
var item = document.getElementsByClassName('item');
// 获取左右按钮
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
// 获取div
var box = document.getElementById('box');
// 图片的位数
var flag = 0;
// 小圆点的位数
var count = 0;
var autoplaytimeID = null;
box.onmouseover = function () {
clearInterval(autoplaytimeID);
oPrev.style.display = 'block';
oNext.style.display = 'block';
}
box.onmouseout = function () {
autoplay();
oPrev.style.display = 'none';
oNext.style.display = 'none';
}
// 下一个
oNext.onclick = function () {
console.log(123);
flag++;
count++;
if (flag == ul.children.length) {
ul.style.left = '0px';
flag = 1;
}
if (count == item.length) {
count = 0;
}
exitem(item);
item[count].className = 'item active';
var target = flag * (-760);
console.log(target);
animate1(ul, target);
}
//上一个
oPrev.onclick = function () {
console.log(123);
if (flag == 0) {
flag = ul.children.length - 1;
ul.style.left = flag * (-750) + 'px';
}
flag--;
count--;
if (count == -1) {
count = item.length - 1;
}
exitem(item);
item[count].className = 'item active';
var target = flag * (-760);
console.log(target);
animate1(ul, target);
}
//焦点轮播
for (var i = 0; i < item.length; i++) {
+function (i) {
item[i].onmouseover = function () {
count = i;
flag = i;
exitem(item);
this.className = 'item active';
var target = i * (-760);
animate1(ul, target);
}
}(i)
}
function autoplay() {
ul.timeId = setInterval(function () {
oNext.onclick();
}, 2000)
autoplaytimeID = ul.timeId;
};
autoplay();
//排他小圆点
function exitem(item) {
for (var i = 0; i < item.length; i++) {
item[i].className = 'item';
}
}
// 缓慢动画
function animate1(ele, target) {
// 清除上一个定时器
clearInterval(ele.timerId);
// 提供给元素绑定定时器
ele.timerId = setInterval(function() {
if (ele.offsetLeft == target) {
clearInterval(ele.timerId);
} else {
// 步长
var step = (target - ele.offsetLeft) / 10;
// console.log('取正之前' + step);
// 大于0向上取正，小于0的话，向下取正-这样才能走完
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// console.log('取正过后' + step);
ele.style.left = ele.offsetLeft + step + 'px';
// 强调offsetLeft的返回值为四舍五入的后整数
// console.log(ele.offsetLeft);
// console.log(ele.style.left);
}
}, 10);
}
</script>
</body>
</html>
初次发表，有问题或者更好的方案请各位大哥指出！！！