用jQuery做一个轮播

2018-03-20 本文已影响0人 CeaCrab

轮播中一些知识点

html中图片写width是为了先占位，因为不写的话，图片未加载完之前，其他图片会挤上来，图片完成之后又退下去，浪费cpu，提前写个width先占位，图片加载完之后直接替换了，不用重排了，减少浪费cpu。一般我们知道图片宽高尽量都写上。

浏览器缩放会影响css效果

实现轮播

行为样式不分离轮播
深度截图_选择区域_20180320142314.png
结构分离
这样做的弊端，假如有很多张图片，写起来比较浪费时间。所以要违反规则用上边行为样式不分离的写法。
深度截图_选择区域_20180320142715.png
多张图片不用修改js代码
js.bin

//html
  <span id="buttons">
    <span>第1张</span>
    <span>第2张</span>
    <span>第3张</span>
//js
var allButtons = $('#buttons > span')//通过id选择器下边的标签获取所有span，allButtons是个伪数组
for(let i = 0; i < allButtons.length; i++){ //遍历这个伪数组 
  $(allButtons[i]).on('click',function(x){ // 这里是DOM的API,不能用on.(…),要用$包装成新的jQuery对象，才能用.on(…)
//     console.log(x.currentTarget) //监听用户点击
    var index = $(x.currentTarget).index()//jQuery监听用户点击的是排行第几张
    var npx = index * -300 //第几个移动的像素距离
    $('#pic').css({
      transform:'translate(' + npx + 'px)' //动画移动距离
    })
    
  })
}
**********************************************************************************************
//DOM API实现一个元素在一个家庭内排行第几
var n
var children = s.parnetNode.children
for(i = 0 ; i < children.length; i++){
  if(children[i] === s ){
    n = i
    break;
  }
}
//jQuery实现， $(x.currentTarget)封装一个对象，index()就会去找封装的对象在爸爸的儿子中排行第几，然后把第几个返回给你。
var index = $(x.currentTarget).index()

自动播放

// 每秒自动循环播放0-1-2
var n = 0;
console.log(n%3)
setInterval(() => {
  n += 1
  console.log(n%3)
},1000)

// 每秒自动循环0-1-2(帮用户点击)
var n = 0;
allButtons.eq(n%3).trigger('click') //eq是jQuery一个api，它会自动找到对应的dom封装成$对象。
setInterval(() => {
  n += 1
  allButtons.eq(n%3).trigger('click')
},1000)
//n%3不能写死
var n = 0;
var size = allButtons.length
allButtons.eq(n%size).trigger('click') //eq是jQuery一个api，它会自动找到对应的dom封装成$对象。
setInterval(() => {
  n += 1
  allButtons.eq(n%size).trigger('click')
},1000)

//滚到第几张，第几个span高亮
var n = 0;
var size = allButtons.length
allButtons.eq(n % size).trigger('click') //所有buttons中找出第几个，触发click事件
  .addClass('red') //添加calss
//找到符合.red的兄弟移除class
  .siblings('.red').removeClass('red') //sibling接收的是选择器，add和remover接收的是类名。
//循环操作
setInterval(() => {
  n += 1
  allButtons.eq(n%size).trigger('click') 
  .addClass('red')
  .siblings('.red').removeClass('red')
},1000)

鼠标移入.window暂停，移出继续自动播放

//滚到第几张，第几个span高亮
var n = 0;
var size = allButtons.length
allButtons.eq(n % size).trigger('click')
  .addClass('red') 
  .siblings('.red').removeClass('red') 
var timerId = setInterval(() => { //首先给闹钟取个id
  n += 1
  allButtons.eq(n % size).trigger('click')
  .addClass('red') 
  .siblings('.red').removeClass('red')
},1000)

//鼠标放到.window上，轮播暂停
$('.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)               
})

鼠标点击span，span高亮

var allButtons = $('#buttons > span')//通过id选择器下边的标签获取所有span，allButtons是个伪数组
for(let i = 0; i < allButtons.length; i++){ //遍历这个伪数组 
  $(allButtons[i]).on('click',function(x){ // 这里是DOM的API,不能用on.(…),要用$包装成新的jQuery对象，才能用.on(…)
//     console.log(x.currentTarget) //监听用户点击
    var index = $(x.currentTarget).index()//jQuery监听用户点击的是排行第几张
    var npx = index * -300 //第几个移动的像素距离
    $('#pic').css({
      transform:'translate(' + npx + 'px)' //动画移动距离
    })
    //重置n可以实现点击span高亮
    n = index
    allButtons.eq(n)
      .addClass('red') 
      .siblings('.red').removeClass('red')
  })
}

//滚到第几张，第几个span高亮
var n = 0;
var size = allButtons.length
allButtons.eq(n % size).trigger('click')
  .addClass('red') 
  .siblings('.red').removeClass('red') 
var timerId = setInterval(() => { //首先给闹钟取个id
  n += 1
  allButtons.eq(n % size).trigger('click')
  .addClass('red') 
  .siblings('.red').removeClass('red')
},1000)

//鼠标放到.window上，轮播暂停
$('.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')
},3000)               
})

代码优化
深度截图_选择区域_20180320160854.png

