轮播图
1DOM一些题目详解
题目:
- 前端教材都在互联网上.
- 现在为了节省时间,要学js就在阮一峰javascript上面学
- js高程只适合当工具书,如果哪里不清楚,或者想深入,就去看js高程,比如面向对象想深入学习,就去看js高程.
全局变量,window里面本身就有的不能用.比如parent,不然会覆盖
1.1立即调用函数,使用局部变量
全局变量容易覆盖,所以要用局部变量,用局部变量的方法
立即执行函数有什么用?
只有一个作用:创建一个独立的作用域。
这个作用域里面的变量,外面访问不到(即避免「变量污染」)。
用途:封装功能不污染全局变量
1.要写在一个函数里,然后再立即执行这个函数.
不用加函数名,在后面加.call或者直接用()
但是这样写会直接报错,解决方法function(){}()
可以立即执行且不报错的方法
(function(){alert('我是匿名函数')} ()) // 用括号把整个表达式包起来
(function(){alert('我是匿名函数')}) () //用括号把函数包起来
//下面的都是执行这个表达式,而不管返回值是什么
!function(){alert('我是匿名函数')}() // 求反,我们不在意值是多少,只想通过语法检查。
+function(){alert('我是匿名函数')}()
-function(){alert('我是匿名函数')}()
~function(){alert('我是匿名函数')}()
void function(){alert('我是匿名函数')}()
new function(){alert('我是匿名函数')}()
2.最新的方法:使用let
在花括号里使用let,就可以相当于在花括号这个作用域声明了局部变量
{
let parent = document.querySelector('#self');//let声明的parent是局部变量,不会覆盖window.parent.
}
打印出来的是window.parent,没有被覆盖,说明let没有出按个画括号的作用域
打印出来的是2
关于let
let是ES6才规定的.也就是说,直到2015年以前,如果想使用局部变量,必须得用方法一,即下面的方法,使用局部变量必须得放在函数里面,然后立即执行函数.
2前端指导思想1:内容样式行为分离
说说对内容样式行为分离的理解:
回答方法,反着回答.
如果不这样会有什么坏处:
- 如果由html负责样式,会使html很复杂,很难分清标签的逻辑结构
- 如果用css标识内容,比如after,加上content,用户选不到,js取不到.
- 如果css负责逻辑,会很慢
- 重点,尽量不要用js控制样式
尽量不要用$div.show()
,$div.hide().
因为jquery会乱改display
尽量这样用:加一个语义化的class,例如$div.addClass('active')
或者 $div.addClass('disabled')
然后用css去控制
苹果风格的轮播
科技感十足的轮播
可能是最厉害的轮播组件
仅使用 CSS 做的一个轮播
3开始做轮播
思路如何动?
可以用marginLeft,可以用绝对定位相对定位,也可以用css3transform.css3transform性能最好,所以用css3transform.css3transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易版轮播</title>
<style>
.window{
border: 10px solid blue;
width: 300px;
overflow: hidden;
}
.images{
display: flex;
align-items: flex-start;
transition: transform 0.5s;
}
button{
margin-right: 10px;
border: 10px solid blue;
}
</style>
<script src="../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
<div class="images" id="images">
<img src="http://img4.imgtn.bdimg.com/it/u=3944123185,471045439&fm=200&gp=0.jpg" alt="" width="300px" height="200px">
<img src="http://imgsrc.baidu.com/imgad/pic/item/7e3e6709c93d70cf2b263a19f2dcd100bba12bc1.jpg" alt="" width="300px" height="200px">
<img src="http://imgsrc.baidu.com/imgad/pic/item/1e30e924b899a90139fcf01017950a7b0308f5cf.jpg" alt="" width="300px" height="200px">
</div>
</div>
<button id="btn1">111111</button>
<button id="btn2">21111</button>
<button id="btn3">31111</button>
</body>
<script>
$('#btn1').on('click',function () {
$('#images').css({
transform:'translateX(0)'
})
})
$('#btn2').on('click',function () {
$('#images').css({
transform:'translateX(-300px)'
})
})
$('#btn3').on('click',function () {
$('#images').css({
transform:'translateX(-600px)'
})
})
</script>
</html>
4升级版轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>升级轮播</title>
<style>
.window{
border: 10px solid blue;
width: 300px;
overflow: hidden;
}
.images{
display: flex;
align-items: flex-start;
transition: transform 0.5s;
}
button{
margin-right: 10px;
border: 10px solid blue;
}
.red{
color: red;
}
</style>
<script src="../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
<div class="images" id="images">
<img src="http://img4.imgtn.bdimg.com/it/u=3944123185,471045439&fm=200&gp=0.jpg" alt="" width="300px" height="200px">
<img src="http://imgsrc.baidu.com/imgad/pic/item/7e3e6709c93d70cf2b263a19f2dcd100bba12bc1.jpg" alt="" width="300px" height="200px">
<img src="http://imgsrc.baidu.com/imgad/pic/item/1e30e924b899a90139fcf01017950a7b0308f5cf.jpg" alt="" width="300px" height="200px">
<img src="http://imgsrc.baidu.com/imgad/pic/item/7e3e6709c93d70cf2b263a19f2dcd100bba12bc1.jpg" alt="" width="300px" height="200px">
<img src="http://imgsrc.baidu.com/imgad/pic/item/1e30e924b899a90139fcf01017950a7b0308f5cf.jpg" alt="" width="300px" height="200px">
</div>
</div>
<span id="button">
<span>第1张</span><span>第2张</span><span>第3张</span><span>第4张</span><span>第5张</span>
<ul>
<li></li>
</ul>
</span>
</body>
<script>
console.dir($('li'));
var $allButtons = $('#button>span');//
for (let i = 0; i < $allButtons.length; i++) {
$($allButtons[i]).on('click',function (x) {//注意,allButtons[i]是dom对象,不是jquery对象,所以要用jquery的方法,就要在前面加上$,把他转化一下,里面就有方法了.
var btnindex = $(x.currentTarget).index();//x.currentTarget就是当前点的对象.想要获取他在自己把把中的次序,用jquery中的index()比较简单
var p = btnindex *(-300);
$('#images').css({
transform:'translateX('+p+'px)'
})
$allButtons.eq(btnindex).addClass('red')
.siblings('.red').removeClass('red');//siblings()接受的是选择器,返回所有符合选择器的兄弟
//jquery的链式操作.每次找到一个对象,下面的函数都是操作的这个新找到的对象
//整个链式操作翻译:首先找到对应的第几个dom,然后用eq把他封装成jquery对象,,再用trigger('xxx')触发他的点击事件,在给他加上red的class,然后找到他符合 .red 的兄弟姐妹,然后在操作这些个兄弟姐妹
n = btnindex;//这一步很关键,吧index赋给n,然后n就变成了当前点击的按钮的标号,其余的n都变了,也会从这里继续往下自动滚动,所以要用全局的.
})
}
var n = 0;
var size = $allButtons.length;
$allButtons.eq(n%size)// eq找出对应第几个的dom,并把dom封装成jquery对象
.trigger('click'); //trigger('xxx')触发一次xxxx事件
var timerid = setInterval(function () {
n++;
$allButtons.eq(n%size).trigger('click')
},3000)
$('.window').on('mouseenter',function () {
window.clearInterval(timerid);
})
$('.window').on('mouseleave',function () {
timerid = setInterval(function () {//这里不能重新写var timer,不然就相当于重新在这里声明了新变量,上面的clean没办法清除这里了
n++;
$allButtons.eq(n%size).trigger('click')
},3000)
})
</script>
</html>
5无缝轮播
5.1无缝轮播思路探索1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<link rel="stylesheet" href="./style.css">
<script src="../../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
<div class="images">
<img src="./img/1.png" alt="图片1" width="400" height="300">
<img src="./img/2.png" alt="图片2" width="400" height="300">
<img src="./img/3.png" alt="图片3" width="400" height="300">
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.window{
width: 400px;
height: 300px;
margin: 50px auto;
overflow: hidden;
}
.images{
position: relative;
}
.images>img{
transition: transform 0.5s;
}
.images>img:nth-child(1){
position: absolute;
top: 0;
left: 0;
}
.images>img:nth-child(2){
position: absolute;
top: 0;
left: 100%;
}
.images>img:nth-child(3){
position: absolute;
top: 0;
left: 100%;
}
.images>img.right{
/*css优先级问题,必须要加.images>img才能覆盖上面的*/
position: absolute;
top: 0;
left: 100%;
}
setTimeout(function () {
$('.images>img:nth-child(1)').css({
transform:'translateX(-100%)'
}).one('transitionend',function (x) {//.one(),和on一样,监听事件,但是只监听一次,只监听最近一次,监听完后就把这个监听器干掉
$(x.currentTarget).addClass('right').css({
transform:'none'
});
});
$('.images>img:nth-child(2)').css({
transform:'translateX(-100%)'
})
},3000);
setTimeout(function () {
$('.images>img:nth-child(2)').css({
transform:'translateX(-200%)'
}).one('transitionend',function (x) {
$(x.currentTarget).addClass('right').css({
transform:'none'
});
});
$('.images>img:nth-child(3)').css({
transform:'translateX(-100%)'
})
},6000);
setTimeout(function () {
$('.images>img:nth-child(3)').css({
transform:'translateX(-200%)'
});
$('.images>img:nth-child(1)').css({
transform:'translateX(-100%)'
});;
$('.images>img:nth-child(3)').one('transitionend',function (x) {
$(x.currentTarget).addClass('right').css({
transform:'none'
});
});
},9000);
下一步变成循环
5.2 使用js操纵css状态思路分析
将所有的状态放在css里面,然后让js去切状态.比如图片三个状态分别是当前状态,移出去的状态,在外面等候的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<link rel="stylesheet" href="./style.css">
<script src="../../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
<div class="images">
<img src="./img/1.png" alt="图片1" width="400" height="300" class="imgmid">
<img src="./img/2.png" alt="图片2" width="400" height="300" class="imgright">
<img src="./img/3.png" alt="图片3" width="400" height="300" class="imgright">
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.window{
width: 400px;
height: 300px;
margin: 50px auto;
overflow: hidden;
}
.images{
position: relative;
}
.images>img{
transition: transform 0.5s;
position: absolute;
top: 0;
}
.imgleft{
transform: translateX(-100%);
}
.imgmid{
transform: translateX(0);
z-index: 1;
}
.imgright{
transform: translateX(100%);
}
setTimeout(()=>{
$('.images>img:nth-child(1)').addClass('imgleft').removeClass('imgmid')
.one('transitionend',(e)=>{
$(e.currentTarget).addClass('imgright').removeClass('imgleft')
});
$('.images>img:nth-child(2)').addClass('imgmid').removeClass('imgright')
},1000)
setTimeout(()=>{
$('.images>img:nth-child(2)').addClass('imgleft').removeClass('imgmid')
.one('transitionend',(e)=>{
$(e.currentTarget).addClass('imgright').removeClass('imgleft')
});
$('.images>img:nth-child(3)').addClass('imgmid').removeClass('imgright')
},2000)
setTimeout(()=>{
$('.images>img:nth-child(3)').addClass('imgleft').removeClass('imgmid')
.one('transitionend',(e)=>{
$(e.currentTarget).addClass('imgright').removeClass('imgleft')
});
$('.images>img:nth-child(1)').addClass('imgmid').removeClass('imgright')
},3000)
5.3 使用js操纵css状态改为循环
修改js
let n = 1;
setInterval(()=>{
$(`.images>img:nth-child(${in123(n)})`).addClass('imgleft').removeClass('imgmid')
.one('transitionend',(e)=>{
$(e.currentTarget).addClass('imgright').removeClass('imgleft')
});
$(`.images>img:nth-child(${in123(n+1)})`).addClass('imgmid').removeClass('imgright');
n+=1;
},1000);
function in123(n) {
if(n>3){
n%=3;
if(n===0){
n=3;
}
}
return n;//n123
}
5.4 只修改CSS状态,就可以实现从任何方向进入
.imgleft{
transform: translateX(100%);
}
.imgmid{
transform: translateX(0);
z-index: 1;
}
.imgright{
transform: translateX(-100%);
}
/*从右向左*/
.imgleft{
transform: translateY(100%);
}
.imgmid{
transform: translateY(0);
z-index: 1;
}
.imgright{
transform: translateY(-100%);
}
/*从上向下*/
样式变,js不用变
5.5 优化代码结构,状态机切换
只存在三种状态,切换的时候加过渡,使用js在满足状态条件的时候切换状态
优化代码结构
let n;
初始化();
setInterval(()=>{
makeImgLeft(getImgN(n))
.one('transitionend',(e)=>{
makeImgRight($(e.currentTarget));//当前元素
});
makeImgMid(getImgN(n+1));
n+=1;
},1000);
function in123(n) {
if(n>3){
n%=3;
if(n===0){
n=3;//n123
}
}
return n;
}
function 初始化() {
n = 1;
$(`.images>img:nth-child(${n})`).addClass('imgmid').siblings().addClass('imgright');//让第1个在中间,其余的在右边等待进入
}
function makeImgLeft($node) {//切换状态函数
$node.addClass('imgleft').removeClass('imgmid imgright');
return $node;
}
function makeImgRight($node) {
$node.addClass('imgright').removeClass('imgmid imgleft');
return $node;
}
function makeImgMid($node) {
$node.addClass('imgmid').removeClass('imgright imgleft');
return $node;
}
function getImgN(n){
return $(`.images>img:nth-child(${in123(n)})`)
}