python特效源代码,python 轮播效果源代码

轮播效果

*{

margin: 0px ;

padding: 0px;

}

body {

background: green;

}

.box{

width: 600px;

height: 400px;

margin: 50px auto;

overflow:hidden;

position: relative;

}

.ctrl{

width: 50px;

height: 50px;

color: red;

font-size: 50px;

text-align:center;

line-height:50px;

background: none;

border: none;

outline: none;

cursor: pointer;

position: absolute;

z-index: 10;

top:40%;

display: none;

}

.next {

right:0;

}

.content{

width: 1800px;

height: 400px;

position: relative;

left:-600px;

}

img {

display: block;float: left;

width: 600px;

height: 400px;

}

.dot{

width:100%;

height: 50px;

background: aqua;

position: relative;

bottom: 50px;

text-align: center;

line-height: 50px;

}

.dot div {

display: inline-block;

width: 14px;

height: 14px;

background: white;

border: 1px solid red;

border-radius: 8px;

}

.dot .selected{

background: purple;

font-weight: bold;

}

<

>

#写你自己的图片路径就可以了

var index=0$('.box').hover(function() {

$('.ctrl').show(300)

},function() {

$('.ctrl').hide(300)

})//prev 按钮

$('.prev').click(function() {//若内容正在动画，则立即返回

if ($('.content').is(':animated')){return}

$('.content').animate({left:0},'slow','linear',function() {//动画结束后，将最后一张图查到最开头

$('.content').prepend($('img:last'))//重新设置偏移

$('.content').css('left','-600px')//记录图片序号

if(--index==-1){

index=2}

$('.dot div').eq(index).addClass('selected').siblings().

removeClass('selected')

})

$('.dot div').eq(index).click()

})//next 按钮

$('.next').click(function() {//若内容正在动画，则立即返回

if ($('.content').is(':animated')){return}

$('.content').animate({left:'-1200px'},'slow','linear',function() {//动画结束后，将最后一张图查到最开头

$('.content').append($('img:first'))//重新设置偏移

$('.content').css('right','-600px')if(++index==3) {

index=0}

$('.dot div').eq(index).addClass('selected').siblings().

removeClass('selected')

})

})

})