两种轮播方式
2017-03-30 本文已影响0人
饥人谷_風逝
1.走马灯预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script>
</head>
<style>
.layout{
text-align: center;
width: 1000px;
margin:0 auto;
}
ul,li{
list-style: none;
padding: 0;
margin:0;
}
.album{
position: relative;
height: 360px;
left:-480px;
}
.album li{
float:left;
}
li img{
float:left
width:480px;
height: 360px;
}
.ct{
position: relative;
width:480px;
overflow: hidden;
margin:0 auto;
}
.btn{
cursor: pointer;
font-size: 40px;
display: inline-block;
position: absolute;
vertical-align: middle;
width:40px;
height: 40px;
line-height:40px;
color:white;
border-radius: 50%;
background: rgba(50,50,50,0.5);
top:50%;
transform: translate(0,-50%);
}
.btn-next{
right:5%;
}
.btn-pre{
left:5%;
}
.wrap{
position: absolute;
bottom:5%;
left:0;
right: 0;
text-align: center;
}
.bullet li{
border: 3px solid #8E8E8E;
cursor: pointer;
display: inline-block;
height:10px;
width: 30px;
background: #E9E9E9;
border-radius: 10px;
}
.bullet .active{
background: #8E8E8E;
}
</style>
<body>
<div class="layout">
<div class="ct">
<ul class='album'>
<li class="0"></li>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
<span class="btn btn-pre"><</span>
<span class="btn btn-next">></span>
<div class="bullet wrap">
<ul class='bullet'>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<script>
var $album = $('.album'),
$imgs=$('.album').children(),
curImg=0,
imgWidth=480,
imgNum=$album.children('li').length,
lock=false;
$album.append($imgs.first().clone());
$album.prepend($imgs.last().clone());
$album.css('width',(imgNum+2)*imgWidth+'px');
$('.btn-next').click(function(){
playNext()
})
$('.btn-pre').click(function(){
playPre()
})
$('.bullet li').click(function(){
gap=$(this).index()-curImg
if(gap>0){playNext(gap)}else{playPre(-gap)}
})
function playNext(n){
if (lock||n===0){return void(0)}else{lock=true};
if (!n){n=1}
$album.animate({
left:'-='+imgWidth*n},function(){
curImg+=n;
if(curImg===imgNum){
$album.css('left',-imgWidth+'px')
curImg=0
}
setBullet();
lock=false;
})
}
function playPre(n){
if (lock||n===0){return void(0)}else{lock=true};
if (!n){n=1}
$album.animate({
left:'+='+imgWidth*n},function(){
curImg-=n;
if(curImg===-1){
$album.css('left',-imgNum*imgWidth+'px')
curImg=imgNum-1
}
setBullet();
lock=false;
})
}
function setBullet(){
$('.bullet .active').removeClass('active')
$('.bullet li').eq(curImg).addClass('active')
}
</script>
</body>
</html>
2.渐隐渐现预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script>
</head>
<style>
.layout{
text-align: center;
width: 1000px;
margin:0 auto;
}
ul,li{
list-style: none;
padding: 0;
margin:0;
}
.album{
position: relative;
height: 360px;
}
.album li{
position:absolute;
display: none;
}
.album .show{
display: list-item;
opacity: 0;
}
li img{
width:480px;
height: 360px;
}
.ct{
position: relative;
width:480px;
overflow: hidden;
margin:0 auto;
}
.btn{
cursor: pointer;
font-size: 40px;
display: inline-block;
position: absolute;
vertical-align: middle;
width:40px;
height: 40px;
line-height:40px;
color:white;
border-radius: 50%;
background: rgba(50,50,50,0.5);
top:50%;
transform: translate(0,-50%);
}
.btn-next{
right:5%;
}
.btn-pre{
left:5%;
}
.wrap{
position: absolute;
bottom:5%;
left:0;
right: 0;
text-align: center;
}
.bullet li{
border: 3px solid #8E8E8E;
cursor: pointer;
display: inline-block;
height:10px;
width: 30px;
background: #E9E9E9;
border-radius: 10px;
}
.bullet .active{
background: #8E8E8E;
}
</style>
<body>
<div class="layout">
<div class="ct">
<ul class='album'>
<li class="show" style='opacity: 1'></li>
<li ></li>
<li ></li>
<li ></li>
</ul>
<span class="btn btn-pre"><</span>
<span class="btn btn-next">></span>
<div class="bullet wrap">
<ul class='bullet'>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<script>
var $album = $('.album'),
$imgs=$('.album').children(),
curImg=0,
imgWidth=480,
imgNum=$album.children('li').length,
lock=false;
// $album.append($imgs.first().clone());
// $album.prepend($imgs.last().clone());
$album.css('width',(imgNum+2)*imgWidth+'px');
$('.btn-next').click(function(){
playNext()
})
$('.btn-pre').click(function(){
playPre()
})
$('.bullet li').click(function(){
gap=$(this).index()-curImg
if(gap>0){playNext(gap)}else{playPre(-gap)}
})
var timer=setInterval(function(){
playNext();},2500)
$('.ct').mouseenter(function(){clearInterval(timer)})
$('.ct').mouseleave(function(){timer=setInterval(function(){
playNext();},2500)})
function playNext(n){
if (lock||n===0){return void(0)}else{lock=true};
if (!n){n=1};
$('.album li').eq(curImg).removeClass('show').removeAttr('style');
if(curImg===imgNum-1){
curImg=0;}else{
curImg=curImg+n}
$('.album li').eq(curImg).addClass('show');
$('.album li').eq(curImg).animate({
'opacity':'1'},800,function(){
setBullet();
lock=false;
})
}
function playPre(n){
if (lock||n===0){return void(0)}else{lock=true};
if (!n){n=1};
$('.album li').eq(curImg).removeClass('show').removeAttr('style');
if(curImg===0){
curImg=imgNum-1;}else{
curImg=curImg-n}
$('.album li').eq(curImg).addClass('show');
$('.album li').eq(curImg).animate({
'opacity':'1'},800,function(){
setBullet();
lock=false;
})
}
function setBullet(){
$('.bullet .active').removeClass('active')
$('.bullet li').eq(curImg).addClass('active')
}
</script>
</body>
</html>
