Snack's 1967
LOgo
Trang Chủ Giới Thiệu Blog Tìm kiếm
01:092024-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
Font-family trong html và css, định dạng chữ với font

Font-family trong html và trong css có cấu trúc như thế nào, cách sử dụng và lợi ích của việc dùng font là gì ...

Share code đổ bóng cho chữ, thành phần, text-shadow, box-shadow

Share code đổ bóng cho chữ, thành phần, text-shadow, box-shadow, code css3 cực hay cho web/wap ...

Share code html, css phóng to ảnh khi hover chuột cực hay, đẹp

Chỉ cần sử dụng css và html là ta đã có thể tạo ra hiệu ứng phóng to ảnh cực độc cho web/wap....

Share code css làm ảnh rung động khi hover qua

Code ảnh rung động khi hover sử dụng css3 để làm ảnh động khi hover qua...

Share code html, css cơ bản cho làm wap phần 2

Làm wap ai cũng phải biết html và css, với những code html, css cơ bản chắc chắn sẽ giúp bạn rất nhiều....

Hướng dẫn tạo filelist game đơn giản

Hướng dẫn tạo Filelist game xtgem đơn giản hiệu quả trong 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