JQuery轮播图制作
时间:2019-06-10
本文章向大家介绍JQuery轮播图制作,主要包括JQuery轮播图制作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现功能:
1.鼠标移出时图片自动轮播
2.鼠标移入时图片暂停轮播
3.根据点击左、右按钮时图片显示上一张、下一张
4.显示小圆点对应显示图片
准备:
1.图片多张
2.jquery-1.12.4.min.js
htm部分:
<!-- 外层容器:类名(container、wrap、box) --> <div class="box"> <!-- 4 张图片 --> <img src="./images/shutter_1.jpg" alt=""> <img src="./images/shutter_2.jpg" alt=""> <img src="./images/shutter_3.jpg" alt=""> <img src="./images/shutter_4.jpg" alt=""> <!-- 左右箭头 --> <div id="arrowLeft"></div> <div id="arrowRight"></div> <!-- 下面的小圆点 --> <ul id="circle"> <li></li> <li></li> <li></li> <li></li> </ul> </div>
css部分:
<style> * { margin: 0; padding: 0; } .box { width: 1000px; height: 358px; position: relative; margin: 50px auto; } .box img { position: absolute; top: 0; left: 0; opacity: 0; transition: .8s; } /* 左右箭头样式开始 */ #arrowLeft, #arrowRight { width: 49px; height: 49px; background: url("images/shutter_prevBtn.png") no-repeat; position: absolute; top: 40%; cursor: pointer; } #arrowLeft { left: 20px; } #arrowRight { right: 20px; transform: rotate(180deg); } /* 左右箭头样式结束 */ /* 小圆点样式开始 */ #circle { list-style: none; position: absolute; bottom: 10px; left: 50%; margin-left: -45px; } #circle li { float: left; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; margin: 10px 5px; cursor: pointer; } /* 小圆点样式结束 */ </style>
JS部分:
<script src="./js/jquery-1.12.4.min.js"></script> <script> let i = 0; // 设置一个全局的变量来作为当前图片的下标 let action = true; // 该变量用于控制用户是否能够点击,true 能点击,false 就不能点击 $('img:first').css('opacity', 1); // 刚进来的时候,默认第一张图片显示出来 $('#circle li:first').css('background-color', 'grey'); // 修改所有图片的透明度 // 接收一个参数:不透明图片的下标 const sliderPlay = function (i) { $('.box img').css('opacity', 0).eq(i).css('opacity', 1); $('#circle li').css('background-color', 'white').eq(i).css('background-color', 'grey'); } // 封装 2 个函数:图片向右切换、图片向左切换 // 图片向右切换 const rightPlay = function () { if (action) { action = false; i++; // 当 i 等于 4 的时候,说明已经过了最后一张图片了,所以重置为第一张图片 if (i === 4) { i = 0; } sliderPlay(i); } } // 图片向左切换 const leftPlay = function () { if (action) { action = false; i--; if (i === -1) { i = 3; } sliderPlay(i); } } // 为左右箭头绑定事件 $('#arrowRight').click(function () { rightPlay(); }); $('#arrowLeft').click(function () { leftPlay(); }); // 图片自动播放 let stopTimer = setInterval(rightPlay, 1500); // 鼠标移入移出 $('.box').hover(function () { // 鼠标移入时的操作 clearInterval(stopTimer); }, function () { // 鼠标移出时的操作 stopTimer = setInterval(rightPlay, 1500); }); // 小圆点 $('#circle').on('click', 'li', function () { i = $(this).index() // 可以获取到下标 sliderPlay(i); }) //图片切换完毕允许点击左右 $('img').on('transitionend', function () { action = true; }); </script>
原文地址:https://www.cnblogs.com/jing-zhe/p/11000971.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Druid 介绍及配置
- Kafka 分布式的,基于发布/订阅的消息系统
- Maven 打包涉及证书文件问题
- maven 安装alipay-sdk包到本地及远程仓库
- maven 基础 maven-shade-pluginMaven Scopepom.xml 样例
- zookeeper应用:屏障、队列、分布式锁
- Java AIO 异步IO应用实例
- Java NIO 同步非阻塞应用实例
- Spring Boot 示例项目
- Jetty 发布web服务
- Netty 异步的、事件驱动的网络应用程序框架和工具
- Consul 服务发现和配置
- Consul 启动命令,Web UI
- Thrift 跨服务开发框架
- Java并发之BlockingQueue 阻塞队列(ArrayBlockingQueue、LinkedBlockingQueue、DelayQueue、PriorityBlockingQueue、Sy