1，展示全部banner，
2，筛选对应展示的内容，
3，鼠标滚轮滚动控制banner滚动，
4，拉动滚动条控制banner滚动，
5，点击左右按钮控制banner滚动。
提示：
jquery.mousewheel.js官方地址：
https://github.com/jquery/jquery-mousewheel （鼠标滚轮插件）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>banner 滚动</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.con {
width: 900px;
overflow: hidden;
margin: auto;
position: relative;
}
.con ul {
position: relative;
}
.con ul li {
text-align: center;
float: left;
width: 300px;
}
.con ul li img {
width: 100%;
}
.unOl {
display: none;
}
.scroll-bar {
width: 900px;
height: 30px;
background: blue;
position: absolute;
bottom: 40px;
z-index: 999;
border-radius: 50px;
}
.scroll-bar b {
width: 300px;
height: 28px;
background: yellow;
margin-top: 1px;
display: block;
border-radius: 50px;
cursor: pointer;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:;" class="all">all</a>
<a href="javascript:;" class="one">one</a>
<a href="javascript:;" class="two">two</a>
</div>
<div class="con">
<ul>
<li class="all one">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3861298306,2876621920&fm=26&gp=0.jpg" height="200" />
<p>all one</p>
</li>
<li class="all one two">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3861298306,2876621920&fm=26&gp=0.jpg" height="200" />
<p>all one two</p>
</li>
<li class="all">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3861298306,2876621920&fm=26&gp=0.jpg" height="200" />
<p>all</p>
</li>
<li class="all two">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3861298306,2876621920&fm=26&gp=0.jpg" height="200" />
<p>all two</p>
</li>
<li class="all two">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3861298306,2876621920&fm=26&gp=0.jpg" height="200" />
<p>all two</p>
</li>
<li class="all one">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3861298306,2876621920&fm=26&gp=0.jpg" height="200" />
<p>all one</p>
</li>
<li class="all two">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3861298306,2876621920&fm=26&gp=0.jpg" height="200" />
<p>all two</p>
</li>
</ul>
<div class="scroll-bar" id="scroll-bar">
<b id="scrollBar"></b>
</div>
<ol class="unOl"></ol>
<div class="leftRight-btn">
<a href="javascript:;" class="left">左</a>
<a href="javascript:;" class="right">右</a>
</div>
</div>
<script>
$(function() {
$(".con .unOl").html($('.con ul').html());
var ulLiLen = $('.con ul li').length,
ulLiWh = $('.con ul li').width();
var num = 0;
$('.con ul').width(ulLiLen * ulLiWh);
$(".scroll-bar b").width($(".scroll-bar").width() * (3 / ulLiLen));
//点击tab切换按钮
$(".nav a").click(function() {
var navClassName = $(this).attr('class');
$('.con ul').empty();
num = 0;
$(".con .unOl li").each(function() {
if($(this).hasClass(navClassName)) {
$('.con ul').append('<li class="' + navClassName + '">' + $(this).html() + '</li>')
}
});
ulLiLen = $('.con ul li').length;
ulLiWh = $('.con ul li').width();
$(".scroll-bar b").width($(".scroll-bar").width() * (3 / ulLiLen));
if(ulLiLen < 4) {
$(".scroll-bar").hide();
} else {
$(".scroll-bar").show();
}
$('.scroll-bar b').css('left', 0);
$('.con ul').css({
width: $('.con ul li').width() * $('.con ul li').length,
'left': 0
});
});
//左右按钮
$(".leftRight-btn a").click(function() {
console.log(ulLiLen);
if(ulLiLen > 3) {
if($(this).hasClass('left')) {
leftRoll();
} else {
rightRoll();
}
}
});
//滚轮滚动
$(".con ul").on("mousewheel", function(event, delta) {
event.stopPropagation();
if(ulLiLen > 3) {
if(delta > 0) {
leftRoll();
} else if(delta < 0) {
rightRoll();
}
}
});
//向左滑动
function leftRoll() {
num--
if(num < 0) {
console.log('到头了');
num = 0;
return false
}
$('.con ul').animate({
'left': -num * ulLiWh
})
$('.scroll-bar b').animate({
'left': num * (($('.scroll-bar').width() - $('.scroll-bar b').width()) / (ulLiLen - 3))
})
}
//向右滑动
function rightRoll() {
num++
if(num > (ulLiLen - 3)) {
console.log('最大了');
num = ulLiLen - 3;
return false
}
$('.con ul').animate({
'left': -num * ulLiWh
})
$('.scroll-bar b').animate({
'left': num * (($('.scroll-bar').width() - $('.scroll-bar b').width()) / (ulLiLen - 3))
})
}
// 滚动条滚动
var scrollBars = document.getElementById("scroll-bar");
var scrollBar = document.getElementById("scrollBar");
scrollBar.onmousedown = function(ev) {
var oevent = ev || event;
console.log(scrollBar.offsetLeft)
var distanceX = oevent.clientX - scrollBar.offsetLeft;
document.onmousemove = function(ev) {
var oevent = ev || event;
var scrollLeft = oevent.clientX - distanceX;
if(scrollLeft < 0 || scrollLeft > (scrollBars.offsetWidth - scrollBar.offsetWidth)) {
return false
}
scrollBar.style.left = scrollLeft + 'px';
var animate_scrollLeft = scrollLeft * (ulLiWh / ($('.scroll-bar').width() / ulLiLen))
$('.con ul').animate({
'left':-animate_scrollLeft
},10);
num = Math.ceil(animate_scrollLeft / ulLiWh)
console.log(num)
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
};
})
</script>
</body>
</html>
扫描二维码关注公众号，回复：
5440833 查看本文章
