原生JS实现轮播图
-
效果
-
方法
- 显示5张图，但因为在显示最后一张图是如果直接改变位置或导致视觉效果很差，所以需要在第一张图与最后一张图添加一张图，也就是一共7张图
- 自动轮播图使用定时器每隔一定时间执行，这里的时间要大于每次切换图片的时间
- 要定义轮播的状态isMove，每次移动时为true,移动完后false,在true状态下，轮播图是不能再次执行切换效果，这是防止点击过快轮播图出现空白以及各个功能之间的冲突
- 当图片滚动时，下面的小圆点也要对应选中实现这个效果需要定义一个index进行对应选中（当然要进行边界判定）
- 代码
<!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>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.swiper-wraper{
width: 400px;
height: 200px;
position: relative;
margin: 100px auto;
}
.swiper-wraper .swiper{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.swiper-wraper .swiper ul{
width: 2800px;
height: 200px;
position: absolute;
top: 0;
/*这个-400px很重要，这样才是选中第一张图片*/
left: -400px;
display: flex;
}
.swiper-wraper .swiper ul li{
list-style: none;
width: 400px;
height: 200px;
text-align: center;
line-height: 200px;
}
.swiper-wraper .swiper .prev{
width: 20px;
height: 50px;
background-color:gray;
opacity: 0.5;
text-align: center;
line-height: 50px;
position: absolute;
top: 70px;
left: 0;
cursor: pointer;
}
.swiper-wraper .swiper .next{
width: 20px;
height: 50px;
background-color:gray;
opacity: 0.5;
text-align: center;
line-height: 50px;
position: absolute;
top: 70px;
right: 0;
cursor: pointer;
}
.swiper-wraper .swiper ol{
width: 200px;
height: 20px;
display: flex;
justify-content: space-evenly;
position: absolute;
bottom: 10px;
left: 100px;
}
.swiper-wraper .swiper ol li{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
list-style: none;
cursor: pointer;
}
.swiper-wraper .swiper ol .active{
background-color: palevioletred;
}
</style>
</head>
<body>
<div class="swiper-wraper">
<!-- 传播容器 -->
<div class="swiper">
<ul>
/*添加最后一张图在这，以便平滑移动*/
<li style="background-color: pink">元素5</li>
<li style="background-color: antiquewhite;">元素1</li>
<li style="background-color: aqua;">元素2</li>
<li style="background-color: bisque;">元素3</li>
<li style="background-color: blueviolet;">元素4</li>
<li style="background-color: pink">元素5</li>
/*添加第一张图在这，以便平滑移动*/
<li style="background-color: antiquewhite;">元素1</li>
</ul>
<div class="prev"><</div>
<div class="next">></div>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script>
let ulEle=document.querySelector('.swiper ul')
let prevEle=document.querySelector('.swiper .prev')
let nextEle=document.querySelector('.swiper .next')
let olsEle=document.querySelectorAll('ol li')
//表示当前选中是哪个分页的小圆点
let index=0
//判定轮播图是否已经在移动
let isMove=false
//自动轮播
//计时器实现自动轮播效果，注意计时器包函数，并且时间要大于轮播图执行时间
setInterval(function(){
if(!isMove){
//如果轮播图没动，才执行
if(++index>4){
//判定小圆点是否是最后一个了，如果是，换成第一个
index=0
}
//执行分页圆点选中函数
onPageNation()
//执行运动函数
move(ulEle,{
offset:-400,
time:1000,
rate:30
})
}
},2000)
//点击右边切换按钮
prevEle.onclick=function(){
//判定轮播图状态
if(!isMove){
if(index==0){
//判定小圆点是否是第一个了，如果是，换成最后一个
index=4
}else{
每次移动小圆点位置参数减一
index--
}
//执行分页圆点选中函数
onPageNation()
//执行运动函数，注意这儿offset是正值，表示图片向左移动
move(ulEle,{
offset:400,
time:1000,
rate:30
})
}
}
//点击左边切换按钮
nextEle.onclick=function(){
if(!isMove){
//判定轮播图状态
if(index==4){
//如果是 //判定小圆点是否是最后一个了，如果是，换成第一个
index=0
}else{
//每次点击小圆点位置参数加一
index++
}
//执行分页圆点选中函数
onPageNation()
//执行运动函数
move(ulEle,{
offset:-400,
time:1000,
rate:30
})
}
}
//定义分页圆点运动
function onPageNation(){
for(let i=0;i<olsEle.length;i++){
//清除所有样式
olsEle[i].classList.remove('active')
}
//拿到分页位置参数，按照参数添加样式
olsEle[index].classList.add('active')
}
//定义分页圆点点击事件
function clickPaging(){
for(let i=0;i<olsEle.length;i++){
//点击时执行
olsEle[i].onclick=function(){
//判定状态
if(!isMove){
//拿到要移动的距离倍数，因为不一定是挨着点击
//这个倍数=现在分页位置状态参数—现在点击的是第几个圆点
let numDistance=index-i
//执行运动函数，offset等于倍数*400，也就是现在相差几个圆点位置，他就移动几次
move(ulEle,{
offset:400*numDistance,
time:1000,
rate:30
})
//点击的是哪个需要把对应的值传给分页位置参数
index=i
//执行分页函数
onPageNation()
}
}
}
}
clickPaging()
//运动函数
function move(ele,options={
offset:400,
time:1000,
rate:30
}){
isMove=true
ele.style.left=window.getComputedStyle(ele).left
let offset=options.offset//移动距离
let time=options.time//移动时间
let rate=options.rate//移动速度
let distance=offset*rate/time
let goal=offset+parseInt(ele.style.left)
let timer=setInterval(function(){
if(parseInt(ele.style.left)==goal||Math.abs( Math.abs(goal) -Math.abs(parseInt(ele.style.left))) <Math.abs(distance) ){
ele.style.left=goal+'px'
clearInterval(timer)
if(parseInt(ele.style.left)==-2400){
ele.style.left=-400+'px'
}
if(parseInt(ele.style.left)==0){
ele.style.left=-2000+'px'
}
isMove=false
}else{
ele.style.left=parseInt(ele.style.left)+ distance+'px'
}
},rate)
}
</script>
</body>
</html>
利用插件Swiper实现轮播图
-
中文官网地址https://swiper.com.cn/
-
效果
-
方法
- 需要引入官网的CSS文件与JS文件
- 具体查看官网说明
- 代码
<!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>Document</title>
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<style>
.swiper {
width: 600px;
height: 300px;
}
.swiper img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://t7.baidu.com/it/u=2961459243,2146986594&fm=193&f=GIF"></div>
<div class="swiper-slide"><img src="https://t7.baidu.com/it/u=1883040060,1157514614&fm=193&f=GIF"></div>
<div class="swiper-slide"><img src="https://t7.baidu.com/it/u=3140866878,3539498902&fm=193&f=GIF"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="js/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
grabCursor : true,
effect: 'cube',
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
</body>
</html>
利用Lax.js实现滚动动画效果
-
地址http://errornoerror.com/question/10556330043853113970/
-
效果
-
代码
<!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>Document</title>
<style>
*{padding: 0;margin: 0;}
.div1{
width: 200px;
height: 200px;
background-color:aquamarine;
margin: 100px auto;
}
.div2{
width: 200px;
height: 200px;
background-color:aquamarine;
margin: 100px auto;
}
.div3{
width: 200px;
height: 200px;
background-color:aquamarine;
margin: 100px auto;
}
.div4{
width: 200px;
height: 200px;
background-color:aquamarine;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<script src="./node_modules/lax.js/lib/lax.min.js"></script>
<script>
window.onload=function(){
lax.init()
lax.addDriver('scrollY',function(){
return window.scrollY
})
lax.addElements('.div1',{
scrollY:{
translateX:[
["elInY", "elCenterY", "elOutY"],
['0', '0', '800'],
],
opacity: [
[100,0]
]
}
})
lax.addElements('.div2',{
scrollY:{
translateX:[
["elInY", "elCenterY", "elOutY"],
['0', '200', '-400']
]
}
})
lax.addElements('.div3',{
scrollY:{
translateX:[
["elInY", "elCenterY", "elOutY"],
['0', '0', '800'],
]
}
})
lax.addElements('.div4',{
scrollY:{
translateX:[
["elInY", "elCenterY", "elOutY"],
['0', '0', '400']
]
}
})
}
</script>
</body>
</html>
