使用jQuery实现轮播图
大家好,今天给大家带来的就是使用jQuery实现一个简单的轮播图,实现的原理就是:
1、在一个区域内,设置宽高,超出这部分区域就要实现一个隐藏
2、获取图片的大小 为300,索引从0开始
3、当你点击右边的按钮时候,就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px
4、当他实现滑动的时候,加一个animate动画的效果,就欧了
5、右边的效果和左边的一样,都是同理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script><style type="text/css">*{padding: 0;margin: 0;}.uli{width: 300px;height: 300px;display: flex;overflow: hidden;}.uli li>img{position: relative;left: 0px;top: 0px;height: 300px;}.uli li{width: 300px;height: 300px;list-style:none;}.a1{position: absolute;top: 100px;left: 0;cursor: pointer;font-size: 50px}.a2{position: absolute;top: 100px;left: 260px;cursor: pointer;font-size: 50px}</style>
</head>
<body><!-- 设置ul li 中 图片的数量 饮料的数量--><ul class="uli"><li><img src="./img/大冰红茶.png" alt=""></li><li><img src="./img/大蜂蜜绿茶.png" alt=""></li><li><img src="./img/大龙井绿茶.png" alt=""></li></ul><!-- 两个 div 中的 span 控制右边的便签和左边的标签为点击事件 --><div class="pa1"> <span class="a1"><</span><span class="a2">></span></div><script type="text/javascript">// 写一个入口函数$(function(){// 设置图片的大小var img = 300;// 设置索引为 0 var index = 0;// 设置图片的数量的长度var option = $('.uli>li img').length;// 左边部分开始$('.a2').click(function(){// 再点击事件里面执行回调函数left()})// 函数名称 lest function left(){// index的索引值为 0 当他小于图片的长度的时候 就让他执行 ++ option要执行减 1 否则会有一张空白的页面if (index < option-1) {index++}else {index = 0}move()}// 左边部分结束// 右边部分开始$('.a1').click(function(){// 再点击事件里面执行回调函数right()})function right(){// index的索引值为 0 当他大于图片的长度的时候 就让他执行 -- if (index > 0) {index--}else {index = option-1}move()}// right left函数里面都有 move 就等于你点击你的 index 索引的时候为多少数值就会有几个图片滑过 500 为时间function move(){var a = -index * img + 'px'$('.uli li>img').animate({'left':a},500)}})</script>
</body>
</html>
这是以上的代码,大家可以动手试试小案例。
效果图让大家一睹为快。
视频放不出来只能看图片了
目前的状况就是这样哈~~~
使用jQuery实现轮播图相关推荐
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 网页直播源码,JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
- ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法 在页面中引入jquer ...
- 基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件 不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧 使用需要准备(往下滑动会看到): ...
- jQuery实现轮播图(无缝轮播,附效果图),代码有详解。
jQuery实现轮播图 这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...
- Jquery实现轮播图效果
Jquery实现轮播图效果 首先是html <div id="box"><img src="./day6/am/轮播图/img/1.jpg" ...
- jQuery 实现轮播图
jQuery 轮播图 预览图: 使用jquery实现轮播图要比用原生js简单许多,代码也少很多. 思路 1.外层盒子设置为一个图片的大小 2.内层盒子为所有图片的宽度,图片左浮动 3.外层盒子设置ov ...
- JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html><head><meta charset="utf-8" name="view ...
- Jquery实现轮播图效果(fadeIn()和fadeOut()方法的应用)
2019独角兽企业重金招聘Python工程师标准>>> 1.jquery.js从官网上下载最新的,使用外链导入到html中, 下载地址: http://jquery.com/down ...
- 自己定义jquery插件轮播图
轮播图-html <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
最新文章
- vue2.0transition过渡的使用介绍
- HTTP 500 服务器内部错误的解决方法
- Win平台使用cmake工具生成sln工程示例
- JAVA继承类phone_JAVA(9)继承与多态
- python矩阵中插入矩阵_Python | 矩阵的痕迹
- 配置electron
- MLE(最大似然估计)和EM算法
- Spring :Spring AOP 中的一些术语
- 【深入理解JVM笔记】什么是元数据?
- 【身份牌识别】基于matlab GUI模板匹配身份牌识别【含Matlab源码 1354期】
- ADB投屏_手机无需安装客户端的【安卓投屏】
- STM32移植MPU6050/9250的DMP官方库(motion_driver_6.12)修改移植 DMP简单使用教程
- electron开发客户端注意事项(兼开源个人知识管理工具“想学吗”)
- Excel插入图表失真(数据格式原因)修复笔记
- C语言编程>第十七周 ⑤ 请补充fun函数,该函数的功能是:用来求出数组的最小元素在数组中的下标并存放在k所指的存储单元。
- jav常用类-时间处理相关类
- 3种性格容易焦虑 你知道吗
- iOS Bug---CoreLocation 部分机型卡界面
- kafka 不可以脱离 zookeeper
- 如何制作透明的树Shader和一个玻璃Shader