Skip to content

Commit

Permalink
纯手写轮播
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhaipanyu
zhaipanyu committed May 29, 2017
1 parent 66d0164 commit 3a1825e
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 10,392 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.
270 changes: 131 additions & 139 deletions jQuery/jq_轮播/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,195 +1,187 @@
<!DOCTYPE html>
<html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>JS Bin</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;
margin: 0 auto;
/*width:800px;*/
.carousel {
position: relative;
}

a {
text-decoration: none;
}

.ct {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 900px;
/*height: 600px;*/
width: 300px;
height: 430px;
margin: 0 auto;
overflow: hidden;
}

.img-ct {
position: relative;
width: 3600px;
/*height: 600px;*/
.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: 900px;
height: 600px;
.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;
line-height: 40px;
font-size: 1.25rem;
color: #fff;
border-radius: 50%;
background: #666;
opacity: 0.6;
cursor: pointer;
}

.pre-btn {
left: 5px;
/*左*/
.btn-pre {
left: 10px;
top: 50%;
}

.next-btn {
right: 5px;
.btn-next {
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 data-index='0'><a href="#"><img src="img/1.jpg" alt=""></a></li>
<li data-index='1'><a href="#"><img src="img/2.jpg" alt=""></a></li>
<li data-index='2'><a href="#"><img src="img/3.jpg" alt=""></a></li>
<li data-index='3'><a href="#"><img src="img/4.jpg" alt=""></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='pre-btn btn' href="#">&lt</a>
<a class='next-btn btn' href="#">&gt</a>

<ul class='bullet clearfix'>
<li class='active'><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></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="jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var $imgCt = $(".img-ct");
var $btnPre = $(".pre-btn");
var $btnNext = $(".next-btn");
var $bullet = $(".bullet");
var $curIndex = 0;//-1,0123,4
var $imgLock = true;
var $last = $imgCt.children("li").last().clone();
var $first = $imgCt.children("li").first().clone();
var $imgWidth = $imgCt.children("li").first().width();
var $imgLen = $imgCt.children("li").length;//4

$imgCt.prepend($last);
$imgCt.append($first);
$imgCt.css({
width: $imgWidth * ($imgLen + 2),//加了2张,序号是:412341
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);
var $imgCt = $(".img-ct"),
$btnPre = $(".btn-pre"),
$btnNext = $(".btn-next"),
$bullet = $(".bullet");
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张

//点击上一张事件
$btnPre.on('click', function () {
//根据left值判断
var imgCtLeft = $imgCt.css('left');
//imgCt右移一个单位
$imgCt.animate({ left: '+=' + imgWidth }, 500, function () {
var idx = Math.abs(parseInt(imgCtLeft)/parseInt(imgWidth));//
// console.log('idx:'+(idx-2));
bullet(idx-2);
// console.log('点击第一次imgCtLeft'+imgCtLeft);//0
if (parseInt(imgCtLeft) === -imgWidth) {//初始位置点击上一张时
// console.log('满足条件');
//迅速切换到第四张图
$imgCt.css({ left: -imgWidth * imgCount })
bullet(3);
}
})
})
$bullet.on("click", "li", function () {
var $bulletIndex = $(this).index()

if ($imgLock === false) return;
next($bulletIndex - $curIndex)//
// console.log('bullet_index'+$bulletIndex);
// console.log('curIndex'+$curIndex);
$imgLock = false;

})
function next(idx) {
$imgCt.animate({
left: "-=" + idx * $imgWidth//左移动一格,
}, function () {
$curIndex += idx;
if ($curIndex >= $imgLen) {//在第四张图片显示时点击下一张
$imgCt.css({ left: -$imgWidth });
$curIndex = 0;
//点击显示下一张
$btnNext.on('click', function () {
//封装
//imgCt的left
var imgCtLeft = $imgCt.css('left');//带px
$imgCt.animate({ left: '-=' + imgWidth }, 500, function () {
//位移的绝对值,除以图宽,转为图片索引
var idx = Math.abs(parseInt(imgCtLeft)/parseInt(imgWidth));//
// console.log('idx:'+idx);
bullet(idx);
if (parseInt(imgCtLeft) === -imgWidth * imgCount) {//在第5张时点击显示第六张时
// 不加锁会出现left偏大而白屏
//迅速右移到第二张
$imgCt.css({ left: -imgWidth })
bullet(0);
}
$imgLock = true;
setBullet()
})
}
function pre(idx) {
$imgCt.animate({
left: "+=" + idx * $imgWidth//图片右移,left增加
}, function () {
$curIndex -= idx;
if ($curIndex < 0) {//在第一张时点击上一张
$imgCt.css({ left: -$imgWidth * $imgLen });//迅速左移图片
$curIndex = $imgLen - 1;
}
$imgLock = true;
setBullet()
})

//点击小圆点切换图片
$bullet.children('li').on('click',function(){
//取点击bullet的li索引
var idx = $(this).index();//0-3
// console.log('idx:'+idx);
$imgCt.animate({ left: -imgWidth*(idx+1) }, 500, function () {
bullet(idx);//0-3
})
}
function setBullet() {
$bullet.children("li").removeClass("active");
$bullet.children("li").eq($curIndex).addClass("active")
})

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

</body>

</html>
Loading

0 comments on commit 3a1825e

Please sign in to comment.