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

تارقۇت ئېلانى

مەرھابا ، ئەزىز دوستۇم ! باسقان قەدىمىڭىز قۇتلۇق بولسۇن !
ھازىر بۇ يەردە مەن تورداشلارغا بىر تور بەت پىرويېكسىيە پىلاستىنكىسى ( ھەركەتچان رەسىم ) كودىنى يوللاپ بەرمەكچى ئالدىنقى قېتىمقى يازمىدىمۇ بىر يوللىغان لىكىن بۇ ئىككىسىنىڭ كۆرۈنۈش شەكلى ئوخشىمايدۇ ، قايسى خىل شەكىلنى ياقتۇرغان بولسىڭىز شۇنى ئىشلەتسىڭىز بولىدۇ ، ھەرقانداق بىر تور بەتكە ئىشلەتكىلى بولىدۇ ، پەقەت كودتىكى رەسىم ۋە يېزىقنى ئۆزىنىڭكىگە خاسلاشتۇرۇپ ئىشلەتسەكلا بولىدۇ .
تۆۋەندىكى پىرويېكسىيە پىلاستىنكىسى ( ھەركەتچان رەسىم ) ئۈنۈم رەسىمى :
تور بەت رەسىم پرويېكسىيسى ( ھەركەتچان رەسىم )
تۆۋەندىكى پىرويېكسىيە پىلاستىنكىسى ( ھەركەتچان رەسىم ) كودى :
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')
}
}
);

});
تارقۇت ئېلانى