Snack's 1967
LOgo
Trang Chủ Giới Thiệu Blog Tìm kiếm
14:132024-05-27
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
«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