🐬 Wapmaster share code hay
🐬 Wapmaster Dat007
D
A
T
0
0
7
K
Í
N
H
C
H
Ú
C
C
Á
C
B
Ạ
N
T
H
À
N
H
C
Ô
N
G
T
R
O
N
G
C
Ô
N
G
V
I
Ệ
C
☰▶
✈ Ảnh nền
✈ Nhạc chuông
✈ Icon đẹp
✈ Chửa bệnh
✈ Xem Phim
✈ ký tự đẹp
✈ Câu đố hay
✈ Truyện ma
✈ Xoay Ảnh
✈ Wapmaster
×
CÁC TIỆN ÍCH
✔ Nhạc nền cho wap/web
✔ Bố cục Chia 2,3,4 cột
✔ Tạo nhận xét cho blogspot
✔ Lớp phủ điều hướng
✔ Thanh trượt
✔ Menu trượt bên trái
✔ DIV kéo thả
✔ Hiệu ứng xoay ảnh
✔ Hiệu ứng ảnh
✔ Hiệu ứng chử chạy
✔ Code thường dùng
✔ Auto nội dung
✔ Chống copy
✔ Hiệu ứng chuột
✔ Chạy thử Code
✔ Chạy thử mã hóa Code
✔ Lốp Menu
✔ Code tổng hợp
✔ Ẩn hiện nội dung
✔ Tràn văn bản
✔ Khung cho blogger
✔ Bo tròn góc
✔ Auto Wap/Web wapego
✔ Auto Wap/Web xtgem
✔ Đưa website lên google
✔ Css tooltip
✔ 4 Nút Sidenav
✔ Icon đẹp
✔ Mã màu css
✔ Tìm hiểu CSS
✔ Mã màu CSS
✔ Css 1
✔ Css 2
✔ Css 3
✔ Css 4
✔ Css 5
✔ Css 6
✔ Css 7
✔ Ký tự đặc biệt
Trình chiếu ảnh
Mẩu 2
Mẩu 1
HTML▼
<div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEjRan9mKt7tW-n2GpuBy7ha6fausdiN6KjlTh_fn48eXJInKQMSdqnpV12VM16_NNJef3OGrIMYEBWfmeCzm5a3vuOEHsHJUfaXqEMpjf41Z0WhppABrlbnsM5p4dO1uI1ZTAiHUyg8/s320/Dat1.gif" width="300" height="400"/> <div class="text">Caption Text1</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjehW9PpvDQjXDcSdkp7tZCgqDEHjiVoz6Snfw5rYRpaYlzDtTwPNlNIMbkL_WCX-wfI7HKeL1SdWlnfCZvjZhe4UCGlUluaMFemHDoyWNxnuFBdQ1WLhldOXZzfTa9thcawO5VzDRmMY0/s320/Dat2.gif" width="300" height="400"/> <div class="text">Caption Two2</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMAFzkD3iOdXkLywFJr6rulbryDh4bv2IgGEdBOx2HDPtyu0UoeIp_Zd3le9uoO-HTmDyUpQyx2EvwPG9VL7IQ32peIRVvzc9DsnXg62I5eKEOGmmRSrAv0kSOsQPsC9vN1DECfruzBo/s1600/Dat3.gif" width="300" height="400"/> <div class="text">Caption Three3</div> </div> <div class="mySlides fade"> <div class="numbertext">4 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlOM99hJ_v_TC1pKBtRQXK8ZMoTqMwvWEUA_v-OwcudQXk8YDTezBOA3TDgLIRN3ji8Ocf8oNF9fx1ltlKyM7hJJkihsjuglTGwRo9OEXe0CwehgSUY6_uZ-mPVttLncc0d_Q9YXAte4/s1600/Dat4.gif" width="300" height="400"/> <div class="text">Caption Three4</div> </div> <div class="mySlides fade"> <div class="numbertext">5 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DEYl0Yek3K6h5M0ce_slArb0QSNPRzl_ubUL-QAIBC2GbrxcZZRGkEl0zaFo0O-NzLMbviaHUBGZr6F7d8QtrbuDSVwlEjdXFqyhhBItXji5HTBX5IJT3PE3FGuswVyI_c0wU2YVG_I/s1600/Dat5.gif" width="300" height="400"/> <div class="text">Caption Three5</div> </div> <div class="mySlides fade"> <div class="numbertext">6 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZehe5boY7eb1M2yhNis6fjDFScJ51cB5P3Xfpvgf209h7VJ3FTSF1ZkaV_bf-3dw-gppQJUxyC27zE1aqOVNq_278OIyGKJaaLdVPLmtZlT_Yd1WWqgQZ-wl6OIMAmQz-JRQZHtcv4tc/s320/Dat6.gif" width="300" height="400"/> <div class="text">Caption Three6</div> </div> <div class="mySlides fade"> <div class="numbertext">7 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSBZMy37AcTl6DtenMTwJm_ZFh4JgFGRDagT8w_oD2rbbmJpQJz5-Jhg8VSLGNA-PZkYU1u8dISKCElf-pDBz4ls52CN7WVim71J5f-AjF0j2KHV8aZkbnQXI071qMIRmNChiAektQoM/s1600/Dat7.gif" width="300" height="400"/> <div class="text">Caption Three7</div> </div> <div class="mySlides fade"> <div class="numbertext">8 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSWQSRKJXgE2ixNzvH4RebXKXG72N-g469QREOviKr9F215Zrl-Vj312TxgtOAVOddq1r9cNfZd4vaW7mT_uDrpHrb3wgfoStJ0yjdimEYVzTOYD9jpS55d5L3OGMAwIRNPyf62IL1X2c/s1600/Dat8.gif" width="300" height="400"/> <div class="text">Caption Three8</div> </div> <div class="mySlides fade"> <div class="numbertext">9 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoYzPvFHtO3d-CbibG8pLpjnG82U9deecRfsaQqBO4Xyi7SW89dPiHFOTBwXcyF0LYgCi_JMyDrfQxoKD3lBGO0xuT6B8Mres-Wgt4-Uk31DLrFoNjkhUQUqQ3WsFmxOXj9HHYnPlKIE/s1600/Dat9.gif" width="300" height="400"/> <div class="text">Caption Three9</div> </div> <div class="mySlides fade"> <div class="numbertext">10 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-OLDNvy_GeDMTFcg944QC-IElkmu1C69A6vRSk-htTGfUZ56KF3_9ITxMMiM9KyUxgsxXpef_vPODBeN66aRp-1XtZ5exPwkP4vHvO6J13nYb6WQmx08ot2BtVRtrx6-xKsbh6lxs0D0/s320/Dat10.gif" width="300" height="400"/> <div class="text">Caption Three10</div> </div> </div> <br> <div style="text-align:center"> <span class="dot">1</span> <span class="dot">2</span> <span class="dot">3</span> <span class="dot">4</span> <span class="dot">5</span> <span class="dot">6</span> <span class="dot">7</span> <span class="dot">8</span> <span class="dot">9</span> <span class="dot">10</span> </div>
CSS ▼
<style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;} .mySlides {display:none} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: left; } /* Number text (1/4 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 20px; width: 20px; margin: 0 2px; background-color: #00ffff; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #ff0000; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2.5s; animation-name: fade; animation-duration: 2.5s; } @-webkit-keyframes fade { from {opacity: 1.4} to {opacity: 1} } @keyframes fade { from {opacity: 1.4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} } </style>
JS ▼
<script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 4000); // Change image every 2 seconds } </script>
Xem ▼
1 / 10
Caption Text1
2 / 10
Caption Two2
3 / 10
Caption Three3
4 / 10
Caption Three4
5 / 10
Caption Three5
6 / 10
Caption Three6
7 / 10
Caption Three7
8 / 10
Caption Three8
9 / 10
Caption Three9
10 / 10
Caption Three10
1
2
3
4
5
6
7
8
9
10
Mẩu 2
HTML▼
<div class="sliderz-wrapper"> <div class="sliderz-prev" onclick="sliderz_goto(-1)"><i class="fa fa-chevron-left sliderz-prev-btn" aria-hidden="true"></i></div> <div class="sliderz-entry-list-wrapper"><div class="sliderz-entry-list"></div></div> <div class="sliderz-next" onclick="sliderz_goto(-2)"><i class="fa fa-chevron-right sliderz-next-btn" aria-hidden="true"></i></div> <div class="sliderz-pick"></div> </div>
CSS ▼
<style>img{max-width:100%} .sliderz-wrapper{overflow:hidden;width:100%;max-width:1000px;max-height:400px;margin:auto;position:relative;margin-bottom:20px} .sliderz-entry-list-wrapper{position:relative;width:100%;height:0;padding-top:30%;left:0;transition:.5s all cubic-bezier(0.78,-0.1,0.58,1)} .sliderz-entry-list{display:flex;justify-content:space-around;position:absolute;width:100%;height:100%;top:0;left:0} .sliderz-entry{width:33%;height:100%;box-sizing:border-box} .sliderz-preview-img{width:100%;height:100%} .sliderz-prev,.sliderz-next{width:50px;height:100%;position:absolute;z-index:2;opacity:.1;transition:.5s all ease-out;cursor:pointer} .sliderz-next{right:-20px;top:0} .sliderz-wrapper:hover .sliderz-prev,.sliderz-wrapper:hover .sliderz-next{opacity:1} .sliderz-prev-btn,.sliderz-next-btn{font-size:40px;position:absolute;top:46%;width:50px;height:50px;z-index:3;color:#fff;transition:.5s all ease-out} .sliderz-wrapper .sliderz-prev-btn{left:-30px} .sliderz-wrapper .sliderz-next-btn{right:-30px} .sliderz-wrapper:hover .sliderz-prev-btn{left:10px} .sliderz-wrapper:hover .sliderz-next-btn{right:10px} .sliderz-pick{position:absolute;top:80px;right:10px;display:flex}/*chinh nut*/ .sliderz-pick > .sliderz-number{width:14px;height:14px;margin:4px;background:rgba(255,255,255,0.78);display:block;border-radius:50%;cursor:pointer;transition:.5s all ease-out} .sliderz-pick > .sliderz-number:hover,.sliderz-pick > .sliderz-number.open{background:#f5003a} </style>
JS ▼
<script> var slider_entry = [ ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat1.gif"], ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat2.gif"], ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat3.gif"], ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat4.gif"], ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat5.gif"], ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat6.gif"], ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat7.gif"], ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat8.gif"], ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat9.gif"], ["title ảnh","Link tới","http://dat0007.sextgem.com/Hinh/Nen wap2/Dat10.gif"] ]; var slider_width = 100; // Chiều rộng slide (%) var sliderz_time = 6000; // Thời gian chuyển slide (s) var entry = "",pick="", slider_entry_len = slider_entry.length; for (var i = slider_entry_len-1; i>=0; i--) { entry += '<div class="sliderz-entry" style="width:'+100/slider_entry_len+'%"><a class="sliderz-preview" href="'+slider_entry[i][1]+'" target="_blank"><img class="sliderz-preview-img" src="'+slider_entry[i][2]+'" alt="'+slider_entry[i][0]+'"/></a></div>'; pick = '<span class="sliderz-number" data-slide-number='+i+' onclick="sliderz_goto(event)"></span>'+pick; } var slider_entry_wrapper = document.getElementsByClassName("sliderz-entry-list-wrapper")[0]; slider_entry_wrapper.style.width = slider_entry_len*slider_width + '%'; document.getElementsByClassName("sliderz-entry-list")[0].innerHTML = entry; document.getElementsByClassName("sliderz-pick")[0].innerHTML = pick; var slider_wrapper = document.getElementsByClassName("sliderz-wrapper")[0]; var sliderz_timer = setInterval(function(){sliderz_goto(-2);}, sliderz_time); slider_wrapper.addEventListener("mouseenter", function(){clearInterval(sliderz_timer);}); slider_wrapper.addEventListener("mouseleave", function(){sliderz_timer = setInterval(function(){sliderz_goto(-2);}, sliderz_time);}); var sliderz_goto = (function () { var slider_ctrl = document.getElementsByClassName("sliderz-entry-list-wrapper")[0]; var curpos = 0, range = slider_entry_len, slider_wid=slider_width; var pickls = document.getElementsByClassName("sliderz-number"); return function(pos) { if (pos==event) curpos = pos.target.dataset.slideNumber; else if (pos==-1) { curpos = --curpos%range; curpos=curpos<0?range-1:curpos; } else if (pos==-2) curpos = ++curpos%range; slider_ctrl.style.left = -curpos*slider_wid+"%"; for (var i = pickls.length-1; i>=0; i--) pickls[i].classList.remove("open"); pickls[curpos].classList.add("open"); } })(); slider_entry = ""; entry = ""; slider_entry_wrapper = ""; slider_wrapper = ""; pick = ""; slider_width = 0; slider_entry_len=0; </script>
Xem ▼
✔ Tải Code Chọn bộ 4 Mẩu
Không có nhận xét nào:
Đăng nhận xét
Trang chủ
Đăng ký:
Bài đăng (Atom)
Không có nhận xét nào:
Đăng nhận xét