作者:诸葛二蛋 | 来源:互联网 | 2023-09-15 13:27
篇首语:本文由编程笔记#小编为大家整理,主要介绍了用 jQuery 手写轮播图相关的知识,希望对你有一定的参考价值。
先上个效果截图:
主要包含以下功能点:
* 1、页面加载完,自动循环翻页 * 2、翻页按钮,翻页 * 3、定点翻页 * 4、翻页时同步圆点状态 * 5、鼠标进入,停止自动翻页 * 6、快速点击翻页的bug(加 isPaging 标志)
主要包含以下功能点:
* 1、页面加载完,自动循环翻页 * 2、翻页按钮,翻页 * 3、定点翻页 * 4、翻页时同步圆点状态 * 5、鼠标进入,停止自动翻页 * 6、快速点击翻页的bug(加 isPaging 标志)
上代码:
DOCTYPE html > < html > < head > < meta charset ="utf-8" > < title > 轮播图 - jQuery 版本title > < style > *{ margin: 0 ; padding: 0 ; } ul{ list-style: none ; } /* * * 轮播图布局样式 */ /* * * 0、轮播图容器 */ #container{ position: relative ; width: 600px ; height: 400px ; margin: 50px auto ; overflow: hidden ; } /* * * 1、图片(模拟) */ ul#imgs{ position: absolute ; width: calc(600px * 7) ; left: -600px ; } ul#imgs li{ float: left ; width: 600px ; height: 400px ; background-color: #42B983 ; color: white ; text-align: center ; line-height: 400px ; font-size: 100px ; } #imgs li:nth-child(odd){ /* 模拟图片 */ /* background-color: #9ACD32; */ } /* * * 2、前后翻页按钮 */ #prev,#next{ position: absolute ; top: calc(50% - 15px) ; ; width : 40px ; height: 30px ; background-color: yellow ; border: none ; font-weight: bold ; font-size: 16px ; cursor: pointer ; opacity: .6 ; -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ; } #prev,#next:focus{ outline: none ; } #prev{ left: 10px ; } #next{ right: 10px ; } /* * * 3、小圆点定点翻页 */ ul#index{ position: absolute ; top: 360px ; left: calc(50% - 55px) ; height: 12px ; } ul#index li{ float: left ; height: 12px ; width: 12px ; margin: 0 5px ; border-radius: 50% ; background-color: #800080 ; opacity: .4 ; cursor: pointer ; } ul#index li.active{ opacity: 1 ; } style > < script src ="jquery-1.12.4.js" type ="text/Javascript " charset ="utf-8" > script > head > < body > < div id ="container" > < ul id ="imgs" > < li > < div class ="img" > 5div > li > < li > < div class ="img" > 1div > li > < li > < div class ="img" > 2div > li > < li > < div class ="img" > 3div > li > < li > < div class ="img" > 4div > li > < li > < div class ="img" > 5div > li > < li > < div class ="img" > 1div > li > ul > < button id ="prev" > < button > < button id ="next" > > button > < ul id ="index" > < li class ="active" > li > < li > li > < li > li > < li > li > < li > li > ul > div > < script type ="text/Javascript" > /* * * 事件绑定 * 1、页面加载完,自动循环翻页 * 2、翻页按钮,翻页 * 3、定点翻页 * 4、翻页时同步圆点状态 * 5、鼠标进入,停止自动翻页 * 6、快速点击翻页的bug(加 isPaging 标志) */ /* * * 0、自动轮播 */ /* * * 一些可以设置的参数 */ var PAGE_WIDTH = 600 , PAGE_SLIDE_TIME = 600 , // 单页滑动时间 PAGE_INTERVAL = 1200 + PAGE_SLIDE_TIME, // 换页间隔时间 curIndex = 1 , // 合法取值 1 ~ 5(0 表示左边假的,6表示右边假的) isPaging = false // 是否正在翻页(用来处理连续点击翻页产生的bug) var intervalId; $( function (){ intervalId = setInterval(next,PAGE_INTERVAL) }) /* * * 1、页面按钮 */ $(" #next " ).click( function (){ next() }) $( " #prev " ).click( function (){ next( false ) }) $( " #index li " ).click( function (){ next($( this ).index() + 1 ) }) /* * * 2、鼠标出入 */ $(" #container " ).hover( function (){ clearInterval(intervalId) }, function (){ intervalId = setInterval(next,PAGE_INTERVAL) }) /* * * 翻页核心功能 * next(boolean|number]) * * boolean: 表示前后翻页 * number: 表示定点翻页 */ function next(flag = true ){ if (isPaging){ return } isPaging = true ; var tempIndex = curIndex; // 1 确定要翻过去的页码,计算 left 值 typeof flag === " boolean " && (curIndex += flag ? 1 : - 1 ) typeof flag === " number " && (curIndex = flag) left = - curIndex * PAGE_WIDTH // 2 执行翻页动画 $( " #imgs " ).animate({ " left " :left},PAGE_SLIDE_TIME, function (){ if (curIndex == 0 || curIndex == 6 ){ // 页码校正 curIndex = (curIndex + 5 ) % 5 left = - curIndex * PAGE_WIDTH $( " #imgs " ).css( " left " ,left) } // 清除正在翻页标志 isPaging = false }) // 3 同步点的状态 $( " #index li " ).eq(tempIndex - 1 ).removeClass( " active " ) $( " #index li " ).eq(curIndex - 1 ).addClass( " active " ) } script > body > html >