banner圖左右滾動簡單易懂源代碼
1
樣式展示
css代碼：
* { padding: 0px; margin: 0px; } .banner { width: 100%; height: 450px; font-size: 0; overflow: hidden; position: relative; } .banner_img { width: 100%; height: 450px; position: absolute; left: 0; top: 0; } .banner_img li { width: 100%; height: 450px; display: inline-block; background-position: center; background-repeat: no-repeat; float: left; list-style: none; } .banner_list { height: 50px; top: 400px; position: relative; margin: 0 auto; z-index: 1; } .banner_list span { display: block; cursor: pointer; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #555; float: left; margin: 0 5px; } .banner_list .spcss { border: 3px solid yellowgreen; } .banner_left { position: absolute; height: 90px; width: 60px; top: 50%; left: -60px; background-color: rgba(73,72,62, 0.6); margin-top: -45px; text-align: center; transition: all .5s; z-index: 2; } .banner_left:hover { background-color: rgba(73,72,62, 0.9); } .banner_right { position: absolute; height: 90px; width: 60px; top: 50%; right: -60px; background-color: rgba(73,72,62, 0.6); margin-top: -45px; text-align: center; transition: all .5s; z-index: 2; } .banner_right:hover { background-color: rgba(73,72,62, 0.9); } .banner_left img { margin-top: 22px; } .banner_right img { margin-top: 22px; }
html代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>banner1</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="banner"> <ul class="banner_img"> <li><img src="images/banner1.jpg" /></li> <li><img src="images/banner2.jpg" /></li> <li><img src="images/banner3.jpg" /></li> </ul> <div class="banner_list"></div> <div class="banner_left"><img src="images/left.png" /></div> <div class="banner_right"><img src="images/right.png" /></div> </div> </body> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> </html>
js代碼：
$(function() { var n = 0; var b = $(".banner_img li").length; var c = b * 100; var d = 1 / b * 100; $(".banner_img").width(c + "%"); $(".banner_img li").width(d + "%"); $(".banner_list").width(b * 30); //根據里數量 創建焦點個數 if(b > 1) { for(var i = 0; i < b; i++) { var listSpan = $("<span></span>") $(".banner_list").append(listSpan); } } $(".banner_list span:eq(0)").addClass("spcss").siblings("span").removeClass( "spcss"); /*創建自動滾動動畫*/ function rollEnvent() { if(n == b - 1) { var ctPosit = (n + 1) * 100; $(".banner").append($(".banner_img").clone()); $(".banner_img:last").css("left", "100%"); $(".banner_img:first").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".banner_img:last").animate({ "left": "0" }, 1000); var setTime0 = setTimeout(function() { $(".banner .banner_img:first").remove(); }, 1000); n = 0; $(".banner_list span:eq(0)").addClass("spcss").siblings("span").removeClass( "spcss"); } else { n++; var ctPosit = n * 100; $(".banner_img").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".banner_list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass( "spcss"); } } var slidesetInterval = setInterval(rollEnvent, 3000);/*設置banner滾動時間*/ //鼠標hover banner圖 停止滾動 移開自動開始滾動動畫 $(".banner").hover(function() { clearInterval(slidesetInterval); }, function() { slidesetInterval = setInterval(rollEnvent, 3000); }) /*banner_right 按鈕*/ $(".banner_right").click(function() { if(n == b - 1) { var ctPosit = (n + 1) * 100; $(".banner").append($(".banner_img").clone()); $(".banner_img:last").css("left", "100%"); $(".banner_img:first").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".banner_img:last").animate({ "left": "0" }, 1000); var setTime0 = setTimeout(function() { $(".banner .banner_img:first").remove(); }, 1000); n = 0; $(".banner_list span:eq(0)").addClass("spcss").siblings("span").removeClass( "spcss"); } else { n++; var ctPosit = n * 100; $(".banner_img").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".banner_list span:eq(" + n + ")").addClass("spcss").siblings("span") .removeClass("spcss"); } }); /*banner_left按鈕*/ $(".banner_left").click(function() { if(n == 0) { var stPosit = b * 100; var etPosit = (b - 1) * 100; $(".banner").prepend($(".banner_img").clone()); $(".banner_img:first").css("left", "-" + stPosit + "%"); $(".banner_img:last").animate({ "left": "100%" }, 1000); $(".banner_img:first").animate({ "left": "-" + etPosit + "%" }, 1000); var setTime0 = setTimeout(function() { $(".banner .banner_img:last").remove(); }, 1000); n = b - 1; $(".banner_list span:eq(" + n + ")").addClass("spcss").siblings("span") .removeClass("spcss"); } else { n--; var ctPosit = n * 100; $(".banner_img").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".banner_list span:eq(" + n + ")").addClass("spcss").siblings("span") .removeClass("spcss"); } }); /*焦點按鈕*/ $(".banner_list span").click(function() { var indexS = $(this).index(); n = indexS; var ctPosit = n * 100; $(".banner_img").animate({ "left": "-" + ctPosit + "%" }, 1000); $(this).addClass("spcss").siblings("span").removeClass("spcss"); }) }); /*left right 按鈕動畫*/ $(".banner").mouseover(function() { $(".banner_left").css({ "left": "25px" }) $(".banner_right").css({ "right": "25px" }) }); $(".banner").mouseleave(function() { $(".banner_left").css({ "left": "-60px" }) $(".banner_right").css({ "right": "-60px" }) }); /*將img標簽轉換成背景圖顯示*/ $(function() { $(".banner_img img").css("display", "none") $(".banner_img li").each(function(e) { $(".banner_img li:eq(" + e + ")").css("backgroundImage", "url(" + $( ".banner_img li:eq(" + e + ")").find("img").attr("src") + ")"); }); });
代碼完整希望大家自己研究寫出自己風格的banner滾動。