http://js.jirengu.com/viyixaqoku/1/edit?html,css,js,output
如何理解内容形式行为的分离
对像是废话的问题，反向回答，如果不。。。会有什么不好的结果
1、用css控制内容，div::after这种伪元素，让人选不中，js取不到元素
2、在html上面加样式，会导致html看起来很乱，结构不清晰
3、css控制行为，ie时代可以，但是会导致页面很慢
4、用$div.show()和$div.hide()这二个API，如果一开始在css里设置display：none；然后用js控制，show的时候不知道应该把display改成flex还是block等等
图片浮在一行不换行,同时最好写要用的图片占位的高度和宽度，不写的话，浏览器默认随便找的占位符，如果后面加载的图片和它不一样大小，就要重排，很耗cpu
display:flex;align-items:flex-start;
每次只展现300px的宽度的东西
.window{width:300px; overflow:hidden;}
利用js来切换这个300px的东西,注意这里是调用的jquery哦，p$是下面表示切换的按钮的id
$(p1).on('click',function(XXXX){
$(images).css(
{transform:'translateX(0)'})
})
$(p2).on('click',function(XX){
$(images).css(
{transform:'translateX(-300px)'})
})
$(p3).on('click',function(XXXX){
$(images).css(
{transform:'translateX(-600px)'})
})
不让js操作css的话，像下面的看起来就样式和行为分离，很舒服，但是js里面的remove和add会随着不同目标状态的数量变化而大片的变化，很麻烦哦，特别如果现在图片有几百张什么的，那样估计我的爪子就断了，所以就动态的用js生成css的状态啦，就是我们上面用的那样子的，还可以进一步用个循环代之多次重复
像下面就可以无限加图加按钮，但是 只用在html里面加内容
var allButtons = $('#buttons>span')
for(let i=0;i<allButtons.length;i++){
$(allButtons[i]).on('click',function(x){
var index=$(x.currentTarget).index()
var p=index* -300
//var n=i* -300
//console.log(i)
#直接用i也是可以的，为什么要用jquery得到index
$('#images').css({
transform:'translate(' + p + 'px)'
})
})
}
然后加自动播放， 注意allButtons.eq(n%size)中的eq的使用因为直接用时dom，加上eq封装成了jquery对象，然后trigger触发click事件，从上面的函数可以看见click的动作是什么样的。。。所以不用重复来写一次了
var n=0;
var size=allButtons.length
setInterval(()=>{
n+=1
allButtons.eq(n%size).trigger('click')
},1000)
然后想要到那个图片，下面的按钮就会高亮
setInterval(()=>{
n+=1
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')//.red这个不懂
},1000)
然后想要鼠标停在图片里面时候可以停止动画（形象表达为炸闹钟事件）
给之前做的闹钟起个名字timerId，方便后面砸掉它
$('.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)
})//修复它
然后发现它就一直自动播放啊，我的鼠标点按钮时候虽然会换图片，但是按钮不高亮，所以在上面那个鼠标点击换展示图中应该加上高亮行为,注意这个时候给click事件加上高亮了，所以后面的动画中的click就不需要再特别加上高亮了，因为已经包括在click里啦
n=index
allButtons.eq(n)
.addClass('red')
.siblings('.red').removeClass('red')
最后优化代码，下面是二次封装行为
1、把高亮事件封装，感觉可有可无
function activeButton($button){
$button
.addClass('red')
.siblings('.red').removeClass('red')
}
2、再把设置闹钟的行为封装
function setTimer(){
return setInterval(()=>{
n+=1
allButtons.eq(n%size).trigger('click')
},1000)
1、HTML、CSS、JS 内容、样式与行为分离
2、轮播的思路
思路1：滚来滚去
思路2：用局部画面骗用户
3、封装思路
从 API 开始思考
尽量能让使用者猜到
$(allbu[i])等价于allbu.eq(i),省的封装，直接转换为对于的jq的api
