仿flash輪播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//css樣式
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #222;
}
.flash {
width: 760px;
height: 300px;
background: #1f1f1f;
margin: 100px auto 0;
border-radius: 20px;
box-shadow: 0 0 6px 1px #fff;
padding: 20px;
}
.flash .content {
width: 760px;
height: 300px;
/* overflow:hidden;*/
position: relative;
}
.flash .content .con {
width: 760px;
height: 300px;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
display: none;
}
.flash .content .con:nth-child(1) {
background: url(img/bg1.jpg);
display: block;
}
.flash .content .con:nth-child(2) {
background: rgb(230, 108, 87);
}
.flash .content .con:nth-child(3) {
background: rgb(32, 47, 61);
}
.flash .content .con:nth-child(4) {
background: url(img/bg2.jpg);
}
.flash .content .con img {
position: absolute;
}
.flash .content .con img.f-1-1 {
left: -340px;
top: 80px;
opacity: 0;
}
.flash .content .con img.f-1-2 {
left: -340px;
top: 150px;
opacity: 0;
}
.flash .content .con img.f-1-3 {
left: 760px;
top: 0px;
opacity: 0;
}
.flash .content .con img.f-2-1 {
left: 20px;
top: 170px;
opacity: 0;
}
.flash .content .con img.f-2-2 {
left: 20px;
top: 300px;
opacity: 0;
}
.flash .content .con img.f-2-3 {
left: 420px;
top: 300px;
opacity: 0;
}
.flash .content .con img.f-3-1 {
left: 200px;
top: 120px;
opacity: 0;
}
.flash .content .con img.f-3-2 {
left: 320px;
top: 300px;
opacity: 0;
}
.flash .content .con img.f-3-3 {
left: -110px;
top: 0px;
opacity: 0;
}
.flash .content .con img.f-4-1 {
left: 80px;
top: 300px;
opacity: 0;
}
.flash .content .con img.f-4-2 {
left: 340px;
top: 80px;
opacity: 0;
}
.flash .content .con img.f-4-3 {
left: 340px;
top: 220px;
opacity: 0;
}
.flash .btn {
position: absolute;
top: 50%;
margin-top: -28px;
}
.flash .left {
left: 0;
}
.flash .right {
right: 0;
}
</style>
</head>
<body>
//html
<div class="flash">
<div class="content">
div class="con">
<img class="f-1-1" src="img/flash1.png" />
<img class="f-1-2" src="img/flash12.png" />
<img class="f-1-3" src="img/flash13.png" />
</div>
<div class="con">
<img class="f-2-1" src="img/flash2.png" />
<img class="f-2-2" src="img/flash22.png" />
<img class="f-2-3" src="img/flash23.png" />
</div>
<div class="con">
<img class="f-3-1" src="img/flash3.png" />
<img class="f-3-2" src="img/flash32.png" />
<img class="f-3-3" src="img/flash33.png" />
</div>
<div class="con">
<img class="f-4-1" src="img/flash4.png" />
<img class="f-4-2" src="img/flash42.png" />
<img class="f-4-3" src="img/flash43.png" />
</div>
<img class="btn left" src="img/left.png" />
<img class="btn right" src="img/right.png" />
</div>
</div>
</body>
//js
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var _index = 0; //序列號
var arrCss = []; //存放樣式
var Class=[]; //存放類名
var timer=null;
Css();
auto();
// move();
function auto() {
$(‘.flash .content .con‘).eq(_index).find(‘img‘).removeAttr(‘style‘);
$(‘.flash .content .con‘).eq(_index).find(Class[0]).animate(arrCss[0], 1000, function() {
$(‘.flash .content .con‘).eq(_index).find(Class[1]).animate(arrCss[1], 1000, function() {
$(‘.flash .content .con‘).eq(_index).find(Class[2]).animate(arrCss[2], 1000)
})
});
}
//判斷對應樣式 根據序列號
function Css() {
$(‘.flash .content .con‘).eq(_index).fadeIn().siblings(‘.con‘).fadeOut();
if(_index == 0) {
Class=[‘.f-1-1‘,‘.f-1-2‘,‘.f-1-3‘];
arrCss = [{‘left‘: ‘20px‘,‘opacity‘:1},{‘left‘: ‘20px‘,‘opacity‘:1},{‘left‘: ‘315px‘,‘opacity‘:1}]
}else if(_index==1){
Class=[‘.f-2-1‘,‘.f-2-2‘,‘.f-2-3‘];
arrCss = [{‘top‘: ‘50px‘,‘opacity‘:1},{‘top‘: ‘160px‘,‘opacity‘:1},{‘top‘: ‘0px‘,‘opacity‘:1}]
}else if(_index==2){
Class=[‘.f-3-1‘,‘.f-3-2‘,‘.f-3-3‘];
arrCss = [{‘left‘: ‘320px‘,‘opacity‘:1},{‘top‘: ‘200px‘,‘opacity‘:1},{‘opacity‘:1}]
}else if(_index==3){
Class=[‘.f-4-1‘,‘.f-4-2‘,‘.f-4-3‘];
arrCss = [{‘top‘: ‘0px‘,‘opacity‘:1},{‘opacity‘:1},{‘top‘: ‘220px‘,‘opacity‘:1}]
}
}
function move(){
_index++;
if(_index>3){_index=0};
Css()
auto();
}
$(‘.left‘).click(function() {
_index++;
if(_index>3){_index=0};
Css()
auto();
});
$(‘.right‘).click(function() {
_index--;
if(_index<0){_index=3};
Css()
auto();
});
timer=setInterval(move,8000)
</script>
</html>
仿flash輪播