1. 内容 (html） 样式(css) 行为(JavaScript) 分离
- 内容、样式、行为分离的个人总结：（反向思考）
（1）. 如果不把这三者分离，比如html负责内容和样式会使得html结构有很多无用的标签，变得很复杂，看不清标签的逻辑结构；
（2）.如果用css表示内容会导致用户选不中、js访问不到；
（3）.（以前IE6）css负责行为的话，会让页面变慢；
（4）. js尽量不要控制样式，比进制jQuery里面两个函数 jQuerydiv.show() / $div.hide()，如果
jQuerydiv.show()之后不知道它的display是什么（block/flex/inline-flex等），jQueryaddClass() 或jQueryremoveClass()来代替；
2. 轮播的思路
1. 思路一：滚来滚去
轮播图就是在页面中指定范围内把几张图片滚来滚去，设置一些细节（比如过度时间等）。
2. 思路二：用局部画面骗用户
实现几张图片切换的效果是只把一张图片放到可视范围内，页面内部实现图片位置切换到可视范围就能实现轮播。
下面的代码块就是理解轮播思路最好的例子：(是新手实现的代码块，没有做到内容、样式、行为分离)
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>理解轮播思路实例</title>
<style>
*{
margin:0;
padding:0;
}
.window{
width: 259px;
border:4px solid green;
overflow: hidden;
}
.images{
display: flex;
align-items: flex-start;
border: 1px solid red;
transition: transform 0.5s;
}
.red{
color:red;
}
</style>
</head>
<body>
<div class="window">
<div class="images" id="images">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRprIjdHtQjJ7szfv8KY28bK4c5iBE-VcyLBKcGFBLJ3ATtM5Ue1w " alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU0FjBCflAtiPwMlLcYGq-hfTZ_Fgq59TBAzQ7XIqgKHmona_XwQ" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgIEazZi69dK62PhhZ57wOMqT1Mj3L5exJqwW39_T66lHHNie2dw" alt="">
</div>
</div>
<span>
<span>第1张</span>
<span>第2张</span>
<span>第3张</span>
</span>
<script>
$(p1).on('click', function(){
$(images).css({
transform:"transLateX(0)"
})
})
$(p2).on('click', function(){
$(images).css({ //.css是jQuery语法，添加样式
transform:"transLateX(-259px)"
})
})
$(p3).on('click', function(){ //on API : on('事件函数名'，function(存储所有信息的参数){})是jQuery推荐的语法
$(images).css({
transform:"transLateX(-518px)"
})
})
</script>
</body>
</html>
js代码改进一：可以存放无限多个图片按钮，都能完成轮播
<script>
var allButtons = $('#buttons > span')
for(let i=0;i<allButtons.length;i++){
$(allButtons[i]).on('click', function(x){
/* 需要知道被点击的几个span元素的DOM方法
var n
var childern = span.parentNode.childern
for(let i=0;i<childern.length;i++){
if(childern[i] === span){
span = i
break
}
}
*/
//jQuery实现
var index = $(x.currentTarget).index()
//遍历样式
var n = index * -259
$(images).css({
transform:'translate('+ n +'px)'
})
})
}
</script>
js代码改进二：实现自动播放
var n = 0
var size = allButtons.length
console.log(n%size) //3 4 5对应的余数是 0 1 2
// 获取一个元素的第n个儿子的DOm API
// parent.children[n]
// 获取一个元素的第n个儿子的jQuery API
//eq就是equal的意思，他会找出DOM对应的节点，并封装成jQuery对象
//triggerAPI会触发事件函数，后面接函数名
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
setInterval( ()=>{
n += 1
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
},1000)
js代码改进三：用户hover到window后会停止轮播,高亮按钮
var allButtons = $('#buttons > span')
for(let i=0;i<allButtons.length;i++){
$(allButtons[i]).on('click', function(x){
/* 需要知道被点击的几个span元素的DOM方法
var n
var childern = span.parentNode.childern
for(let i=0;i<childern.length;i++){
if(childern[i] === span){
span = i
break
}
}
*/
//jQuery实现
var index = $(x.currentTarget).index()
//遍历样式
var n = index * -259
$(images).css({
transform:'translate('+ n +'px)'
})
n = index
allButtons.eq(n)
.addClass('red')
.siblings('.red').removeClass('red')
})
}
//实现自动播放
var n = 0
var size = allButtons.length
// 获取一个元素的第n个儿子的DOm API
// parent.children[n]
// 获取一个元素的第n个儿子的jQuery API
//eq就是equal的意思，他会找出DOM对应的节点，并封装成jQuery对象
//triggerAPI会触发事件函数，后面接函数名
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
var timerId = setInterval( ()=>{
n += 1
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
},1000)
$('.window').on('mouseenter', function(){
window.clearInterval(timerId)
})
$('.window').on('mouseleave', function(){
timerId = setInterval( ()=>{
n += 1
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
},1000)
})
网友评论