29轮播图

http://js.jirengu.com/viyixaqoku/1/edit?html,css,js,output

如何理解内容形式行为的分离
对像是废话的问题，反向回答，如果不。。。会有什么不好的结果

image.png

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的状态啦，就是我们上面用的那样子的，还可以进一步用个循环代之多次重复

297.PNG

像下面就可以无限加图加按钮，但是只用在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

29轮播图

推荐阅读更多精彩内容