美文网首页我爱编程
用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 做个轮播

    初次体验jQuery 之后，体验一下jQuery强大之处，做一个简单的轮播，实现图片切换。 点击按钮切换轮播 页面...

  • 项目-轮播图

    整个轮播图分为三部分：轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多，...

  • Vue轮播图的实现以及其与jQuery轮播图的简单对比

    最近在学习Vue，然后做了一个轮播图，然后想起之前用jQuery做的轮播图，就打算进行一个对比。 jQuery轮播...

  • 用jQuery做一个轮播

    轮播中一些知识点 实现轮播 行为样式不分离轮播深度截图_选择区域_20180320142314.png 结构分离这...

  • A29-用jQuery做个轮播

    这次我们将用jQuery做一个轮播 在遵循原则：内容(HTML)、样式(CSS)、行为(JavaScript)分离...

  • 用jQuery实现轮播

    本文的主要内容是使用jQuery实现轮播的思路及过程 1. 准备工作 首先准备好五张（随便几张只要不是一张就行）尺...

  • JavaScript | 365笔记第87天 | 原生JS做轮播

    用原生JS做一个轮播图

  • 用js原生实现轮播图

    用jquery实现轮播图非常简单的啦！有没有想过用原生js实现轮播图呢？？？今天琢磨了一下，摸索出来一个，就和大家...

  • 轮播图加优化

    轮播图样式在同一排, 用 JQuery 的 lazy 预加载无效我的解决方法是:使用 Swiper, 自动轮播换...

  • DEMO-企业网站

    企业网站 用 HTML+CSS+jQuery 做的一个企业网站前端页面。 使用的 jQuery 插件： 焦点图轮播...

网友评论

    本文标题：用jQuery做一个轮播

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

    延伸阅读

    深度阅读

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

    栏目导航

    热点阅读

    我爱编程

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

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

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

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

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

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