python轮播效果源代码
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>轮播效果</title>
<style>
*{
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;
jquery自动轮播图代码height: 400px;
}
.dot{
width: 100%;
height: 50px;
background: aqua;
position: relative;
bottom: 50px;
text-align: center;
line-height: 50px;
}
.dot div {
display: inline-block;
display: inline-block;
width: 14px;
height: 14px;
background: white;
border: 1px solid red;
border-radius: 8px;
}
.dot .selected{
background: purple;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<button class="ctrl prev"><</button>
<button class="ctrl next"> > </button>
<div class="content">
<img src="03.jpg" >#写你⾃⼰的图⽚路径就可以了
<img src="01.jpg" >
<img src="02.jpg" >
</div>
<div class="dot">
<div  class="selected"></div>
<div></div>
<div></div>
</div>
</div>
</body>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script >
$(function() {
//记录现实的序号
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() {
$('.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')
})
})
})
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。