jQuery 实现无限滚动轮播图
引言：更多的jQuery语法和案例练习参考我的- - -> jQuery笔记 1、效果展示 2、分析由上面这张图片，开始分析:1、图片怎么滚动？可以使图片滚动容器ul滚动，为其设置margin-left，再加上动画效果2、图片用什么来装呢？可以用li，将其设置为block，进行背景图的设置，并且将其浮动并排。（这里也可以在li中包含img标签）3、外层视觉窗口div用做些什么呢？因为
·
1、效果展示
2、分析
由上面这张图片，开始分析:
1、图片怎么滚动？
可以使图片滚动容器ul滚动，为其设置margin-left，再加上动画效果
2、图片用什么来装呢？
可以用li，将其设置为block，进行背景图的设置，并且将其浮动并排。（这里也可以在li中包含img标签）
3、外层视觉窗口div用做些什么呢？
因为外层视觉窗口是父级，那么为其设置overflow:hidden; 这样视觉窗口每次只能看到俩张图片，其他的被隐藏掉了
4、图片是4张，为什么最后会多出俩张相同图片？
可以想象一下，若没有后俩张图片，当容器ul滚动到第四张图片后，如若此时把margin-left设置为0后，那么再视觉效果上会出现明显闪动，会显得图片不是那么无缝连接一样，相反把最后俩张图片设置的和第一、第二张图片相同时，再滚动容器的第四个图片达到视觉窗口后，在进行margin-left设置为0后，会在视觉效果上无缝连接
3、代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动轮播图</title>
<style>
*{
box-sizing: border-box;
}
.view{
width: 800px;
height: 400px;
margin: 100px auto;
overflow: hidden;
}
.view ul{
width: 2400px;
height: 100%;
list-style: none;
position: relative;
padding: 0;
margin-top: 0;
cursor: pointer;
background-color: black;
}
.view ul li{
display: block;
width: 400px;
height: 100%;
float: left;
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/1.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(2){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(3){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/3.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(4){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/5.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(5){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/1.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(6){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
//1、定义变量保存偏移量
var offset=0;
//2、让图片滚动
var timer;
//自动滚动
function autoPlay(){
timer=setInterval(function(){
offset-=3
if(offset<=-1600){
offset=0
}
$('ul').css('marginLeft',offset)
},10)
}
autoPlay()
//3、监听li的移入和移除事件
$('li').hover(function(){
//鼠标悬浮后，停止滚动
clearInterval(timer)
//非当前选择设置半透明淡入蒙版，因为父级元素为黑色
$(this).siblings().fadeTo(100,0.5)
//去除当前选中的蒙版
$(this).fadeTo(100,1)
},function(){
//继续滚动
autoPlay()
//去除所有蒙版
$('li').fadeTo(100,1)
})
})
</script>
</head>
<body>
<!-- 视觉窗口 -->
<div class="view">
<!-- 滚动窗口 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)