您的位置：首页 > 其它

仿优酷频道首页的图片切换效果

2014-10-16 00:08 344 查看

效果：

　　

require('effect', function(S) {
var now=3,total = S('img').size();
S('#bottom_nav div').on('click',function(){
var ref=S(this).attr('ref');
if(now < ref){
var rightAbs = ref - now;
var leftAbs = now + total - ref;
}else{
var rightAbs =total -now + ref;
var leftAbs =now - ref;
}
if(leftAbs < rightAbs){
dir = "left";
}else{
dir = "right";
}
S('#slide div').css('zIndex','0');
S("#slide div").anim({
to : {
left : '585px',
marginTop : '135px',
width : '0px',
height : '0px',
opacity : 0
},
duration : 100
});
if(dir=='right'){
slide.turn_page(parseInt(ref)-1,dir);
now=parseInt(ref);
}
else {
slide.turn_page(parseInt(ref)+1,dir);
now=parseInt(ref);
}
S("#bottom_nav div:nth-child('"+ref+"')").addClass('buttomNavButtonOn');
});
S('#control_left').on('click', function() {
slide.turn_page(now,'left');
S("#bottom_nav div:nth-child('"+slide.prev(now)+"')").addClass('buttomNavButtonOn');
now=slide.prev(now);
});
S('#control_right').on('click', function() {
slide.turn_page(now,'right');
S("#bottom_nav div:nth-child('"+slide.next(now)+"')").addClass('buttomNavButtonOn');
now=slide.next(now);
});
var slide = (function() {
var total = S('img').size();
slide = {
next : function(now) {
var next;
if (parseInt(now) + 1 > total)
next = 1;
else
next = now + 1;
return next;
},
prev : function(now) {
var prev;
if (parseInt(now) - 1 ==0)
prev = total;
else
prev = now - 1;
return prev;
},
turn_page : function(now,dir) {
S('#slide div').css('zIndex','0');
S('#bottom_nav div').removeClass('buttomNavButtonOn');
S("#slide div:nth-child('" + now + "')").css('zIndex','1');
if(dir=='left'){
S("#slide div:nth-child('" + this.next(now) + "')").css('zIndex','0');
S("#slide div:nth-child('" + this.prev(now) + "')").css('zIndex','2');
S("#slide div:nth-child('" +this.prev( this.prev(now)) + "')").css('zIndex','1');
S("#slide div:nth-child('" + now + "')").anim({
to : {
left : '660px',
marginTop : '23px',
width : '530px',
height : '224px',
opacity : 0.4
},
duration : 800
});
S("#slide div:nth-child('" + this.next(now) + "')").anim({
to : {
left : '1190px',
marginTop : '85px',
width : '530px',
height : '100px',
opacity : 0
},
complete : function() {
S(this).css('left', '-530px');
},
duration : 800
});
S("#slide div:nth-child('" + this.prev(now) + "')").anim({
to : {
left : '275px',
marginTop : '0px',
width : '640px',
height : '270px',
opacity : 1
},
duration : 800
});
S("#slide div:nth-child('" +this.prev( this.prev(now)) + "')").anim({
to : {
left : '0px',
marginTop : '23px',
width : '530px',
height : '224px',
opacity : 0.4
},
duration : 800
});
}else{
S("#slide div:nth-child('" + this.next(now) + "')").css('zIndex','2');
S("#slide div:nth-child('" + this.prev(now) + "')").css('zIndex','0');
S("#slide div:nth-child('" +this.next( this.next(now)) + "')").css('zIndex','1');
S("#slide div:nth-child('" +this.next( this.next(now)) + "')").css('left', '1190px');
S("#slide div:nth-child('" + now + "')").anim({
to : {
left : '0px',
marginTop : '23px',
width : '530px',
height : '224px',
opacity : 0.4
},
duration : 800
});
S("#slide div:nth-child('" + this.next(now) + "')").anim({
to : {
left : '275px',
marginTop : '0px',
width : '640px',
height : '270px',
opacity : 1
},
duration : 800
});
S("#slide div:nth-child('" + this.prev(now) + "')").anim({
to : {
left : '-530px',
marginTop : '85px',
width : '530px',
height : '100px',
opacity : 0
},
duration : 800
});
S("#slide div:nth-child('" +this.next( this.next(now)) + "')").anim({
to : {
left : '660px',
marginTop : '23px',
width : '530px',
height : '224px',
opacity : 0.4
},
duration : 800
});
}
}
};
return slide;
})();
});

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="http://localhost/cd/skipalong/seed.js"></script>
<script type="text/javascript"
src="http://localhost/cd/skipalong/slide.js"></script>
</head>
<body>
<div id='container'>
<div id='bottom_nav'>
<div class="bottomNavButtonOFF" ref='1'></div>
<div class="bottomNavButtonOFF" ref='2'></div>
<div class="bottomNavButtonOFF buttomNavButtonOn" ref='3'></div>
<div class="bottomNavButtonOFF" ref='4'></div>
<div class="bottomNavButtonOFF" ref='5'></div>
<div class="bottomNavButtonOFF" ref='6'></div>
</div>
<div id='slide'>
<div
style='width: 530px; height: 100px; opacity: 0; left: -530px; z-index: 0; margin-top: 85px;'
ref='1'>
<img src="img/1.jpeg">
</div>
<div
style='width: 530px; height: 224px; opacity: 0.4; left: 0px; z-index: 1; margin-top: 23px;'
ref='2'>
<img src="img/2.jpeg">
</div>
<div
style='width: 640px; height: 270px; opacity: 1; left: 275px; z-index: 2; margin-top: 0px;'
ref='3'>
<img src="img/3.jpeg">
</div>
<div
style='width: 530px; height: 224px; opacity: 0.4; left: 660px; z-index: 1; margin-top: 23px;'
ref='4'>
<img src="img/4.jpeg">
</div>
<div
style='width: 530px; height: 100px; opacity: 0; left: -530px; z-index: 0; margin-top: 85px;'
ref='5'>
<img src="img/5.jpeg">
</div>
<div
style='width: 530px; height: 100px; opacity: 0; left: -530px; z-index: 0; margin-top: 85px;'
ref='6'>
<img src="img/6.jpeg">
</div>
</div>
<div id='banner_control'>
<div id='control_left'></div>
<div id='control_right'></div>
</div>
</div>
</body>
</html>

<style type="text/css">
body,div,img {
margin: 0;
padding: 0;
}

#container {
height: 310px;
border: 1px solid red;
overflow: hidden;
position: relative;
width: 1190px;
}

#slide,#banner_control,#slide div {
position: absolute;
cursor: pointer;
}

img {
height: 100%;
width: 100%;
}

#banner_control {
width: 100%;
}

#control_left,#control_right {
position: absolute;
cursor: pointer;
height: 45px;
width: 45px;
z-index: 4;
top: 100px;
display: block;
}

#control_left {
background-image: url('http://localhost/cd/img/control_left.png');
left: 7px;
}

#control_right {
background-image: url('http://localhost/cd/img/control_right.png');
right: 7px;
}

.bottomNavButtonOFF {
background: none repeat scroll 0 0 #C3C3C3;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block;
height: 10px;
margin: 0 5px;
overflow: hidden;
vertical-align: top;
width: 10px;
}

.buttomNavButtonOn {
background: none repeat scroll 0 0 #69AAEC;
}

#bottom_nav {
height: 10px;
margin-top: 270px;
padding: 10px 0 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 140;
}
</style>

S是自己的类库，和jquery差不多，函数看名字都知道是啥意思

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航