轮播图--JS手写
Posted Sealee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图--JS手写相关的知识，希望对你有一定的参考价值。
轮播图基本每个网站都会有，也有很多的JQuery插件可以用，这里是用JS代码写的。
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Test</title> <script src="~/Scripts/jquery-1.8.2.min.js"></script> @*Css样式*@ <style> * { margin: 0; padding: 0; } ul { height: 600px; position: relative; } ul li { float: left; list-style-type: none; height: 100%; background-position: 50% 50%; background-size: cover; } .one { background-image: url("/Content/1.jpg"); } .two { background-image: url("/Content/2.jpg"); } .three { background-image: url("/Content/3.jpg"); } .four { background-image: url("/Content/4.png"); } .dw { position: absolute; bottom: 5px; width: 100%; text-align: center; } ol { list-style: none; text-align: center; } ol li { display: inline-block; width: 22px; height: 4px; padding: 4px; overflow: hidden; text-indent: -999em; cursor: pointer; background-color: white; } .hasClass { background-color: red; } </style> </head> <body> <div style="position: relative; overflow: hidden; height: 600px;"> @*有多少个li，ul的宽度就是 X00%*@ <ul style="width:600%; margin-left:-100%;"> @*第一张前面放最后一张，做轮播给人一种一直往一个方向的感觉*@
当显示这张图片时，ul就改变样式定位到第4张图片 <li class="four" style="width:16.6667%"></li> @*这里的li标签宽度是16.66667%怎么来的， 只有4张图片做轮播，前后各加一张就是6张， 16.666667=100/6 如果是2张做轮播，一共4个li, 每个li的宽度就是25%*@ @*这4张图片做轮播*@ <li class="one" style="width:16.6667%"></li> <li class="two" style="width:16.6667%"></li> <li class="three" style="width:16.6667%"></li> <li class="four" style="width:16.6667%"></li> @*最后一张后面放第一张，做轮播给人一种一直往一个方向的感觉*@
当显示这张图片时，ul改变样式定位到第1张图片 <li class="one" style="width:16.6667%"></li> </ul> <nav class="dw"> <ol > <li data-slide="0" class="hasClass"></li> <li data-slide="1" class=""></li> <li data-slide="2" class=""></li> <li data-slide="3" class=""></li> </ol> </nav> </div> </body> </html> <script> var mm; function hh() { //ul li做向左移动 $("ul").animate({ "left": "+=" + "-100%" }, 1200, function () { var i;//得到第几张的值 $("ol li").each(function () { if ($(this).attr("class") != "") { i = $(this).attr("data-slide"); } }); //因为是做过一次动画才来找值，所有当i为3时，ul是的left是 -400%,也就是第5张图片 i = parseInt(i) + 1; //如果等于4 就重置下， 这里有4张做轮播就是4 if (parseInt(i) == 4) { i = 0; $("ul").css("left", "0%"); //重新定位下，ul的left已经重置了，因为图片没变，所以给人一个方向的假象 } $("ol li").attr("class", ""); //把所有的li的样式移除 $("ol li:eq(" + parseInt(i) + ")").attr("class", "hasClass"); //下面的图标显示 }) mm = setTimeout("hh()", 4000); //每个4秒做一次动画 } $(document).ready(function () { mm = setTimeout("hh()", 4000); //点第几张就显示几张 左右也是一回事，这里没写 $("ol").on("click", "li", function () { var jj = $(this).attr("data-slide"); //点的第几张 $("ol li").attr("class", ""); $("ol li:eq(" + parseInt(jj) + ")").attr("class", "hasClass"); //下面的图标显示 clearTimeout(mm); $("ul").animate({ "left": "-" + parseInt(jj) + "00%" }, 1200, function () { mm = setTimeout("hh()", 4000); }); //重新定位下 }) }) </script>
以上是关于轮播图--JS手写的主要内容，如果未能解决你的问题，请参考以下文章