如何实现前端页面轮播？(三种方式)

本文链接： https://blog.csdn.net/hdp134793/article/details/91412101

夜深了，只听见时钟的嘀嗒声和键盘的敲打声，想必这个时候只剩下程序员的工作了。好久没更新了，难得有空来写写自己这些天的所学。
下面着重介绍几种方式：
先给大家看个效果图
在这里插入图片描述
方式3：原生js实现（相对初学者更适用）
相对来说更适合新学的人来实现
主要实现原理：
Div:

<img src="img/3_1.png" id="lunbo" alt="" width="400" height="220" />


var jx_speed = 5000; //轮播图片时间设置
var jxlunbo = document.getElementById("lunbo");
var num = 1;
var time1 = setInterval(getlunbo, jx_speed);

function getlunbo() {
num++;
if (num == 3) {
num = 1;
}
jxlunbo.src = "img/3_" + num + ".png";
}

其中主要实现的方法是通过改变img标签中的src

方式2：jquery实现左右翻动，下方有悬浮按钮的情况
Div

<div class="img_part" id="box">
<ul>
<li>
<img src="img/2_1.jpg" alt="" width="400" height="220" />
</li>
<li style="display:none">
<img src="img/2_2.jpg" alt="" width="400" height="220" />
</li>
<li style="display:none">
<img src="img/2_3.jpg" alt="" width="400" height="220" />
</li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
<div class="left left2">
< </div> <div class="right right2">
>
</div>
</div>

function func_1(){
var interval = setInterval(function(){
right();
},4000);
}
function func_2(){
var index =0;
var timer = setInterval(function(){
index = (index == 2) ? 0 : index + 1; 
$("#box ul li").hide().eq(index).show();
$('#box ol li').eq(index).addClass('current').siblings().removeClass('current');
}, 4000);
$("#box ol li").hover(function(){
var index = $(this).index();
$("#box ul li").eq(index).show().siblings().hide();
$(this).addClass('current').siblings().removeClass('current');
})
}

代码核心实现在于找到相关元素然后调用该方法：.addClass(‘current’).siblings()

方式1，类似翻动相册一样的效果(中间放大)
Div

<div class="img_part">
<div class="img_1_1"></div>
<div class="img_1_2"></div>
<div class="img_1_3"></div>
</div>
<div class="text_detail">实例2</div>
<div onclick="left()" class="left">
<</div> <div onclick="right()" class="right">>
</div>

function left() {
debugger;
var curl = [];
var tlarr = [];
for (var i = 0; i < 3; i++) {
var k = i + 1;
if (k >= 3) {
k = k - 3;
}
curl[i] = imgurl[k];
tlarr[i] = titlearr[k];
$(".img_1_" + (i+1)).css({
"background-image": "url('" + imgurl[k] + "')",
"background-size": "100% 100%"
});
}
debugger;
imgurl = curl;
titlearr = tlarr;
$(".text_detail").html(titlearr[1]);
debugger;
}

function right() {
var curl = [];
var tlarr = [];
for (var i = 0; i < 3; i++) {
var k = i - 1;
if (k < 0) {
k = k + 3;
}
curl[i] = imgurl[k];
tlarr[i] = titlearr[k];
$(".img_1_" + (i + 1)).css({
"background-image": "url('" + imgurl[k] + "')",
"background-size": "100% 100%"
});
}
imgurl = curl;
titlearr = tlarr;

$(".text_detail").html(titlearr[1]);
debugger;
}

实现原理主要是改变其background-images,存放在一个数组里面遍历。

主要的代码已经贴出，有什么不懂的欢迎大家留言，原创代码，希望大家喜欢。

如何实现前端页面轮播？(三种方式)

猜你喜欢