XtGem Forum catalog
LOgo
Trang Chủ Giới Thiệu Blog Tìm kiếm
22:262024-05-23
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 html css navigation đẹp cho wap/web code cơ bản cho wapmaster

Những mẫu navigation cơ bản nhưng hữu dụng cho làm web. code hay cho làm web/wap ...

Share code javascript slide cho web/wap hay đẹp

Code javascript + css + html cực hay, code slideshow đẹp cho web/wap ...

Share code background tuyết rơi bằng css và javascript cực đẹp cho wap

Share code background tuyết rơi bằng css và javascript cực đẹp cho wap, code js cực hay đẹp ...

Công cụ tạo logo đẹp online, các trang tạo logo trực tuyến miễn phí

Công cụ tạo logo đẹp online, các trang tạo logo trực tuyến miễn phí ...

Share code javascript và css hiệu ứng cho chuột

Bộ code hịu ứng cực đẹp cho chuột, hiệu ứng hay bằng javascript và css ...

Share code tạo ảnh xoay liên tục, ảnh xoay khi hover chuột, css cực đẹp

Share code tạo ảnh xoay liên tục, ảnh xoay khi hover chuột, css cực đẹp, css3 hiệu quả cho làm web/wap ...

«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