无缝滚动和轮播图的实现

最新推荐文章于 2021-09-19 13:41:38 发布

七~哥

最新推荐文章于 2021-09-19 13:41:38 发布

阅读量808

点赞数

本文链接：https://blog.youkuaiyun.com/wqxiaongqi/article/details/80161909

版权

公共部分

HTML部分：

</div>

CSS部分：

*{
padding: 0px;margin: 0px;text-decoration: none;
}
/*设置窗体大小*/
.window{
width: 520px;height:300px;border: 2px solid white;margin: auto;z-index: 222;overflow: hidden;
}
/*依据定位实现,改变left值*/
.container{ /*主要作用就是定位*/
width: 100%;height: 100%;position: relative;
}
/*滚动的承载视图容器*/
.scroll{
width: 1560px;height: 100%;position: absolute;left: 0px;
}
.box{
width: 520px;height: 100%;float: left;text-align: center;line-height: 300px;
font-size: 18px;font-weight: 800;color: white;
}
.box1{
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
/*使用animation动画过渡*/
@keyframes scroll{
0% {background:red; left:0px; }
50% {background:green; left:-520px;}
100% {background:blue; left:-1040px;}
}
/*.scroll{
animation: scroll 5s;
}*/
/*左右按钮的设置*/
.left,
.right{
width: 30px;text-align: center;height: 30;line-height: 30px;
position: absolute;top: 45%;border: 2px solid white;
border-radius: 5px;color: white;
}
.left{
left: 20px;
}
.right{
right: 20px;
}

/*对应点*/
.dian{
position: absolute;bottom: 20px;width: 100%;text-align: center;
/*border: 1px solid white;*/
}
.dian li{
display: inline-block;width: 10px;height: 10px;border: 2px solid white;
border-radius: 50%;margin: 0px 10px;
}
.on{
background: lightgray;box-shadow: 1px 1px 2px lightgray;transform: scale(1.4);
}

第一：无缝连接的实现（向左滚动）

原理：无缝连接即为首尾相连，类似一个圆圈无线循环

方法一：定位，利用left值得变化，向左left值为负

var timer=setInterval(function(){
$(".scroll").animate({
'left':"-500px"
},500,function(){
$(".scroll").children(".box:first").insertAfter($(".scroll").children(".box:last"));
$(".scroll").css("left", 0);
})

},2000)

知识点
知识点	参数	说明
setInterval（function，time）	function为方法 time为时间间隔	每隔一段时间执行一次方法
$(selector).animate({params},speed,callback)	params 必须，参数定义形成的css属性 speend 可选，规定动画效果时长 callback 可选，动画执行完成的回调函数	以多少的速度滑动固定的距离后执行下一步函数
（content）insertAfter（selector）	content被插入的内容（内容） select 被插入的位置（位置）	在被选元素之后插入已有元素或HTML标记

方法二：清空在创建元素，无过渡效果，使用位移效果

+"<div class='box3 box'>第三张图</div>");

}

知识点
知识点	参数	说明
transform	translateX（“数值”）	在X轴平移的距离,属性向元素应用于2D、3D转换
empty		从被选元素清除所有内容，包含文本和子节点
append appendTo		向每个匹配元素内添加内容将内容追加到指定元素内

注：清空在创建可直接清空滚动容器在创建，配合animation属性，效果好于以上内容

第二：轮播图的实现

var timer,
index=0; //注意为每个点的位置

2.1 对应点的实现，点击点的时候对应那张图片

$(".dian li").on("click",function(){
let offset=-520
$(".dian li").removeClass("on");
$(this).addClass("on");
index=$(this).index();
offset*=index;
$(".scroll").css({left:offset+'px'});

})

知识点
知识点	参数	说明
removeClass（class）	可选，规定要移除的class名称如移除多个类，使用空格分割类名不设置此参数将会移除所有类	从被选元素中移除一个或多个类
addClass(class)	必须，规定一个或多个class名称	向被选元素添加一个或多个类，不会移除以存在的class属性，仅为添加class属性

2.2自动轮播,使用计时器,左右选一个

function timer(){
leftFn();
// rightFn();
}

setInterval(timer,3000);

2.3清除计时器
function clearTimer(){
clearInterval(timer);

}

let num=0,
offset=0;

2.4向左切换，left值为负值，逐加类

$(".left").on("click",function(){
clearTimer();
leftFn();
})
// 注意:左轮播和左滑动效果一致,点击和计时器执行一致,可以成为一个方法，如下
function leftFn(){
$(".dian li").removeClass("on");
//当前滑动位置,根据位置判断
offset = parseInt($(".scroll").position().left);
// 向左,最后一张接到第一张之前
if(offset == 0){
offset=-1560;
}
num=Math.abs(offset / (-520));
$($(".dian li")[num-1]).addClass("on");
offset += 520;
$(".scroll").css({left:offset+'px'});

}

2.5向右切换，right值为正值，逐减类

$(".right").on("click",function(){
clearTimer();
rightFn();
})
function rightFn(){
$(".dian li").removeClass("on");
offset = parseInt($(".scroll").position().left);
// 向右,第一张接入到最后一张之后
if(offset == -1040){
offset = 520;
}
num=offset / (-520);
$($(".dian li")[num+1]).addClass("on");
offset -= 520;
$(".scroll").css({left:offset+'px'});

}

知识点
知识点	参数	说明
clearInterval（timer）		可取消setInterval设置的方法
parseInt(string, radix)	string 必须，将解析的字符串 radix 可选，要解析的数字的基数，范围2-36之间	可解析一个字符串且返回一个整数
Math.abs(X)	x 必须为一个数值	返回绝对值