平移轮播：
预览：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu27-1.html#
源码：
<html>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
</script>
<style>
*{
padding:0px;
margin:0px;
}
li{
list-style:none;
}
.ul{
width:2880px;
position:relative;
left:-960px;
}
.ul li{
float:left;
left:100px;
}
.clearfloat::after{
content: ' ';
display: block;
clear: both;
}
.clearfloat::before{
content: ' ';
display: block;
clear: both;
}
.wrap{
width:480px;
height:360px;
position:absolute;
overflow:hidden;
margin:20px;
}
.wrap>a{
text-decoration:none;
width:30px;
height:30px;
line-height:30px;
padding-left:0px;
margin:15px;
border-radius:30px;
position:absolute;
z-index:10;
top:40%;
font-size:15px;
text-align: center;
background-color:black;
color:#fff;
opacity:0.4;
}
.wrap .right{
right:0px;
}
.wrap>a:hover{
opacity:0.7;
}
.choosebtn{
height: 12px;
width: 200px;
position: absolute;
top: 90%;
left:30%;
}
.choosebtn a{
float: left;
height: 10px;
width: 40px;
z-index: 10px;
background-color: grey;
border-radius: 5px;
margin-left: 8px;
opacity: 0.6;
}
.choosebtn a:hover{
opacity: 1;
}
.choosebtn .choosebtn-1{
opacity: 1;
}
</style>
</head>
<body>
<div class='wrap'>
<ul class='ul clearfloat'>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
</ul>
<ul class='choosebtn clearfloat'>
<li><a href='#' class='choosebtn-1'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
</ul>
<a href='#' class='left'><</a>
<a href='#' class='right'>></a>
</div>
<script>
var $l=$('.left'),
$r=$('.right'),
$ul=$('.ul'),
$choosebtn=$('.choosebtn'),
state=true;
function leftmove(){
clearInterval(animating);
$ul.animate({left:'+=480'},1500, backdiv);
animating=setInterval(rightmove, 4000);
}
function rightmove(){
clearInterval(animating);
$ul.animate({left:'-=480'},1500, backdiv);
animating=setInterval(rightmove, 4000);
}
function backdiv(){
if($ul.css('left')=='0px'){
$ul.css({left:'-1920px'});
}
if($ul.css('left')=='-2400px'){
$ul.css({left:'-480px'});
}
btnclass(btn.location());
state=true;
}
function btnclass(num){
$choosebtn.children().children().removeClass('choosebtn-1');
$choosebtn.children().eq(num).children().addClass('choosebtn-1');
}
var btn={
location:function(){
var num;
if(parseInt($ul.css('left'))/480+2==0){
num=0;
};
if(parseInt($ul.css('left'))/480+2==-1){
num=1;
};
if(parseInt($ul.css('left'))/480+2==-2){
num=2;
};
if(parseInt($ul.css('left'))/480+2==1){
num=3;
};
return num;
},
clicklocation: function(p){
return p.index('a')-6
}
}
$l.on('click', function(){
if(!state){return;};
state=false;
leftmove();
})
$r.on('click', function(){
if(!state){return;};
state=false;
rightmove();
})
$choosebtn.on('click', 'a', function(){
clearInterval(animating);
var tmp=btn.location()-btn.clicklocation($(this));
if(tmp==2||tmp==3){
$ul.css({left:'-2400px'});
}
if(tmp>0){
$ul.animate({left:'+='+tmp*480},1500, backdiv);
}
if(tmp<0){
$ul.animate({left:'-='+Math.abs(tmp)*480},1500, backdiv);
}
else{
return;
}
animating=setInterval(rightmove, 4000);
});
var Timeout=setTimeout(rightmove, 2000),animating;
</script>
</body>
</html>
渐变轮播
预览：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu27-2.html
源码：
<html>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
</script>
<style>
*{
padding:0px;
margin:0px;
}
li{
list-style:none;
}
.ul{
width:2880px;
position:relative;
}
.ul li{
position:absolute;
float:left;
display:none;
}
.ul li:first-child{
display:block;
}
.clearfloat::after{
content: ' ';
display: block;
clear: both;
}
.clearfloat::before{
content: ' ';
display: block;
clear: both;
}
.wrap{
width:480px;
height:360px;
position:absolute;
overflow:hidden;
margin:20px;
}
.wrap>a{
text-decoration:none;
width:30px;
height:30px;
line-height:30px;
padding-left:0px;
margin:15px;
border-radius:30px;
position:absolute;
z-index:10;
top:40%;
font-size:15px;
text-align: center;
background-color:black;
color:#fff;
opacity:0.4;
}
.wrap .right{
right:0px;
}
.choosebtn{
height: 12px;
width: 200px;
position: absolute;
top: 90%;
left:30%;
}
.choosebtn a{
float: left;
height: 10px;
width: 40px;
z-index: 10px;
background-color: grey;
border-radius: 5px;
margin-left: 8px;
opacity: 0.6;
}
.choosebtn a:hover{
opacity: 1;
}
.choosebtn .choosebtn-1{
opacity: 1;
}
</style>
</head>
<body>
<div class='wrap'>
<ul class='ul clearfloat'>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
</ul>
<ul class='choosebtn clearfloat'>
<li><a href='#' class='choosebtn-1'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
</ul>
<a href='#' class='left'><</a>
<a href='#' class='right'>></a>
</div>
<script>
var $l=$('.left'),
$r=$('.right'),
$ul=$('.ul'),
$ul_child=$('.ul').children(),
$choosebtn=$('.choosebtn');
function leftmove(){
clearInterval(time);
if(picstart()==3){btnclass(0);}
else{btnclass(picstart()+1);}
changeopacity('left', picstart());
}
function rightmove(){
clearInterval(time);
if(picstart()==3){btnclass(0);}
else{btnclass(picstart()+2);}
changeopacity('right', picstart());
time=setInterval(rightmove, 3000);
}
function clickbtn(){
clearInterval(time);
btnclass($(this).index());
$ul_child.hide('slow');
$ul_child.eq($('.choosebtn a').index($(this))).show('slow');
time=setInterval(rightmove, 3000);
}
function btnclass(num){
$choosebtn.children().children().removeClass('choosebtn-1');
$choosebtn.children().eq(num).children().addClass('choosebtn-1');
}
function picstart(){
return $ul.children(":visible").index();
}
function changeopacity(action, piclocation){
$ul_child.hide('slow');
if(action=='left'){
if(piclocation==0){
$ul_child.last().show('slow');
}
else{
$ul_child.eq(piclocation-1).show('slow');
}
}
if(action=='right'){
if(piclocation==$ul_child.length-1){
$ul_child.first().show('slow');
}
else{
$ul_child.eq(piclocation+1).show('slow');
}
}
}
$l.on('click', leftmove);
$r.on('click', rightmove);
$choosebtn.on('click', 'a', clickbtn);
var time=setTimeout(rightmove, 3000);
</script>
</body>
</html>
全屏轮播：
预览：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu27-3.html
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>无线轮播</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
html,body,ul,li,p{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
html, body, #header, #header .carousel, #header .img-ct{
height: 100%;
width: 100%;
}
.carousel{
position: relative;
width: 310px;
height: 206px;
overflow: hidden;
}
#header .img-ct{
position: absolute;
}
#header .img-ct:after{
content: '';
display: table;
clear: both;
}
#header .item{
position: relative;
float: left;
height: 100%;
}
#header .main{
position: absolute;
width: 600px;
left: 50%;
top: 50%;
z-index: 1;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
}
#header .main h3{
font-size: 34px;
}
#header .main p{
font-size: 16px;
line-height: 2;
}
#header .cover{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 0.8;
}
.arrow{
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
border-radius: 30px;
box-shadow: 0 0 2px #999;
opacity: 0.8
}
.arrow:hover {
opacity: 1;
}
.pre{
left: 10px;
}
.next{
right: 10px;
}
ul.bullet {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
ul.bullet li {
width: 36px;
height: 10px;
border-radius: 4px;
background: #fff;
display: inline-block;
cursor: pointer;
}
ul.bullet li.active {
background: #666;
}
</style>
</head>
<body>
<div id="header">
<div class="carousel">
<ul class="img-ct">
<li class="item">
<div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" style="width: 1920px; background-image: url("http://cdn.jirengu.com/book.jirengu.com/img/6.jpg");"></div>
<div class="main">
<h3>夜空中最亮的星</h3>
<p>是否在意</p>
</div>
</li>
<li class="item">
<div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" style="width: 1920px; background-image: url("http://cdn.jirengu.com/book.jirengu.com/img/7.jpg");"></div>
<div class="main">
<h3>只是因为在人群中看了你一眼</h3>
<p>是否在意</p>
</div>
</li>
<li class="item">
<div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" style="width: 1920px; background-image: url("http://cdn.jirengu.com/book.jirengu.com/img/8.jpg");"></div>
<div class="main">
<h3>往城市边缘开</h3>
<p>把车窗都咬下来</p>
</div>
</li>
<li class="item">
<div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" style="width: 1920px; background-image: url("http://cdn.jirengu.com/book.jirengu.com/img/9.jpg");"></div>
<div class="main">
<h3>夜空中最亮的星</h3>
<p>是否在意</p>
</div>
</li>
</ul>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
//$(function(){
var $ct = $('.img-ct'),
$items = $ct.children(),
$pre = $('.pre'),
$next = $('.next'),
$bullet = $('.bullet'),
imgWidth = $(window).width(),
imgCount = $ct.children().length;
$ct.prepend($items.last().clone());
$ct.append($items.first().clone());
$ct.find('.item').css('width', imgWidth);
$ct.find('.cover').css('width', imgWidth);
imgRealCount = $ct.children().length;
$ct.css({left: 0-imgWidth, width: imgRealCount*imgWidth})
var curIdx=0;
function startClock(){
clock= setInterval(function(){
playNext();
},3000);
}
function stopClock(){
clearInterval(clock);
}
startClock();
$bullet.find('li').on('click', function(){
var idx=$(this).index();
if(idx> curIdx){
playNext(idx- curIdx)
}
else if(idx< curIdx){
playPrev(curIdx- idx)
}
})
function playNext(idx){
$ct.animate({left:'-='+idx*imgWidth},function(){
curIdx=(curIdx+ idx)%imgCount;
if(curIdx==0){
$ct.css({left:'0'-imgWidth});
}
setBullet();
});
}
function playPrev(idx){
$ct.animate({left:'+='+idx*imgWidth},function(){
curIdx=(imgCount+ curIdx- idx)%imgCount;
if(curIdx==(imgCount-1)){
$.css({left:'0'-imgCount*imgWidth});
}
setBullet();
})
}
function setBullet(){
$bullet.children().removeClass('active').eq(curIdx).addClass('active');
}
</script>
</body>
</html>
