2017-6-4 用jQuery 做大圖輪播
阿新 • • 發佈：2017-06-04
length move val orm fun margin window blog cli
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="js/jquery-1.7.1.min.js"></script> <title></title> <style type="text/css"> #dt { margin-top:50px; margin:0 auto; width:200px; height:200px; border:2px solid black; overflow:hidden; } #dt-items { position:relative; width:800px; height:200px; z-index:10; } .dt-item { width:200px; height:200px; float:left; } .btn {position:relative; top:-200px; width:50%; height:100%; float:left; z-index:11; } #btn-left { } </style> </head> <body> <form id="form1" runat="server"> <div id="dt"> <div id="dt-items"> <div class="dt-item" style="background-image:url(images/2.jpg)"></div> <div class="dt-item" style="background-image:url(images/3.jpg)"></div> <div class="dt-item" style="background-image:url(images/4.jpg)"></div> <div class="dt-item" style="background-image:url(images/5.jpg)"></div> </div> <div id="btn-left" class="btn"></div> <div id="btn-right" class="btn"></div> </div> </form> </body> </html> <script type="text/javascript"> var imgindex = 0; var timer; $("#btn-left").click(function () { imgindex--; if (imgindex < 0) imgindex = $(".dt-item").length - 1; var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex); $("#dt-items").stop().animate({ left: imgleft }, 500); }); $("#btn-right").click(function () { imgindex++; if (imgindex > $(".dt-item").length - 1) imgindex = 0; var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex); $("#dt-items").stop().animate({ left: imgleft }, 500); }); timer = automove(); function automove() { return window.setInterval(function () { imgindex++; if (imgindex > $(".dt-item").length - 1) imgindex = 0; var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex); $("#dt-items").stop().animate({ left: imgleft }, 500); }, 2000); } $("#dt").hover(function () { window.clearInterval(timer); }, function () { timer = automove(); }); </script>
無限循環跑：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="js/jquery-1.7.1.min.js"></script> <title></title> <style type="text/css"> #dt { margin-top:50px; margin:0 auto; width:200px; height:200px; border:2px solid black; overflow:hidden; } #dt-items { position:relative; width:800px; height:200px; z-index:10; } .dt-item { width:200px; height:200px; float:left; } .btn {position:relative; top:-200px; width:50%; height:100%; float:left; z-index:11; } #btn-left { } </style> </head> <body> <form id="form1" runat="server"> <div id="dt"> <div id="dt-items"> <div class="dt-item" style="background-image:url(images/2.jpg)"></div> <div class="dt-item" style="background-image:url(images/3.jpg)"></div> <div class="dt-item" style="background-image:url(images/4.jpg)"></div> <div class="dt-item" style="background-image:url(images/5.jpg)"></div> <div class="dt-item" style="background-image:url(images/2.jpg)"></div> </div> <div id="btn-left" class="btn"></div> <div id="btn-right" class="btn"></div> </div> </form> </body> </html> <script type="text/javascript"> var imgindex = 0; var timer; $("#btn-left").click(function () { imgindex--; if (imgindex < 0) imgindex = $(".dt-item").length - 1; var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex); $("#dt-items").stop().animate({ left: imgleft }, 500); }); $("#btn-right").click(function () { imgindex++; if (imgindex >= $(".dt-item").length) { imgindex = 0; } var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex); $("#dt-items").stop().animate({ left: imgleft }, 500, function () { if (imgindex >= ($(".dt-item").length - 1)) { $("#dt-items").css("left", "0px"); imgindex = 0; } }); }); timer = automove(); function automove() { return window.setInterval(function () { imgindex++; if (imgindex >= $(".dt-item").length) { imgindex = 0;} var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex); $("#dt-items").stop().animate({ left: imgleft }, 500, function () { if (imgindex >= ($(".dt-item").length - 1)) { $("#dt-items").css("left", "0px"); imgindex = 0; } }); }, 2000); } $("#dt").hover(function () { window.clearInterval(timer); }, function () { timer = automove(); }); </script>
2017-6-4 用jQuery 做大圖輪播