轮播图案例
Posted 她还会来吗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图案例相关的知识，希望对你有一定的参考价值。
案例效果
案例功能需求
- 鼠标经过轮播图,左右按钮显示,离开隐藏左右按钮
- 点击左右按钮一次,图片往左播放一张,以此类推,左侧按钮同理
- 图片播放的同时,下面小圆圈模块跟随一起变化
- 点击小圆圈，可以播放响应图片
- 鼠标不经过轮播图,.轮播图也会自动播放图片
- 鼠标通过,轮播图模块,自动播放停止
代码展示
我此处的代码全部是写在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>
// 引用icon图标
@font-face {
font-family: 'icomoon';
src: url('../品优购/shopping/fonts/');
src: url('../品优购/shopping/fonts/icomoon.eot?slklzb#iefix') format('embedded-opentype'),
url('../品优购/shopping/fonts/icomoon.ttf?slklzb') format('truetype'),
url('../品优购/shopping/fonts/icomoon.woff?slklzb') format('woff'),
url('../品优购/shopping/fonts/icomoon.svg?slklzb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
*{
margin: 0;
padding: 0;
}
.slider{
position: relative;
overflow:hidden;
width: 500px;
height: 300px;
margin: 100px auto;
}
.slider-bar{
position: relative;
width: 1500px;
height: 300px;
}
ul li{
list-style: none;
}
img{
float: left;
width: 500px;
height: 300px;
}
.front span, .next span{
position: absolute;
display: none;
font-family: 'icomoon';
color: lightblue;
font-size: 25px;
cursor: pointer;
}
.front span{
top: 50%;
left: 24px;
content: '\\ea44';
transform: translateY(-50%);
}
.next span{
top: 50%;
right: 24px;
content: '\\ea42';
transform: translateY(-50%);
}
.content{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
/* background-color: pink; */
}
.current{
background-color: lightblue!important;
}
.content ol li{
display: inline-block;
width: 8px;
height: 8px;
background-color: #fff;
margin: 10px;
border-radius: 4px;
}
</style>
<script src="../品优购/shopping/js/animate.js"></script>
</head>
<body>
<div class="slider">
<div class="slider-bar">
<ul>
<li><img src="./img/02374b8e81521da118ef60fc481de725.jpeg" alt=""></li>
<li><img src="./img/c07e7a7d592b9de571eb86b45f13531b.jpeg" alt=""></li>
<li><img src="./img/d551f24bbd0adb87008c239830f3bb9a.jpeg" alt=""></li>
</ul>
</div>
<div class="front">
<span></span>
</div>
<div class="next">
<span></span>
</div>
<div class="content">
<ol>
</ol>
</div>
</div>
</body>
<script>
var front = document.querySelector('.front').children[0];
var next = document.querySelector('.next').children[0];
var slb = document.querySelector('.slider-bar');
var slider = document.querySelector('.slider');
var ul = slb.querySelector('ul');
var ol = document.querySelector('ol');
var focusWith = slider.offsetWidth;
var timer = null;
var flag = true;
// 鼠标经过显示左右按钮
slider.addEventListener('mouseover',function(){
front.style.display = 'block';
next.style.display = 'block';
// 停止计时器
clearInterval(timer)
})
// 鼠标离开隐藏按钮
slider.addEventListener('mouseout',function(){
front.style.display = 'none';
next.style.display = 'none';
// 开启定时器
timer = setInterval(function(){
// 手动调用点击事件
next.click();
},1000)
})
// 动态添加小圆圈
for(var i = 0;i<ul.children.length;i++)
{
var li = document.createElement('li');
// 记录当前小圆圈的索引号
li.setAttribute('index',i);
ol.appendChild(li);
// 创建li的时候就给其绑定点击事件
li.addEventListener('click',function(){
for(var i = 0;i<ol.children.length;i++)
{
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
// 当我们点击了某个小li,把当前li的索引号赋值给num
num = index;
// 当我们点击了某个小li,把当前li的索引号赋值给circle
circle = index;
// 点击小圆圈,移动图片
// 图片移动距离,就是小圆圈的索引号乘以图片的宽度 注意是负值
animate(slb,-index*focusWith)
})
}
// 把ol里面的第一个小圆点设置类名为current
ol.children[0].className = 'current';
// 克隆第一张图片,放到ul盒子最后面
var first = ul.children[0].cloneNode(true);//加true表示深克隆,它本身及其子元素都会被复制。
ul.appendChild(first);
var num = 0;
var circle = 0;
// 点击左侧按钮,图片滚动一张
front.addEventListener('click',function(){
if(flag)
{
flag= false;
if(num == 0)
{ num = ul.children.length-1;
slb.style.left = -num*focusWith+'px';
}
num--;
animate(slb,-num*focusWith,function(){
flag = true;
})
circle--;
if(circle < 0)
{
circle = ol.children.length-1;
}
// 给小圆圈添加样式
for(var i =0;i<ol.children.length;i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
})
// 点击右侧按钮,图片滚动一张
next.addEventListener('click',function(){
if(flag)
{ // 关闭节流阀
flag = false;
num++;
// 如果走到了最后复制的一张图片，设置滚动盒子的left值为0
if(num==ul.children.length-1)
{
slb.style.left = 0;
num=0;
}
animate(slb,-num*focusWith,function(){
flag = true;
})
circle++;
// 如果circle等于圆圈的个数,使circle重新赋值为0
if(circle == ol.children.length)
{
circle = 0;
}
for(var i =0;i<ol.children.length;i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
})
// 自动播放
var timer = setInterval(function(){
// 手动调用点击事件
next.click();
},1000)
</script>
</html>
以上是关于轮播图案例的主要内容，如果未能解决你的问题，请参考以下文章