首页 تور بەتچىلىك

مەرھابا ، ئەزىز دوستۇم ! باسقان قەدىمىڭىز قۇتلۇق بولسۇن !
كونا ئادىتىم بويىچە ئۆزۈم ياقتۇرغان كودلارنى يوللىدىم ، بۇنىڭدىكى مەخسەت شۇ مەندەك ھىچقانداق نەرسىنى زاپاسلىمايدىغان ( ساقلىمايدىغان ) لار ئۈچۈن بۇ كودلارنىڭ لازىمى تىگىپ قالار دەپ شۇ ، مەزكۇر يازمىدا يوللايدىغان كودىمىز بولسا ھەركەتجان رەسىم كودى ( پىروكسىيە - تەرجىمان شۇنداق ئالىدىكەن ) بولۇپ ئەگەر سىز ئىشلىتىۋاتقان ئۇسلۇپنىڭ ھەركەتجان رەسىم قىسمى بولمىسا مۇشۇنى ئىشلىتىش ئارقىلىق ۋاقىتلىق ھاجىتىڭىزدىن قسىڭىز بولىدۇ .
★ ھەركەتجان رەسىم html كودى

<div class="slideshow-container">
<a href="https://m.mom1.cn/y0gxzs"rel="external nofollow">
<div class="mymom fade">
<div class="numbertext"> تارقۇت بىلوگى
</div>
<img src="https://ae01.alicdn.com/kf/H2e7e835c3c1d4f169c4227e9fa5dcebfB.jpg"style="width:100%">
<div class="momtext"> تارقۇت بىلوگى
</div>
</div>
</a>
<a href="https://m.mom1.cn/y0gxzs"rel="external nofollow">
<div class="mymom fade"><div class="numbertext"> تارقۇت بىلوگى
</div>
<img src="https://ae01.alicdn.com/kf/Hb38733c403e44e99bce24d253262e936Q.jpg"style="width:100%">
<div class="momtext"> تارقۇت بىلوگى
</div>
</div>
</a>
<div class="mymom fade">
<div class="numbertext"> تارقۇت بىلوگى
</div>
<img src="https://cdn.mom1.cn/?mom=302"style="width:100%">
<div class="momtext">
</div>
</div>
</div>
<div style="text-align:center">
<span class="dot">
</span>
<span class="dot">
</span>
<span class="dot">
</span>
</div>

★ ھەركەتجان رەسىم css كودى

.mymom{
    display:none
}
.slideshow-container{
    max-width:100%;
    position:relative;
    margin:auto;
    
}
.slideshow-container img{
    height:280px;
    
}
.prev,.next{
    cursor:pointer;
    position:absolute;
    top:50%;
    width:auto;
    margin-top:-22px;
    padding:16px;
    color:white;
    font-weight:bold;
    font-size:18px;
    transition:0.6s ease;
    border-radius:0 3px 3px 0;
    
}
.next{
    right:0;
    border-radius:3px 0 0 3px;
    
}
.prev:hover,.next:hover{
    background-color:rgba(0,0,0,0.8);
    
}
.momtext{
    color:#f2f2f2;
    font-size:20px;
    padding:10%;
    position:absolute;
    width:100%;
    text-align:center;
    
}
.numbertext{
    color:#f2f2f2;
    font-size:20px;
    padding:8px 12px;
    position:absolute;
    top:0;
    background-color:#619d62;
    border-radius:5px 0px 0px 0px;
    
}
.dot{
    height:10px;
    width:33%;
    background-color:#e1d9d9;
    display:inline-block;
    transition:background-color 0.6s ease;
    
}
.active,.dot:hover{
    background-color:#717171;
    
}
.fade{
    -webkit-animation-name:fade;
    -webkit-animation-duration:1.5s;
    animation-name:fade;
    animation-duration:1.5s;
    
}
@-webkit-keyframes fade{
    from{
    opacity:.4
}
to{
    opacity:1
}
 
}
@keyframes fade{
    from{
    opacity:.4
}
to{
    opacity:1
}

★ ھەركەتجان رەسىم js كودى

var slideIndex=0;
    showSlides();
    function showSlides(){
    var i;
    var slides=document.getElementsByClassName("mymom");
    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,5000)
}


文章评论