banner 滚动

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>

  

 

猜你喜欢

转载自www.cnblogs.com/yjgbk/p/10485004.html

相关文章