美文网首页
29轮播图

29轮播图

作者: Lichee_3be1 | 来源:发表于2018-04-25 20:01 被阅读0次

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

相关文章

  • 无标题文章

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色,各有用处。 1.传统轮播图 第一步...

  • 轮播图

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步,得到元素 第二步,设置...

  • 现金红包

    每日红包 轮播图 详情图 周末红包 轮播图 详情图 圣诞红包 轮播图 详情图

  • day7_作业

    轮播图1 轮播图2

  • [iOS]定制性强的广告轮播图--SCAdView

    @[无限轮播图] @[3D轮播图] @[广告轮播图] SCAdView Statement If my code ...

  • 普通奖品

    卡西欧小方块 轮播图 详情图 三只松鼠大礼包 轮播图 详情图 天猫精灵 轮播图 详情图 小米蓝牙无线耳机 轮播图 ...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • 多轮播图的设计

    列表展示多个轮播图 多个轮播图同时显示 多个轮播图不定时进行轮播动画 对应呈现的关系:1个TableView、一个...

网友评论

      本文标题:29轮播图

      本文链接:https://www.haomeiwen.com/subject/olaslftx.html