美文网首页我爱编程
用jQuery做一个轮播

用jQuery做一个轮播

作者: CeaCrab | 来源:发表于2018-03-20 16:52 被阅读0次

    轮播中一些知识点

    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做一个轮播

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

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        我爱编程

        关于我们|服务条款|联系我们|用jQuery做一个轮播|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！