banner.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.bodel{
width: 550px;
height: 452px;
background: #2AE186;
border-radius: 10px;
z-index: 9;
margin-top: -25px;
}
.bodel i{
display: block;
color: #FFFFFF;
font-size: 21px;
font-weight: 600;
font-style: normal;
margin-left: 70px;
margin-top: 20px;
}
.bodel p{
color: #375745;
font-size: 13px;
padding: 0 90px;
margin-top: 10px;
}
.box{
width:550px;
height: 240px;
border-radius: 10px;
position: relative;
background: #2AE186;
}
.box .list{
width: 370px;
height:225px;
overflow: hidden;
position: absolute;
left: 17%;
top:10%;
}
.box .list ul > img:nth-child(5){
position: absolute;
left: 3%;
z-index: 9;
opacity: 0.3;
}
.box .list ul > img:nth-child(7){
position: absolute;
right: 6%;
z-index: 9;
opacity: 0.3;
}
.box .btn{
position: absolute;
top: 52%;
margin-top: -50px;
width: 70px;
height: 100px;
line-height: 100px;
font-size: 30px;
color: white;
text-decoration: none;
text-align: center;
cursor: pointer;
}
.box .prev{
background: url(../../static/images/Age_season/20.png) no-repeat -65% 0%;
}
.box .next{
background: url(../../static/images/Age_season/20.png) no-repeat 162% 0%;
right: 0;
}
.list ul li{
position: absolute;
top: 0;
left: 0;
list-style: none;
opacity: 0;
transition: all 0.3s ease-out;
}
.list ul li p {
display: none;
text-align: center;
line-height: 42px;
font-size: 14px;
color: #393939;
margin-left: -35%;
font-weight: 600;
width: 265px;
text-indent: 5em;
}
.list ul li img{
width: 200px;
height: 180px;
border:none;
float: left;
margin-top: 8px;
}
.list ul li.p1{
transform:translate3d(-224px,0,0) scale(0.81);
}
.list ul li.p2{
transform:translate3d(0px,0,0) scale(0.81);
transform-origin:0 50%;
opacity: 0.8;
z-index: 2;
}
.list ul li.p3{
transform:translate3d(80px,0,0) scale(1);
z-index: 3;
opacity: 1;
}
.list ul li.p3 p{
display: block;
}
.list ul li.p4{
transform:translate3d(170px,0,0) scale(0.81);
transform-origin:100% 50%;
opacity: 0.8;
z-index: 2;
}
.list ul li.p5{
transform:translate3d(672px,0,0) scale(0.81);
}
.list ul li.p6{
transform:translate3d(896px,0,0) scale(0.81);
}
.list ul li.p7{
transform:translate3d(1120px,0,0) scale(0.81);
}
</style>
</head>
<body>
<div class="bodel fl">
<i>1.错题管理九步走</i>
<p>内部讲义，统一习题，规范错题管理，教你如何掌握由点到面再到知识体系的一套完美学习方法</p>
<div class="box">
<div class="list">
<ul id="3d-ul">
<li class="p7">
<a href="#"><img src="../../static/images/Age_season/24.png" alt="" /></a>
<p>面：错题管理5-6步</p>
</li>
<li class="p6">
<a href="#"><img src="../../static/images/Age_season/23.png" alt="" /></a>
<p>点:错题管理1-4步</p>
</li>
<li class="p5">
<a href="#"><img src="../../static/images/Age_season/25.png" alt="" /></a>
<p>体：错题管理7-9步</p>
</li>
<li class="p4">
<a href="#"><img src="../../static/images/Age_season/24.png" alt="" /></a>
<p>面：错题管理5-6步</p>
</li>
<img src="../../static/images/Age_season/22.png" alt="">
<li class="p3">
<a href="#"><img src="../../static/images/Age_season/23.png" alt="" /></a>
<p>点:错题管理1-4步</p>
</li>
<img src="../../static/images/Age_season/21.png" alt="">
<li class="p2">
<a href="#"><img src="../../static/images/Age_season/24.png" alt="" /></a>
<p>面：错题管理5-6步</p>
</li>
<li class="p1">
<a href="#"><img src="../../static/images/Age_season/25.png" alt="" /></a>
<p>体：错题管理7-9步</p>
</li>
</ul>
</div>
<a href="javascript:;" class="next btn"></a>
<a href="javascript:;" class="prev btn"></a>
</div>
<i>2.分享式互动教学</i>
<p>分享式互动教学，建立互动、开放、有活力的课堂，提高学习积极性。</p>
</div>
</body>
<script type="text/javascript" src="../../static/js/jquery-1.8.3.min.js"></script>
<script>
var $a=$(".buttons a");
var cArr=["p7","p6","p5","p4","p3","p2","p1"];
var index=0;
$(".next").click(
function(){
nextimg();
}
)
$(".prev").click(
function(){
previmg();
}
)
//上一张
function previmg(){
cArr.unshift(cArr[6]);
cArr.pop();
$("#3d-ul li").each(function(i,e){
$(e).removeClass().addClass(cArr[i]);
})
index--;
if (index<0) {
index=6;
}
}
//下一张
function nextimg(){
cArr.push(cArr[0]);
cArr.shift();
$("#3d-ul li").each(function(i,e){
$(e).removeClass().addClass(cArr[i]);
})
index++;
if (index>6) {
index=0;
}
}
//点击class为p2的元素触发上一张照片的函数
$(document).on("click",".p2",function(){
previmg();
return false;//返回一个false值，让a标签不跳转
});
//点击class为p4的元素触发下一张照片的函数
$(document).on("click",".p4",function(){
nextimg();
return false;
});
// 鼠标移入box时清除定时器
$(".box").mouseover(function(){
clearInterval(timer);
})
// 鼠标移出box时开始定时器
$(".box").mouseleave(function(){
timer=setInterval(nextimg,11111111114000);
})
// 进入页面自动开始定时器
timer=setInterval(nextimg,2200);
</script>
</html>
