今天在前端群水群的时候遇到一实习生求帮忙手写个什么定制版轮播，我看了看他们公司给的需求，闲来无聊随手写了下以下是需求及源码
jq轮播图要求：1.能够在开始的时候是在最上面显示高亮状态，每次滚动，高亮状态往下滑，到第三个停止在哪里，不管怎么滚动，都一直在中间，到最后一个停止
2.能够拖拽滑动，在滑动过程中，高亮不能够切换，轮播图也不能够切换，拖拽结束，高亮状态再回到中间
3.有能够停止跟开始的方法，注释的明确
4.在数据少于5个的时候，不能够自动轮播
0.png
话不多说，上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽滚动(dragRoll)</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
body{
background: #000;
}
#view-roll {
margin: 80px auto;
width: 300px;
height: 600px;
border: 1px solid #d0dbff;
-webkit-box-shadow: 0 0 10px #d0dbff;
box-shadow: 0 0 10px #d0dbff;
-webkit-animation: animation-light 3s infinite ease-out;
animation: animation-light 3s infinite ease-out;
overflow: hidden;
}
@keyframes animation-light {
0% {
-webkit-box-shadow: 0 0 10px #d0dbff;
box-shadow: 0 0 10px #207b9a;
}
50% {
-webkit-box-shadow: 0 0 40px #d0dbff;
box-shadow: 0 0 40px #d0dbff;
}
100% {
-webkit-box-shadow: 0 0 10px #d0dbff;
box-shadow: 0 0 10px #207b9a;
}
}
#view-roll li {
list-style: none;
padding: 0;
}
#view-roll .view-content {
width: 100%;
height: 100%;
overflow: hidden;
}
#view-roll #view-list {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#view-roll #view-list li {
width: 100%;
height: 120px;
text-overflow: ellipsis;
white-space: nowrap;
color: #FFFFFF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0.3;
}
#view-roll #view-list li img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="view-roll">
<div class="view-content">
<ul id="view-list">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
<li><img src="images/8.jpg" alt=""></li>
</ul>
</div>
</div>
<script>
//控制图片不可被拖动，以免影响拖动父元素出错
for (i in document.images) document.images[i].ondragstart = imgdragstart;
function imgdragstart() {
return false;
};
//设置变量
var x=0
//设置默认第一张高亮
$("#view-list li").eq(x).css("opacity",1)
//设置滚动动画
function nextPage(){
$("#view-list").animate({
'marginTop': '-120px',
},500, function(){
//animate回调函数使变量叠加
x++;
$('#view-list').css("marginTop",0);
//当叠加到第三张，也就是索引值是2的时候，
//使用append方法进行删除最后一个添加到头部，
//因为append方法会改变原有元素索引值，此时已滚动到第三个元素，append方法会删除最后一个添加到头部方法
//使接下来的第四个元素索引值改为2
//以此类推，再执行一次append删除最后一个添加到头部方法，第五个索引值也会改为2，
//配合滚动实现中间的那个始终索引值是2，始终高亮
if(x>2){
x=2
$('#view-list').append($("#view-list li").eq(0));
}
console.log(x)
$("#view-list li").css("opacity",0.3)
$("#view-list li").eq(x).css("opacity",1)
})
}
//设置计时器，自动滚动
var roll = setInterval(function () {
nextPage()
},2000);
//滚动停止方法
function stop() {
if (roll != -1) {
clearInterval(roll);
roll = -1;
}
}
//鼠标移入清空定时器，停止滚动
$('#view-roll').mouseover(function () {
clearInterval(roll);
})
//鼠标移出添加定时器，继续滚动
$('#view-roll').mouseout(function () {
roll=setInterval(nextPage,2000);
})
//按下鼠标拖动元素上下移动函数
$(function(){
//1、按下鼠标左键
//2、移动鼠标
//设置开关
var isDown = false;
$('#view-list').mousedown(function(e){
var positionDiv = $(this).offset();
var distenceY = e.pageY - positionDiv.top;
//开关打开
isDown = true;
$(document).mousemove(function(e){
if (isDown == false) {
return;
}
var y = e.pageY - distenceY;
if(y>$(document).height()-$('#view-list').outerHeight(true)){
y = $(document).height()-$('#view-list').outerHeight(true);
}
$('#view-list').css({
'marginTop':y+'px'
});
});
$(document).mouseup(function(){
isDown = false;
//移出鼠标恢复初始位置
$('#view-list').css("marginTop",0)
});
});
});
window.onload=function(){
// 初始化内容 判断li长度是否大于5 如果不大于清除滚动效果
if($('#view-list').children().length <= 5){
clearInterval(roll);
}
}
</script>
</body>
</html>
效果图：
1.png
网友评论