Skip to content

Commit

Permalink
纯手写_自动轮播_优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhaipanyu
zhaipanyu committed May 30, 2017
1 parent ae54d5a commit 7cf14c7
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 10,401 deletions.
Binary file removed jQuery/jq_轮播渐变/img/1.jpg
View file
Binary file not shown.
Binary file removed jQuery/jq_轮播渐变/img/2.jpg
View file
Binary file not shown.
Binary file removed jQuery/jq_轮播渐变/img/3.jpg
View file
Binary file not shown.
Binary file removed jQuery/jq_轮播渐变/img/4.jpg
View file
Binary file not shown.
330 changes: 182 additions & 148 deletions jQuery/jq_轮播渐变/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,206 +1,240 @@
<!DOCTYPE html>
<html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>渐变</title>
<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>手写渐变轮播</title>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}

ul,
li {
list-style: none;
padding: 0;
margin: 0;
padding: 0;
}

body {
box-sizing: border-box;
.carousel {
position: relative;
width: 300px;
height: 430px;
margin: 0 auto;
}

a {
text-decoration: none;
}

.ct {
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
width: 500px;
height: 200px;
overflow: hidden;
}

.img-ct {
position: relative;
width: 2000px;
.carousel>.img-ct {
position: absolute;
width: 1200px;
}

.img-ct li {
.carousel>.img-ct>li {
float: left;
width: 300px;
height: 430px;
}

.clearfix:after {
content: '';
display: block;
clear: both;
}

img {
width: 500px;
height: 200px;
.carousel>.img-ct>li img {
width: 100%;
height: 100%;
}

.btn {
.carousel .btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
width: 30px;
height: 30px;
display: block;
background: #ccc;
line-height: 30px;
width: 40px;
height: 40px;
text-align: center;
/*border: 1px solid red;*/
line-height: 40px;
font-size: 1.25rem;
color: #fff;
border-radius: 50%;
background: #666;
opacity: 0.6;
cursor: pointer;
}

.btn-pre {
left: 5px;

/*左*/
left: 10px;
top: 50%;
}

.btn-next {
right: 5px;

right: 10px;
top: 50%;
}

.bullet {
height: 20px;
width: 150px;
text-align: center;
.carousel .bullet {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 5%;
bottom: 50px;
width: 100%;
text-align: center;
}

.bullet li {
float: left;
margin-left: 5px;
.carousel .bullet>li {
display: inline-block;
width: 30px;
height: 10px;
height: 8px;
border: 1px solid #fff;
border-radius: 4px;
background: #666;
margin: 0 2px;
}

.active {
background: #ccc;
.carousel .bullet .active {
background: #fff;
}
</style>

</head>

<body>
<div class='ct clearfix'>
<ul class='img-ct clearfix'>
<li><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"></a></li>
<li><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"></a></li>
<li><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"></a></li>
<li><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"></a></li>
<div class="carousel">
<ul class="img-ct clearfix">
<li>我是第一张<a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"></a></li>
<li>我是第二张<a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"></a></li>
<li>我是第三张<a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"></a></li>
<li>我是第四张<a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"></a></li>
</ul>
<a class='btn-pre btn' href="#">&lt</a>
<a class='btn-next btn' href="#">&gt</a>
<ul class='bullet clearfix'>
<li class='active'></li>
<a class="btn btn-pre">&lt</a>
<a class="btn btn-next">&gt</a>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var $imgCt = $(".img-ct"),
$btnPre = $(".btn-pre"),
$btnNext = $(".btn-next"),
$bullet = $(".bullet"),
$curIndex = 0,
$imgLock = true,
clock;
var $last = $imgCt.children("li").last().clone(),
$first = $imgCt.children("li").first().clone()
var $imgWidth = $imgCt.children("li").first().width(),
$imgLen = $imgCt.children("li").length
$imgCt.prepend($last)
$imgCt.append($first)
$imgCt.css({
width: $imgWidth*($imgLen+2),
left: -$imgWidth
})
$btnPre.on("click", function(){
if($imgLock === false) return;
$imgLock = false;
pre(1);
})
$btnNext.on("click", function(){
if($imgLock === false) return;
$imgLock = false;
next(1);
})
$bullet.on("click", "li", function(){
$bulletIndex = $(this).index()
next($bulletIndex-$curIndex)
})
timeClock()
$(".ct").on("mouseenter",function(){
clearInterval(clock)
})
$(".ct").on("mouseleave",function(){
timeClock()
})
function next(idx){
$imgCt.fadeOut(500, function(){
$imgCt.css({
left: "-="+idx*$imgWidth
})
})
$imgCt.fadeIn(500, function(){
$curIndex += idx;
if($curIndex >= $imgLen){
$imgCt.css({left: -$imgWidth});
$curIndex = 0;
var $imgCt = $(".img-ct"),
$btnPre = $(".btn-pre"),
$btnNext = $(".btn-next"),
$bullet = $(".bullet"),
$imgItem = $imgCt.children('li'),
isAnimal = true,
clock;//全局变量保存定时器
var $firstLi = $imgCt.children('li').first().clone();
var $lastLi = $imgCt.children('li').last().clone();
var imgWidth = $imgCt.children('li').width();//拿到300
//.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px
var imgCount = $imgCt.children('li').length;//4
$imgCt.append($firstLi);//首部加最后一张
$imgCt.prepend($lastLi);//尾部加第一张//此时有6张图片
//重设$imgCt宽度//1800才对
$imgCt.width(imgWidth * (2 + imgCount));//1800px
//改变图片初始位置
$imgCt.css({ left: -imgWidth });//不写这句初始显示排在第一的第四张图片,写了显示第2张

//启动定时器
auto();
//点击上一张事件
$btnPre.on('click', function (e) {
clearInterval(clock);//清楚定时器
//判断锁
if (isAnimal === false) { return };
isAnimal = false;
btnPre();
})

//封装上一张
function btnPre() {
//拿到容器的left值
var imgCtLeft = $imgCt.css('left');
$imgCt.fadeOut(500, function () {
//淡出的时候移动容器
$imgCt.css({ left: '+=' + imgWidth })

$imgCt.fadeIn(500, function () {
var idx = Math.abs(parseInt(imgCtLeft) / parseInt(imgWidth))//根据位移拿索引
bullet(idx - 2);//算好了远点
//偏移完毕开锁
isAnimal = true;
if (parseInt(imgCtLeft) === -imgWidth) {//初始位置点击上一张时
// console.log('满足条件');
//迅速切换到第四张图
$imgCt.css({ left: -imgWidth * imgCount })
bullet(3);
}
$imgLock = true;
setBullet()
})
}
function pre(idx){
$imgCt.fadeOut(500, function(){
$imgCt.css({
left: "+="+idx*$imgWidth
})
})
$imgCt.fadeIn(500, function(){
$curIndex -= idx;
if($curIndex < 0) {
$imgCt.css({left: -$imgWidth*$imgLen});
$curIndex = $imgLen-1;
})//fadeIn

})//fadeOut
//在fadeOut里放入fadeIn.
}

//点击显示下一张
$btnNext.on('click', function () {
clearInterval(clock);//清楚定时器
//判断锁
if (isAnimal === false) { return };
isAnimal = false;
btnNext();
})
//封装下一张
function btnNext() {
var imgCtLeft = $imgCt.css('left');//带px
// console.log('imgCtLeft:'+imgCtLeft);

//淡出
$imgCt.fadeOut(500, function () {
$imgCt.css({ left: '-=' + imgWidth })
//淡入
$imgCt.fadeIn(500, function () {
var idx = Math.abs(parseInt(imgCtLeft) / parseInt(imgWidth));
bullet(idx);
isAnimal = true;
if (parseInt(imgCtLeft) === -imgWidth * imgCount) {//在第5张时点击显示第六张时
// 不加锁会出现连续点击left偏大而白屏
//迅速右移到第二张
$imgCt.css({ left: -imgWidth })
bullet(0);

}
$imgLock = true;
setBullet()
})
}
function setBullet(){
$bullet.children("li").removeClass("active");
$bullet.children("li").eq($curIndex).addClass("active")
}
function timeClock(){
clock = setInterval(function(){
next(1)
}, 2000)
}
})//fadeIn结束

})//fadeOut结束
}


//点击小圆点切换图片
$bullet.children('li').on('click', function () {
clearInterval(clock);//清楚定时器
//取点击bullet的li索引
var idx = $(this).index();//0-3
// console.log('idx:'+idx);
$imgCt.animate({ left: -imgWidth * (idx + 1) }, 500, function () {
bullet(idx);//0-3
})
})

//bullet随图片变灰
function bullet(idx) {
$bullet.children('li').siblings().removeClass('active');
$bullet.children('li').eq(idx).addClass('active');
}


//清楚定时
$imgCt.on('mouseenter', function () {
clearInterval(clock);
})
$imgCt.on('mouseleave', function () {
auto();
})
//定时器
function auto() {
clock = setInterval(function () {
if (isAnimal === false) { return };
isAnimal = false;
btnNext();
}, 2000)
}
</script>

</body>

</html>
Loading

0 comments on commit 7cf14c7

Please sign in to comment.