JQuery CSS Image Slider - HOANGUYENIT

Hôm nay minh chia sẻ với mọi người cách tạo slideshow dùng Jquery + CSS, mình tự code tay theo suy nghĩ của mình, các bạn có thể tuy chỉnh lại theo ý bạn nhé Đầu tiên các bạn tải cho mình thư viện jquery.min.js về và import vào index.html, để có thể sử dụng được jquery nhéGiờ mình bắt đầu thôi nào, ở đây mình chuẩn bị code sẵn, các bạn thông cảm nhé

Github:Jquery CSS Image Slider

Code HTML

<div class="banner-sk"> <div class="box-banner-sk"> <span class="btn-left-sk"></span> <nav id="slide-show"> <ul class="box-img-slide"> <li class="active-slide"><a href=""><img src="img/banner-1.jpg" /></a></li> <li><a href=""><img src="img/banner-2.jpg" /></a></li> <li><a href=""><img src="img/banner-3.jpg" /></a></li> </ul> </nav> <span class="btn-right-sk"></span> </div> </div>

Trong đoạn code trên mình tạo một cái class="banner-sk" bao khung nó là max-width:1350px và overflow-x: hidden !important Còn div box-banner-sk mình cho nó thuộc tính css là position:relative, điều này dúm mình điều hương các phần trừ bên trong theo left,right khi click chuột nhé Tiếp tục mình tạo hai thẻ span có class="btn-left-sk" và class="btn-right-sk" dùng dể click di chuyển hình ảnh tiếp theo

Code CSS

* { margin: 0; padding: 0; } a { text-decoration: none; } li { list-style: none; } .banner-sk { width: 1350px; margin: auto; overflow-x: hidden !important; } .box-banner-sk { width: 100%; position: relative; } .btn-left-sk:before, .btn-right-sk:after { content: ""; -webkit-box-sizing: border-box; box-sizing: border-box; width: 32px; height: 32px; position: absolute; display: block; z-index: 10; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 0.7; cursor: pointer; } .btn-left-sk:before { background: url("../img/left-arrow.png") left no-repeat; left: 0; } .btn-right-sk:after { background: url("../img/right-arrow.png") left no-repeat; right: 0; } #slide-show { width: auto; } #slide-show > ul.box-img-slide { width: 100%; overflow: hidden; position: relative; left: 0; -webkit-transition: left 2s ease-in-out; -o-transition: left 2s ease-in-out; transition: left 2s ease-in-out; } #slide-show > ul.box-img-slide > li { width: 100%; max-width: 1350px; float: left; } #slide-show > ul.box-img-slide > li > a > img { width: 100%; max-width: 1350px; display: block; }

Đoạn code CSS rất đơn giãn đúng không nè, mình sẽ không giải thích nhiều về đoạn code trên chắc mọi người hiểu hết rồi kaka

* Giải thuật mình di chuyển hình ảnh như sau: + Khi click vào btn-right-sk thì hình ảnh nó sẽ dịch chuyển về phía bên phải có nghĩa là hình ảnh sẽ bị left:-1350px và cứ tiếp tục như thế nếu bắm btn-right-sk + Khi click vào btn-left-sk thì sẽ ngược lại từ left:-1350px sẽ về left:0 + Khi ta click btn-left-sk hoặc btn-right-sk sẽ tự động dừng tính năng Auto slideshow + Một điểm nửa là khi đưa chuột vào hình sẽ dừng tại vị trí hình đó và đưa chuột ra sẽ tự động auto slideshow trở lại, đó là tính năng hover trong jquerry

Code JQuery

$(document).ready(function () { var max_width = 1350; var length_li = $(".box-img-slide>li").length; var width_ul = max_width * length_li; $("#slide-show").css({ "width": width_ul + "px" }); var show_banner = function () { var postion = $("li.active-slide").position().left; } var run_banner = function () { var left = $(".box-img-slide").find("li.active-slide").position().left; left = left + max_width; console.log(left + "/" + width_ul); if (left == width_ul) { $(".box-img-slide li").removeClass("active-slide"); $(".box-img-slide").css({ "left": "0" }); $(".box-img-slide li:first-child").addClass("active-slide"); } else { var postion_li = left / max_width; console.log(postion_li); var left_current = left; var check_postion = postion_li; if (postion_li == 1) { var left_current = (left * parseInt(postion_li)); postion_li = 2; } if (postion_li == length_li) { postion_li--; $(".box-img-slide").css({ "left": -(left_current) + "px" }); $(".box-img-slide li:first-child").addClass("active-slide"); postion_li = 0; } else { $(".box-img-slide").css({ "left": -(left_current) + "px" }); $(".box-img-slide li").removeClass("active-slide"); if (check_postion == (length_li - 1)) { $(".box-img-slide li:last-child").addClass("active-slide"); } else { $(".box-img-slide li:nth-child(" + postion_li + ")").addClass("active-slide"); } } postion_li = 0; left = 0; } } var myVar; var init_banner = function () { myVar = setInterval(run_banner, 8000); } function stop_banner() { clearInterval(myVar); } //SET HOVER BANNER STOP IMAGE $("#slide-show").hover(function () { stop_banner(); }, function () { init_banner(); }); //CLICK BUTTON RIGHT $(".btn-right-sk").click(function () { stop_banner(); var left = $(".box-img-slide").find("li.active-slide").position().left; //0 left = left + max_width; console.log(left);//2700 var position_left = left / max_width; var postion_left_tam = position_left; position_left++; if (left == width_ul) { $(".box-img-slide li").removeClass("active-slide"); $(".box-img-slide").css({ "left": "0px" }); $(".box-img-slide li:first-child").addClass("active-slide"); } else { if (postion_left_tam == (length_li - 1)) { $(".box-img-slide").css({ "left": -(left) + "px" }); $(".box-img-slide li").removeClass("active-slide"); $(".box-img-slide li:last-child").addClass("active-slide"); } else { $(".box-img-slide li").removeClass("active-slide"); $(".box-img-slide li:nth-child(" + position_left + ")").addClass("active-slide"); $(".box-img-slide").css({ "left": -(left) + "px" }); } } init_banner(); }); //CLICK BUTTON LEFT $(".btn-left-sk").click(function () { stop_banner(); var left = $(".box-img-slide").find("li.active-slide").position().left; if (left != 0) { left = (left) - max_width; left_tam = left; console.log(left_tam); var position_left = (left / max_width); var postion_left_tam = position_left; if (-(left) == width_ul) { $(".box-img-slide li").removeClass("active-slide"); $(".box-img-slide li:last-child").addClass("active-slide"); } else { $(".box-img-slide li").removeClass("active-slide"); if (position_left == 0) { console.log(position_left); $(".box-img-slide li:first-child").addClass("active-slide"); } else { position_left++; //3 $(".box-img-slide li:nth-child(" + position_left + ")").addClass("active-slide"); } var height_pre = -left_tam; $(".box-img-slide").css({ "left": height_pre + "px" }); } init_banner(); } }); //RUN BEGIN BANNER setTimeout(init_banner(), 100); });

Bên trên là đoạn code Jquery của mình, các bạn xem và chạy test thử nhé, bài viết này không hay lắm, nhưng mình chỉ muốn chia sẻ với mọi người cách chạy slideshow thôi, bên cạnh đó, các bạn có thể dùng các slideshow càng nhẹ càng tốt để tối ưu cho website của mình để cho load website nhanh hơn!