【学习总结】js-轮播效果

最新推荐文章于 2022-08-02 22:38:31 发布

咕噜咕噜的车轮向前

最新推荐文章于 2022-08-02 22:38:31 发布

阅读量1k

点赞数 3

分类专栏：学习贴

本文链接：https://blog.csdn.net/zhongmei121/article/details/80491918

版权

学习贴专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、我思考轮播效果实现原理

主要用到position：absolute、overflow: hidden、setInterval(）

原理：父块和子块都使用绝对定位position：absolute，父块需要加上宽高参数和overflow: hidden（相当于父块提供一个窗口显示子块内容，overflow：hidden裁剪了宽高外的内容，也就是挡住了窗口外的东西），子块float一排，通过js控制位置，点击一次排位一次，实现有序的轮播显示，同时不点击的时候也要自动轮播，使用setInterval("函数名",时间)函数每隔一段时间轮播图片一张。（代码最后）

2、网上轮播插件

（1）swiper.js插件，下载地址：http://www.swiper.com.cn/

（2）Slider.js插件

（3）Carousel插件，Bootstrap轮播插件，可以引用Carousel.js引入或者引用 bootstrap.js引入

（4）还有很多炫酷的插件，用插件能省很多事，效果又好惹.........

3、自己尝试写的HTML文件代码，需要引入jquery库，可以实现简单的轮播效果；

<!DOCTYPE html>

<html>
<head>
<title>轮播图</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".items>div:nth-child(1)").css({"left":"0px"});
$(".items>div:nth-child(2)").css({"left":"500px"});
$(".items>div:nth-child(3)").css({"left":"1000px"});
$(".items>div:nth-child(4)").css({"left":"1500px"});
setInterval("act()",3000);//一张停留3秒
});
var NUM=1;
function B2Click(num,len){//点击“#”图片的变化
for(var i=1;i<len+1;i++){
var LeftPx=-(num-i)*500;
var Str=LeftPx+"px";
$(".items>div:nth-child("+i+")").css({"left":Str});
}
NUM=num;
}
function pre(len){//点击“《” ，上一张
if(NUM==1){return;}
else{
NUM=NUM-1;
B2Click(NUM,len);
}
}
function nex(len){//点击“》”，下一张
if(NUM==4){return;}
else{
NUM=NUM+1;
B2Click(NUM,len);
}
}

function act(){//鼠标不在“.items”区域时自动播放
B2Click(NUM,"4");
if(NUM<4) NUM++;
else NUM=1;
}
</script>
<style type="text/css">
.items {
height:500px;
width:500px;
position: absolute;
overflow: hidden;
}
.items div{
position: absolute;
float:left;
}
.items div img{
height:500px;
width:500px;
}

.BtSpan1{
width:500px;
position: absolute;
top:250px;
z-index: 2;
color:#fff;
}
.pre{
float:left;
cursor:pointer;
}
.nex{
float:right;
cursor:pointer;
}
.BtSpan2{
width:500px;
text-align:center;
position: absolute;
top:450px;
z-index: 2;
color:#fff;
}
.BtSpan2 span{
display:inline-block;
width:40px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="items">
<div class="item"><img src="image/1.jpg"></div>
<div class="item"><img src="image/2.jpg"></div>
<div class="item"><img src="image/3.jpg"></div>
<div class="item"><img src="image/4.jpg"></div>
</div>
<div class="BtSpan1">
<span class="pre" οnclick="pre('4');">《</span>
<span class="nex" οnclick="nex('4');">》</span>
</div>
<div class="BtSpan2">
<span class="BtSpan2_1" οnclick="B2Click('1','4');">#</span>
<span class="BtSpan2_2" οnclick="B2Click('2','4');">#</span>
<span class="BtSpan2_3" οnclick="B2Click('3','4');">#</span>
<span class="BtSpan2_4" οnclick="B2Click('4','4');">#</span>
</div>
</body>

</html>