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>