var allButtons = $('#buttons > span')//通过id选择器下边的标签获取所有span，allButtons是个伪数组
for(let i = 0; i < allButtons.length; i++){ //遍历这个伪数组 
  $(allButtons[i]).on('click',function(x){ // 这里是DOM的API,不能用on.(…),要用$包装成新的jQuery对象，才能用.on(…)
//     console.log(x.currentTarget) //监听用户点击
    var index = $(x.currentTarget).index()//jQuery监听用户点击的是排行第几张
    var npx = index * -300 //第几个移动的像素距离
    $('#pic').css({
      transform:'translate(' + npx + 'px)' //动画移动距离
    })
    //重置n可以实现点击span高亮
    n = index
    activeButton(allButtons.eq(n)) //代码优化修改处
  })
}

//滚到第几张，第几个span高亮
var n = 0;
var size = allButtons.length
allButtons.eq(n % size).trigger('click')
  activeButton(allButtons.eq(n % size)) //代码优化修改处

var timerId = setInterval(() => { //首先给闹钟取个id
  n += 1
  allButtons.eq(n % size).trigger('click')
  activeButton(allButtons.eq(n % size)) //代码优化修改处
},1000)

//鼠标放到.window上，轮播暂停
$('.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')
},3000)               
})
//优化：封装一个函数
function activeButton($button){
  $button
  .addClass('red') 
  .siblings('.red').removeClass('red') 
}

深度截图_选择区域_20180320162328.png

var allButtons = $('#buttons > span')//通过id选择器下边的标签获取所有span，allButtons是个伪数组
for(let i = 0; i < allButtons.length; i++){ //遍历这个伪数组 
  $(allButtons[i]).on('click',function(x){ // 这里是DOM的API,不能用on.(…),要用$包装成新的jQuery对象，才能用.on(…)
//     console.log(x.currentTarget) //监听用户点击
    var index = $(x.currentTarget).index()//jQuery监听用户点击的是排行第几张
    var npx = index * -300 //第几个移动的像素距离
    $('#pic').css({
      transform:'translate(' + npx + 'px)' //动画移动距离
    })
    //重置n可以实现点击span高亮
    n = index
    activeButton(allButtons.eq(n)) //代码优化修改处
  })
}

//滚到第几张，第几个span高亮
var n = 0;
var size = allButtons.length
第几张(n % size) //代码优化修改处

var timerId = setInterval(() => { //首先给闹钟取个id
  n += 1
  第几张(n % size) //代码优化修改处
},1000)

//鼠标放到.window上，轮播暂停
$('.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')
},3000)               
})
//优化：封装一个函数
function activeButton($button){
  $button
  .addClass('red') 
  .siblings('.red').removeClass('red') 
}
function 第几张(index){
  allButtons.eq(index).trigger('click')
  activeButton(allButtons.eq(index))
}

var allButtons = $('#buttons > span')//通过id选择器下边的标签获取所有span，allButtons是个伪数组
for(let i = 0; i < allButtons.length; i++){ //遍历这个伪数组 
  $(allButtons[i]).on('click',function(x){ // 这里是DOM的API,不能用on.(…),要用$包装成新的jQuery对象，才能用.on(…)
//     console.log(x.currentTarget) //监听用户点击
    var index = $(x.currentTarget).index()//jQuery监听用户点击的是排行第几张
    var npx = index * -300 //第几个移动的像素距离
    $('#pic').css({
      transform:'translate(' + npx + 'px)' //动画移动距离
    })
    //重置n可以实现点击span高亮 
    n = index
    activeButton(allButtons.eq(n)) //代码优化修改处
  })
}

//滚到第几张，第几个span高亮
var n = 0;
var size = allButtons.length
第几张(n % size) //代码优化修改处

var timerId = setInterval(() => { //首先给闹钟取个id
  n += 1
  第几张(n % size) //代码优化修改处
},2000)

//鼠标放到.window上，轮播暂停
$('.window').on('mouseenter',function(){
  window.clearInterval(timerId)                
})
//鼠标移开继续闹钟
$('.window').on('mouseleave',function(){
  timerId = setInterval(() => { 
  n += 1
  第几张(n % size)
},2000)               
})
//优化：封装一个函数
function activeButton($button){
  $button
  .addClass('red') 
  .siblings('.red').removeClass('red')
}
//首先找到第几张，触发click状态，重置n那里已经激活，所以不需要下边的这一句
function 第几张(index){
  allButtons.eq(index).trigger('click') 
//   activeButton(allButtons.eq(index)) 
}

定闹钟优化
深度截图_选择区域_20180320164022.png

var allButtons = $('#buttons > span')
for(let i = 0; i < allButtons.length; i++){ 
  $(allButtons[i]).on('click',function(x){ 
    var index = $(x.currentTarget).index()
    var npx = index * -300 
    $('#pic').css({
      transform:'translate(' + npx + 'px)' 
    })
    //重置n可以实现点击span高亮 以上是找到按钮，添加状态，这里是激活button(span)
    n = index
    activeButton(allButtons.eq(n))
  })
}

//滚到第几张，第几个span高亮
var n = 0;
var size = allButtons.length
第几张(n % size) //代码优化修改处

var timerId = setTimer()

//鼠标放到.window上，轮播暂停
$('.window').on('mouseenter',function(){
  window.clearInterval(timerId)                
})
//鼠标移开继续闹钟
$('.window').on('mouseleave',function(){
  window.clearInterval(timerId)          
})
//优化：封装一个函数
function activeButton($button){
  $button
  .addClass('red') 
  .siblings('.red').removeClass('red')
}
function 第几张(index){
  allButtons.eq(index).trigger('click') 
}
function setTimer(){
  return setInterval(() => { 
    n += 1
    第几张(n % size)
  },2000)
}

用jQuery做一个轮播

轮播中一些知识点

实现轮播

猜你喜欢

热点阅读