js 水平轮播和透明度轮播的实现
js 水平轮播和透明度轮播的实现
不愿意做鱼的小鲸鱼
发布于 2022-08-24 13:57:42
发布于 2022-08-24 13:57:42
代码可运行
运行总次数：0
代码可运行
透明度轮播
主要思路：透明度轮播相对水平轮播的实现更简单一点。首先在HTML里建一个绝对定位的div盒子，然后在这个div盒子里用列表的方式插入四张图片，设置为绝对定位，并且块排列；接着在js中实现动态效果，透明轮播的实现就是将前一张图片的透明度设置为0，需要轮播的那一张图片的透明度设置为1，在js的对象中实现，最后实现手动点击轮播，子弹轮播，自动轮播。
本次轮播实现借用了上次animate的函数封装 animate.js
animate封装代码如下
//返回el对象css样式中的property属性值
function getStyle(el, property) {
if (getComputedStyle) {
return getComputedStyle(el)[property];
} else {
return el.currentStyle[property];
}
}
/* 对el对象css样式中的属性值进行更改，更改的内容在properties里面，properties是一个
属性对象数组，对每一个properties里的每一个对象值进行修改，并且产生由快到慢的动画
效果变化 */
function animate(el, properties) {
clearInterval(el.timeId);
//产生动态效果的方法
el.timeId = setInterval(function() {
for (var property in properties) {
var current;
var target = properties[property];
//分为两种参数，一种是透明度，范围是0到1的变化
if (property == "opacity") {
current = Math.round(getStyle(el, "opacity") * 100);
}
//另一种是像素的变化，如width , height 等
else {
current = parseInt(getStyle(el, property));
}
//属性的变化速度（由快到慢）
var speed = (target - current) / 30;
//ceil向上取整 floor向下取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//重新设置el对象 css中的样式
if (property == "opacity") {
el.style.opacity = (current + speed) / 100;
} else {
el.style[property] = current + speed + "px";
}
}
}, 20);
}透明度轮播实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin :0;
padding: 0;
}
ul{
list-style: none;
}
.slider{
width: 400px;
height: 500px;
border: 5px solid #00FFFF;
position: relative;
top: 20px;
margin: 0px auto;
}
.slider .list .item{
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
}
.slider .list .item:first-child{
opacity: 1;
}
.slider .list .item img{
width: 400px;
height: 500px;
display: block;
}
.slider .prev, .slider .next{
position: absolute;
top: 220px;
}
.slider .next{
right: 0;
}
.slider .pagination{
position: absolute;
top: 450px;
left: 150px;
}
.slider .pagination .bullet{
width: 20px;
height: 20px;
background-color: lightgreen;
margin-left: 5px;
float: left;
border: 2px solid yellow;
cursor: pointer;/*鼠标移动到上面时,变成手 */
color: white;
line-height: 20px;
text-align: center;
}
.slider .pagination .bullet.focus{
background-color: hotpink;
}
</style>
</head>
<body>
<div class="slider">
<!-- 图片列表 -->
<ul class="list">
<li class="item"><img src="./image/a.jpg" alt=""></li>
<li class="item"><img src="./image/b.jpg" alt=""></li>
<li class="item"><img src="./image/c.jpg" alt=""></li>
<li class="item"><img src="./image/d.jpg" alt=""></li>
</ul>
<button type="button" class="prev">prev</button>
<button type="button" class="next">next</button>
<!-- 子弹列表 -->
<ul class="pagination">
<li class="bullet focus">1</li>
<li class="bullet">2</li>
<li class="bullet">3</li>
<li class="bullet">4</li>
</ul>
</div>
<script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var nextIndex,prevIndex;
var len;
var id;
init();
// 构造函数
function init(){
prevIndex = nextIndex=0;
// 获取图片对象的数组
len = document.querySelectorAll(".list .item").length;
//点击prev向前轮播
document.querySelector(".prev").onclick=function(){
sliderPrev();
}
//点击next向后轮播
document.querySelector(".next").onclick=function(){
sliderNext();
}
//获取子弹,对每一个子弹进行检测
var bullets = document.querySelectorAll(".slider .pagination .bullet");
for(var i=0;i<bullets.length;i++){
bullets[i].index=i;
bullets[i].onclick = function(){
prevIndex = nextIndex;
nextIndex = this.index;
sliderTo(prevIndex,nextIndex);
}
}
//自动轮播
var silder = document.querySelector(".slider");
//鼠标移动到图片上是停止轮播
silder.onmouseover = function(){
stop();
}
//鼠标离开图片时又开始轮播
silder.onmouseout = function(){
auto();
}
auto();
}
//向前轮播的方法
function sliderPrev(){
prevIndex = nextIndex;
nextIndex--;
if(nextIndex==-1){
nextIndex=len-1;
}
sliderTo(prevIndex,nextIndex);
}
//向后轮播的方法
function sliderNext(){
prevIndex = nextIndex;
nextIndex++;
if(nextIndex==len){
nextIndex=0;
}
sliderTo(prevIndex,nextIndex);
}
//轮播的实现方法
function sliderTo(prev,next){
var lis = document.querySelectorAll(".list .item");
//实现子弹轮播(交换焦点className)
var buttons = document.querySelectorAll(".slider .pagination .bullet");
buttons[prev].className = "bullet";
buttons[next].className = "bullet focus";
//调用animate方法实现透明度的转换
animate(lis[prev],{opacity:0});
animate(lis[next],{opacity:100});
}
//自动轮播
function auto(){
clearInterval(id);
id = setInterval(function(){
sliderNext();
},2000)
}
//停止轮播
function stop(){
clearInterval(id);
}
</script>
</body>
</html>实现效果
水平轮播
主要思路：水平轮播相对复杂一点，需要计算好图片的排列长度，需要用到一点点小技巧， 怎么来实现最后一张图片轮播后会直接返回到第一张图片？ 将第一张图片获取,放在最后一张的后面,将最后一张图片获取放在第一张图片前面，生成了新的图片列表，当运动到最后一张图片（实际上是第一张）时，下一张要出现的图片直接是第二张图片；当运动到第一张图片（实际上是最后一张）时，前一张要出现的图片直接是倒数第三张。 其他的实现方法基本和透明度轮播类似，但是轮播是改变的是距离left 轮播也应用了封装的animate
水平轮播实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.slider {
width: 400px;
height: 500px;
border: 5px solid #00FFFF;
position: relative;
top: 20px;
margin: 0px auto;
overflow: hidden;
}
.slider .list {
position: absolute;
}
.slider .list .item {
width: 400px;
height: 600px;
float: left;
}
.slider .list .item img {
width: 400px;
height: 600px;
display: block;
}
.slider .prev {
position: absolute;
top: 220px;
left: 0;
}
.slider .next {
position: absolute;
top: 220px;
right: 0;
}
.slider .pagination {
position: absolute;
top: 450px;
right: 50px;
}
.slider .pagination .bullet {
width: 20px;
height: 20px;
background-color: lightgreen;
margin-left: 5px;
float: left;
z-index: 999;
border: 2px solid yellow;
cursor: pointer;
/*鼠标移动到上面时,变成手 */
color: white;
line-height: 20px;
text-align: center;
}
.focus {
background-color: hotpink !important;
}
</style>
</head>
<body>
<div class="slider">
<ul class="list">
<li class="item"><img src="./image/a1.jpg" /></li>
<li class="item"><img src="./image/a2.jpg" /></li>
<li class="item"><img src="./image/a3.jpg" /></li>
<li class="item"><img src="./image/a4.jpg" /></li>
<li class="item"><img src="./image/a5.jpg" /></li>
</ul>
<button type="button" class="prev">prev</button>
<button type="button" class="next">next</button>
<ul class="pagination">
<li class="bullet focus">1</li>
<li class="bullet">2</li>
<li class="bullet">3</li>
<li class="bullet">4</li>
<li class="bullet">5</li>
</ul>
</div>
<script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function() {
var currentIndex;
var lis;
var len;
var id;
var liwidth;
init();
//构造函数
function init() {
//将第一张图片获取,放在最后一张的后面,将最后一张图片获取放在第一张图片前面
currentIndex = 1;
var li_1 = document.querySelector(".slider .list .item:first-of-type");
var copy_1 = li_1.cloneNode(true);
var li_last = document.querySelector(".slider .list .item:last-of-type");
var copy_last = li_last.cloneNode(true);
var list = document.querySelector(".slider .list");
list.appendChild(copy_1);
list.insertBefore(copy_last, li_1);
lis = document.querySelectorAll(".list .item");
liwidth = lis[0].offsetWidth;
len = lis.length;
list.style.width = liwidth * len + "px";
list.style.left = -liwidth + "px";
//点击prev向前轮播
document.querySelector(".prev").onclick = function() {
sliderPrev();
}
//点击next向后轮播
document.querySelector(".next").onclick = function() {
sliderNext();
}
//子弹轮播
var bullets = document.querySelectorAll(".slider .pagination .bullet");
for (var i = 0; i < bullets.length; i++) {
bullets[i].index = i;
bullets[i].onclick = function() {
currentIndex = this.index + 1;
sliderTo(currentIndex);
}
}
//自动轮播实现
var silder = document.querySelector(".slider");
silder.onmouseover = function(){
stop();
}
silder.onmouseout = function(){
auto();
}
auto();
}
//向前轮播的方法
function sliderPrev() {
currentIndex--;
sliderTo(currentIndex);
}
//向后轮播的方法
function sliderNext() {
currentIndex++;
sliderTo(currentIndex);
}
//轮播的实现方法
function sliderTo(index) {
var list = document.querySelector(".slider .list");
//图片移动的关键代码
if (index == len) {
currentIndex = index = 2;
list.style.left = -liwidth + "px";
}
if (index == -1) {
currentIndex = index = len - 3;
list.style.left = -(len - 2) * liwidth + "px";
}
//子弹焦点
var focusIndex;
var bullets = document.querySelectorAll(".pagination .bullet");
if (index == 0) {
focusIndex = bullets.length - 1;
} else if (index == len - 1) {
focusIndex = 0;
} else {
focusIndex = index - 1;
}
document.querySelector(".focus").className = "bullet";
bullets[focusIndex].className = "bullet focus";
//获取要移动到的目标位置
var left = -index * liwidth;
animate(list, {
left: left
});
}
//自动轮播
function auto() {
clearInterval(id);
id = setInterval(function(){
sliderNext()
},2000);
}
//停止轮播
function stop() {
clearInterval(id);
}
})()
</script>
</body>
</html>实现效果
本次轮播实现的素材图片
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
