如何用js来实现渐变的轮播，而不是滑动轮播
程序员文章站
2022-06-01 15:53:06
...
如何用js来实现渐变的轮播，而不是滑动轮播
其实要实现渐变轮播的方法有很多，有复杂的，也有简单的。而接下来要讲的渐变轮播的方法是比较简单的一种，主要是通过关键帧来设置透明效果，再用js来实现轮播。
html部分：
<div class="showbox" id="showbox">
<ul class="imgbox" id="imgbox">
<li>
<img src="images/_20181219072339.jpg" alt="" class="show" />
</li>
<li>
<img src="images/timg.jpg" alt="" />
</li>
<li>
<img src="images/d1ae8342552d7bca8631be5b33b2abe8.jpg" alt="" />
</li>
<li>
<img src="images/u=1433407092,2344933932&fm=26&gp=0.jpg" alt="" />
</li>
<li>
<img src="images/1dfd70a13ab419a0b7a06ba96d65bf3c.jpg" alt="" />
</li>
</ul>
<ul class="buttons" id="buttons">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="prev" id="prev"></div>
<div class="next" id="next"></div>
</div>
css部分：
*{
margin: 0;
padding: 0;
}
/* 去掉ul，li标签的默认样式 */
ul,li{
list-style: none;
}
/* 设置好盒子的大小，调整好位置*/
.showbox{
width: 600px;
height:350px;
border: 10px solid #5CB0ED;
margin: 20px auto;
position: relative;
}
.imgbox img{
width: 100%;
height: 100%;
position: absolute;
/* opacity 属性设置元素的不透明级别。*/
opacity:0;
/* animation-timing-function 规定动画的速度曲线。linear 为匀速*/
/* animation-timing-function: linear;*/
/* animation-duration 定义动画完成一个周期所需要的时间，以秒或毫秒计。*/
/* animation-duration:0.5s;*/
/* animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）*/
/* animation-fill-mode:forwards;*/
/* 下面这条代码是上面的三条代码的简写,这样会省了很多代码*/
animation:0.5s linear forwards;
}
.showbox img.show{
/* animation-name 属性为 @keyframes 动画规定名称。*/
animation-name: discover;
}
.showbox img.unshow{
animation-name: disapper;
}
/* 移动按钮的位置*/
.showbox .buttons{
position: absolute;
bottom: 10px;
left: 240px;
}
.showbox .buttons li{
float: left;
width: 12px;
height: 12px;
background:rgba(255,255,255,0.7);
margin-right: 8px;
border-radius: 50%;
cursor: pointer;
}
.buttons li.on{
background: orange;
}
/* 用关键帧设置透明效果由0.8到1 */
@keyframes discover{
from{
opacity:0;
}
to{
opacity:1;
}
}
/* 用关键帧设置透明效果由1到0.8 */
@keyframes disappear{
from{
opacity:1;
}
to{
opacity:0;
}
}
.prev,.next{
width:25px;
height:35px;
margin-top: 160px;
cursor: pointer;
display: none;
}
.prev{
position: fixed;
margin-left:8px;
background:url(images/camera_skins.png);
}
.next{
position: fixed;
margin-left:36%;
background:url(images/camera_skins.png) -43px 0px;
}
js部分：
window.onload = function(){
//获取变量
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var showbox = document.getElementById("showbox");
var imgs = imgbox.getElementsByTagName("img");
var list = buttons.getElementsByTagName("li");
var timer = null;
var index = 0;
// 设置自动播放函数
timer = setInterval( autoPlay,3000 );
//鼠标滑过容器停止播放,左右箭头出现
showbox.onmouseover = function(){
prev.style.display = "block";
next.style.display = "block";
clearInterval(timer);
}
// 鼠标离开容器时继续播放下一张,左右箭头消失
showbox.onmouseout = function(){
prev.style.display = "none";
next.style.display = "none";
timer = setInterval( autoPlay,3000 );
}
// 实现自动轮播
function autoPlay(){
index++;
if( index>=list.length ){
index = 0;
}
picture(index);
}
// 设置点击左边箭头时，图片和按钮随着变化
prev.onclick = function(){
index--;
if(index<0){
index=4;
}
picture(index);
};
// 设置点击右边箭头时，图片和按钮随着变化
next.onclick = function(){
index++;
if(index>4){
index=0;
}
picture(index);
}
// 遍历所有圆点实现闪过切换至对应的图片,初始化并给每个按钮添加鼠标点击功能
for( var i =0; i<list.length; i++ ){
(function(j){//自执行函数，获取i
list[j].onclick = function(){
picture(j);
index = j;
}
})(i);/*为什么要在最后加(i)? 这是保留i值的方法，
通常情况下，因为一些效果我们需要获取到for循环中的i的值，
但是往往拿到的都是最后一个i的值，所以通过这种方法来获取i值。*/
}
// 根据按钮显示当前的图片
function picture(offset){
for( var i= 0;i<list.length ;i++ ){
imgs[i].className = "unshow";
list[i].className="";
}
imgs[offset].className = "show";
list[offset].className = "on";
}
};
效果图：
完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何用js来实现渐变的轮播，而不是滑动轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 去掉ul，li标签的默认样式 */
ul,li{
list-style: none;
}
/* 设置好盒子的大小，调整好位置*/
.showbox{
width: 600px;
height:350px;
border: 10px solid #5CB0ED;
margin: 20px auto;
position: relative;
}
.imgbox img{
width: 100%;
height: 100%;
position: absolute;
/* opacity 属性设置元素的不透明级别。*/
opacity:0;
/* animation-timing-function 规定动画的速度曲线。linear 为匀速*/
/* animation-timing-function: linear;*/
/* animation-duration 定义动画完成一个周期所需要的时间，以秒或毫秒计。*/
/* animation-duration:0.5s;*/
/* animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见。
// forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）*/
/* animation-fill-mode:forwards;*/
/* 下面这条代码是上面的三条代码的简写,这样会省了很多代码*/
animation:0.5s linear forwards;
}
.showbox img.show{
/* animation-name 属性为 @keyframes 动画规定名称。*/
animation-name: discover;
}
.showbox img.unshow{
animation-name: disapper;
}
/* 移动按钮的位置*/
.showbox .buttons{
position: absolute;
bottom: 10px;
left: 240px;
}
.showbox .buttons li{
float: left;
width: 12px;
height: 12px;
background:rgba(255,255,255,0.7);
margin-right: 8px;
border-radius: 50%;
cursor: pointer;
}
.buttons li.on{
background: orange;
}
/* 用关键帧设置透明效果由0.8到1 */
@keyframes discover{
from{
opacity:0;
}
to{
opacity:1;
}
}
/* 用关键帧设置透明效果由1到0.8 */
@keyframes disappear{
from{
opacity:1;
}
to{
opacity:0;
}
}
.prev,.next{
width:25px;
height:35px;
margin-top: 160px;
cursor: pointer;
display: none;
}
.prev{
position: fixed;
margin-left:8px;
background: #EB5558 url(../images/123.png);
/* background: #EB5558;*/
}
.next{
position: fixed;
margin-left:36%;
background: #EB5558 url(../images/camera_skins.png) -43px 0;
/* background: #EB5558;*/
}
</style>
</head>
<body>
<div class="showbox" id="showbox">
<ul class="imgbox" id="imgbox">
<li>
<img src="images/_20181219072339.jpg" alt="" class="show" />
</li>
<li>
<img src="images/timg.jpg" alt="" />
</li>
<li>
<img src="images/1dfd70a13ab419a0b7a06ba96d65bf3c.jpg" alt="" />
</li>
<li>
<img src="images/u=1433407092,2344933932&fm=26&gp=0.jpg" alt="" />
</li>
<li>
<img src="images/d1ae8342552d7bca8631be5b33b2abe8.jpg" alt="" />
</li>
</ul>
<ul class="buttons" id="buttons">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="prev" id="prev"></div>
<div class="next" id="next"></div>
</div>
<script>
window.onload = function(){
//获取变量
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var showbox = document.getElementById("showbox");
var imgs = imgbox.getElementsByTagName("img");
var list = buttons.getElementsByTagName("li");
var timer = null;
var index = 0;
// 设置自动播放函数
timer = setInterval( autoPlay,3000 );
//鼠标滑过容器停止播放,左右箭头出现
showbox.onmouseover = function(){
prev.style.display = "block";
next.style.display = "block";
clearInterval(timer);
}
// 鼠标离开容器时继续播放下一张,左右箭头消失
showbox.onmouseout = function(){
prev.style.display = "none";
next.style.display = "none";
timer = setInterval( autoPlay,3000 );
}
// 实现自动轮播
function autoPlay(){
index++;
if( index>=list.length ){
index = 0;
}
picture(index);
}
// 设置点击左边箭头时，图片和按钮随着变化
prev.onclick = function(){
index--;
if(index<0){
index=4;
}
picture(index);
};
// 设置点击右边箭头时，图片和按钮随着变化
next.onclick = function(){
index++;
if(index>4){
index=0;
}
picture(index);
}
// 遍历所有圆点实现闪过切换至对应的图片,初始化并给每个按钮添加鼠标点击功能
for( var i =0; i<list.length; i++ ){
(function(j){//自执行函数，获取i
list[j].onclick = function(){
picture(j);
index = j;
}
})(i);//为什么要在最后加(i)? 这是保留i值的方法，
//通常情况下，因为一些效果我们需要获取到for循环中的i的值，
//但是往往拿到的都是最后一个i的值，所以通过这种方法来获取i值。
}
// 根据按钮显示当前的图片
function picture(offset){
for( var i= 0;i<list.length ;i++ ){
imgs[i].className = "unshow";
list[i].className="";
}
imgs[offset].className = "show";
list[offset].className = "on";
}
};
</script>
</body>
</html>