LOgo
Trang Chủ Giới Thiệu Blog Tìm kiếm
02:012024-05-24
Quảng cáo:
Nội dung:

Share code filelist ảnh chuẩn slideshow cực đẹp, code hay chuẩn cho web/wap


Để tạo một filelist ảnh đẹp chuẩn slideshow bạn cần kết hợp filelist xtgem với javascript


Xem demo

Đầu tiên, bạn tạo một filelist ảnh đơn giản như sau :

Mã:
<xt:filelist
sort_type="name"
sort_dir="asc"
per_page="10"
folder="/url-thu-muc"
template=
"&lt;div class=&quot;vxp-slideshow-content &quot;&gt;
&lt;a href=&quot;.file_url.&quot;&gt;
&lt;img class=&quot;mySlides&quot;
src=&quot;.file_url.&quot;
width=&quot;100%&quot;
alt=&quot;hình ảnh, &quot;
&gt;&
lt;/a&gt;
&lt;/div&gt;
" />

Sau đó bạn chèn filelist trên vào vị trí <!-- Dán code vào đây --> trong đoạn mã html sau:


Mã:
< div class="vxp-slideshow" >
< !-- Dán code vào đây -->
<a class="prev" onclick="plusDivs(-1)">&lt;</a>
<a class="next" onclick="plusDivs(+1)">&gt;</a>
< /div >


Sau đó bạn chèn code javascript sau vào wap của bạn :


Mã:
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}

Cuối cùng ta chỉ cần chỉnh lại csslaf được

Mã:

img:hover {box-shadow:2px 3px 2px #999;}
.filelist_paging {display:none;}
.vxp-slideshow{max-width:100%;
position:relative;}

.next,.prev {cursor:not-allowed;opacity:0.3}

.next,.prev {-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none}

.next,.prev {
display:inline-block;
text-align:center;
color:#000;
background-color:#fff;
position:relative;
overflow:hidden;
z-index:1;
padding:0;
border-radius:50%;
cursor:pointer;
font-size:24px;
width:40px;
height:40px;
line-height:40px
}
.next {position:absolute;top:45%;right:0
}
.prev{position:absolute;top:45%;left:0}

Xem demo
Share code javascript hiệu ứng ảnh chuyển động cực đẹp khi kéo thanh cuộn trang

Hiệu ứng ảnh ta ra và mờ dần đi như thể đang ngày càng gần màn hình hơn khi kéo thanh cuộn trang đi xuống và ngược lại khi kéo thanh ...

Share code css, thay đổi background images thẻ div khi hover chuột qua thẻ li. Code css, html, javascript

Code thay đổi background images thẻ div khi hover chuột qua li. Bằng cách sử dụng javascript và thuộc tính data trong html kết hợp một chút css....

Bộ Background đẹp cho web wap, chia sẻ background đẹp

Background cực đẹp, background images/ color/ box-showdow/ border-radius cho html/body cực đẹp ...

[Share] code javascript lịch âm dương cực đẹp cho web/wap

Code javascript lịch âm dương hữu dụng cho làm web code javascript cực đẹp ...

Hướng dẫn cách chèn App máy đo tình yêu cho wap xtgem

Ứng dụng cho xtgem. Ứng dụng Máy đo tình yêu vô cùng thú vị. Hướng dẫn cách chèn ứng dụng và cùng chơi ...

[Share] code hộp box-shadow cực đẹp cho làm web/wap

Bộ code box-shadow cực đẹp sẽ đem lại nhiều màu sắc cho trang web của bạn ...

1234»
Chia sẻ: SMS Zing Twitter Facebook

Exchanger
U-ON
c-stat
Sitemap.html Sitemap.txt Sitemap.xml
Hosting Miễn Phí

Some Web: Thanhgiang642.wordpress.com tailieu642.xtgem.com


Lamborghini Huracán LP 610-4 t