تور بەت رەسىم پرويېكسىيسى ( ھەركەتچان رەسىم )

ئەلدەربەگ 211 0
- o +
تارقۇت ئېلانى

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

<div class="banner">
        <img class="change pre"  src="images/pre.png" >
        <img class="change next" src="images/next.png" >
        <div class="cirbox" >
            <div class="cir cr"></div>
            <div class="cir"></div>
            <div class="cir"></div>
            <div class="cir"></div>
        </div>
        <div class="imgbox">
            <img class="img im" src="images/banner-01.png">
            <img class="img" src="images/banner-02.png">
            <img class="img" src="images/banner-03.png">
            <img class="img" src="images/banner-04.png">
        </div>  
    </div>
    <div>
    </div>

CSS كودى :

.banner {
    width: 100%;
    height: 500px;
    background-color: aqua;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.imgbox {
    width: 100%;
    height: 500px;
    position: relative;
    background-color: #222222;
    overflow: hidden;
}
.img {
    position: absolute;
    display: none;
    left: 50%;
    margin-left: -683px;
}
.im {
    display: block;
}
.change {
    height: 100px;
    display: block;
    position: absolute;
    z-index: 20;
    opacity: 0.4;
    transition: 0.4s;
    top: 50%;
    margin-top: -50px
}
.change:hover {
    opacity: 1;
}
.pre {
    left: 1%;
}
.next {
    right: 1%;
}
.cirbox {
    width: 88px;
    position: absolute;
    bottom: 15px;
    z-index: 10;
    left: 50%;
    margin-left: -44px;
    cursor: pointer;
}
.cir {
    width: 12px;
    height: 12px;
    background-color: white;
    opacity: 0.4;
    float: left;
    border-radius: 6px;
    margin: 0 5px 0 5px;
    cursor: pointer;
}
.cir:hover {
    background-color: cyan;
    transition: 0.8s;
}
.cr {
    opacity: 1;
}
.cr:hover {
    background-color: white;
}

JQERY كودى :

document.write("<script src='http://libs.baidu.com/jquery/1.10.2/jquery.min.js'><\/script>");
$(document).ready(function(){
    var t;
    var index=-1;
    var times=3000;//切换速度
    t=setInterval(play,times);

    function play(){
        index++;
        if(index>3){index=0}
        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)
        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')
    }

    $('.cir').click(function(){
        $(this).addClass('cr').siblings().removeClass('cr')
        var index=$(this).index()
        $('.img').eq(index).fadeIn(600).siblings().fadeOut(600)
    })

    $('.pre').click(function(){
        index--
        if(index<0){index=3}
        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)
        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')
    })
    $('.next').click(function(){
        index++
        if(index>3){index=0}
        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)
        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')
    })

    $('.banner').hover(
        function(){
            clearInterval(t)
        },
        function(){
            t=setInterval(play,times)
            function play(){
                index++
                if(index>3){index=0}
                $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)
                $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')
            }
        }
    );

});
تارقۇت ئېلانى
باھا يوللاش جاۋاپ