Lamborghini Huracán LP 610-4 t
LOgo
Trang Chủ Giới Thiệu Blog Tìm kiếm
14:372024-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
Share code html, css cơ bản cho làm wap

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 làm một trang điều hướng báo lỗi 404

Đối với mỗi trang wap một trong những thứ cơ bản và không thể thiếu là trang 404. Vậy làm sao để tạo được một trang 404 ?...

Bảng mã màu HEX đầy đủ cho html, css

Bảng mã màu đầy đủ cho làm web/wap rất hữu dụng là thứ không thể thiếu với các wapmaster ...

«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