用 jQuery 如何手写一个简单的轮播图? 下面本篇文章通过代码示例来给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
用 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>
- <!-- 1, 进行页面布局 2,js 代码 -->
- <div id="container">
- <!-- 图片区 -->
- <ul id="imgs">
- <li>
- <div class="img">
- 5
- </div>
- </li>
- <li>
- <div class="img">
- 1
- </div>
- </li>
- <li>
- <div class="img">
- 2
- </div>
- </li>
- <li>
- <div class="img">
- 3
- </div>
- </li>
- <li>
- <div class="img">
- 4
- </div>
- </li>
- <li>
- <div class="img">
- 5
- </div>
- </li>
- <li>
- <div class="img">
- 1
- </div>
- </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 == 0 && (curIndex = 5);
- curIndex == 6 && (curIndex = 1) left = -curIndex * PAGE_WIDTH $("#imgs").CSS("left", left)
- }
- // 清除正在翻页标志
- isPaging = false
- })
- //3 同步点的状态
- if (curIndex == 0 || curIndex == 6) {
- curIndex == 0 && updateIdxState(0, 4);
- curIndex == 6 && updateIdxState(4, 0);
- } else {
- updateIdxState(tempIndex - 1, curIndex - 1)
- }
- function updateIdxState(oldIdx, newIdx) {
- $("#index li").eq(oldIdx).removeClass("active") $("#index li").eq(newIdx).addClass("active")
- }
- }
- </script>
- </body>
- </HTML>
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17554.html