【前端学习-18】【day07】轮播图/无缝滚动及跳转/移动端常见特效

最新推荐文章于 2022-08-12 20:54:49 发布
最新推荐文章于 2022-08-12 20:54:49 发布
阅读量158 收藏
点赞数
分类专栏： javascript 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QNANWang/article/details/106144161
版权

轮播图js在这里插入图片描述
无缝滚动以及跳转在这里插入图片描述
注：这里的应该改为index>=3
在这里插入图片描述在这里插入图片描述
开关灯
在这里插入图片描述
小圆圈跟着变化在这里插入图片描述在这里插入图片描述
手指滑动轮播图在这里插入图片描述在这里插入图片描述
手指离开：在这里插入图片描述在这里插入图片描述

window.sessionStorage

生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

在这里插入图片描述
记住用户名案例：在这里插入图片描述在这里插入图片描述

QNAN-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页跳转特效
04-21
网页跳转特效，一个非常漂亮的图印过度的跳转效果网页特效代码。
js移动端无缝轮播图
qq_43512502的博客
04-10 341
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <title>Title</title&gt...
创意炫酷css导航菜单特效，点击动画跳转html页面前端源码
mazai5080的博客
08-12 975
源码编码：20248，需要的朋友可以下载学习
移动端web轮播图插件swiper，功能很强大
weixin_30715523的博客
06-06 99
使用方法示例： <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> ...
js实现滑动轮播（里面有轮播的思路 还有几个封装好的函数 ，拿出去就可以用的 福利一波）
baogeprh的博客
07-25 204
1，构建html样式，代码如下 <div class="banner"> <ul> <li> <a href="#"> <img src="images/1.jpeg"> </a> </li> <li>
学习前端-HTML-day01
08-17
学习前端-HTML-day01
day18-Background Slider（背景轮播图）
07-13
【背景轮播图】是一种常见的网页设计元素，用于在页面背景中展示一组动态切换的图片，为用户带来视觉上的吸引力和交互体验。本教程将深入探讨如何使用HTML、CSS和JavaScript来实现这样一个功能。 首先，我们需要...
Qt-day4:2024/3/25
最新发布
03-25
效果视频
leetcode卡-30-day-leetcoding-challenge:https://leetcode.com/explore/chal
07-06
通过对“30-day-leetcoding-challenge-master”的深入学习，你不仅可以巩固编程基础，提升编程思维，还能了解到最新的编程实践和开源文化。同时，参与开源项目也是提升自身影响力，建立专业网络的好方式。在开源社区...
leetcode卡-30-Day-LeetCoding-Challenge:https://leetcode.com/explore/othe
07-06
leetcode卡30 天 LeetCoding 挑战
swiper 图片做轮播并点击跳转 跳转路径出错
yangzixiansheng的博客
06-18 1080
环境：nuxt项目，语法：vue 首先去官网拿简单轮播图例子 var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可选选项，自动滑动 }) 把它放在init（）方法里，然后放在mounted（）里。 对轮播图片做一个v-for，再@click=check(path),把路径传给方法，方法里做router.push !!!重点来了，本地开发是可以进行正常点击跳转的，一打包变成html就不行 排除了图片加载过久等等问题，发现是图
tab内的轮播图图片滚动不正常（待解决）
kikyou_csdn的博客
06-23 1170
tab内轮播图不正常 踩到坑，待解决~记录一下~~ 问题描述 在tab菜单栏的其中一个tab内放入轮播图显示不正常，图片不能正常滚动，无意中发现在轮播图的那个tab中加入display:block可正常滚动 （本来是为了方便调试，因为默认显示的tab是另外一个） 显示效果： 加display:block后轮播图正常显示部分代码 &lt;div class="tab out"...
前端学习代码实例-JavaScript 页面跳转效果
weixin_34279061的博客
04-19 403
为什么80%的码农都做不了架构师？>>> ...
移动端无缝轮播（全适配）
望京十三兄的博客
07-03 2699
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端无缝轮播（全适用）</title> <meta name="keywords" content="移动端无缝轮播（全适用）"/> &lt...
前端实现炫酷动效_10大炫酷的HTML5文字动画特效欣赏
weixin_39643255的博客
12-19 4573
7款让人惊叹的HTML5粒子动画特效HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效，特别是Canvas特性，可以实现在网页上绘制任何图形和动画。本文要分享7款让人惊叹的HTML5粒子动画特效，这些粒子特效都提供源代码下载供大家学习。1、HTML5 Canvas粒子模拟效果这是一款利用HTML5Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠...
原生js中移动端无缝轮播实现原理(代码)
lyclyc_的博客
08-16 474
比如要做四张图的无缝轮播，就需要八张图片，如下： 移动端中的手指移动事件，原理是：当点击到第一张图片时就定位到第五张，当点击到第八张图片时就定位到第四张。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
javascript② 常用关键字大全
QNANWang的博客
10-06 752
javascript: 1.变量和常量的知识 2.基本数据类型 3.运算符 4.基本数据类型间的转换 5.流程控制语句 笔记： 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,h...
HTML—项目实战（注册界面的设计以及实现）
QNANWang的博客
10-09 722
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>启迪数字学院</title> <link rel="stylesheet" type="text/css" href="css/reset1.css" /> <...
【前端学习-19】【01】JQuery的基本使用/顶级对象$/DOM和JQuery对象的区别与转换/隐式迭代实现排他思想/新浪下拉菜单/淘宝精品/tab侧边栏/手风琴/高亮效果显示
QNANWang的博客
05-16 342
基本使用： 1.官网下载JQuery->引入JS->调用 JQuery和DOM对象的区别 两对象的相互转换 使用： 利用隐式迭代实现排他思想 案例：新浪下拉菜单 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit..
cd C:\Program Files\FlightGear fgfs --fg-root=C:\Program Files\FlightGear\data --aircraft=ufo --in-air --fdm=null --telnet=5501 --telnet=5502 --telnet=5503 --disable-ai-traffic --disable-real-weather-fetch --disable-random-objects --disable-terrasync --disable-clouds --disable-sound --disable-panel --disable-hud --disable-specular-highlight --timeofday=noon --prop:/sim/rendering/multi-sample-buffers=1 --prop:/sim/rendering/multi-samples=2 --prop:/sim/rendering/draw-mask-clouds=false --prop:/sim/rendering/draw-mask-terrain=true --prop:/sim/rendering/draw-mask-objects=true --prop:/sim/rendering/draw-mask-lights=true --prop:/sim/rendering/draw-mask-internal=true --prop:/sim/rendering/draw-mask-cockpit=true --prop:/sim/rendering/draw-mask-effects=true --prop:/sim/rendering/draw-mask-overlay=true --prop:/sim/rendering/draw-mask-world=true --prop:/sim/rendering/draw-mask-panel=true --prop:/sim/rendering/draw-mask-vr=true --prop:/sim/rendering/draw-mask-2d=true --prop:/sim/rendering/draw-mask-3d=true --prop:/sim/rendering/draw-mask-sky=true --prop:/sim/rendering/draw-mask-shadows=true --prop:/sim/rendering/draw-mask-cabin=true --prop:/sim/rendering/draw-mask-weather=true --prop:/sim/rendering/draw-mask-stereo=true --prop:/sim/rendering/draw-mask-internal-cockpit=true --prop:/sim/rendering/draw-mask-internal-windows=true --prop:/sim/rendering/draw-mask-internal-instruments=true --prop:/sim/rendering/draw-mask-internal-overlay=true --prop:/sim/rendering/draw-mask-internal-effects=true --prop:/sim/rendering/draw-mask-internal-lights=true --prop:/sim/rendering/draw-mask-internal-world=true --prop:/sim/rendering/draw-mask-internal-panel=true --prop:/sim/rendering/draw-mask-internal-3d=true --prop:/sim/rendering/draw-mask-internal-sky=true --prop:/sim/rendering/draw-mask-internal-cabin=true --prop:/sim/rendering/draw-mask-internal-weather=true --prop:/sim/rendering/draw-mask-internal-stereo=true --prop:/sim/rendering/draw-mask-internal-shadow=true --prop:/sim/rendering/draw-mask-internal-stall=true --prop:/sim/rendering/draw-mask-internal-aoa=true --prop:/sim/rendering/draw-mask-internal-thermal=false --prop:/sim/rendering/draw-mask-internal-ice=false --prop:/sim/rendering/draw-mask-internal-glass=true --prop:/sim/rendering/draw-mask-internal-dead=true --prop:/sim/rendering/draw-mask-internal-reflection=true --telnet=127.0.0.1:5501 --disable-panel --disable-hud --disable-specular-highlight --disable-clouds --disable-sound --timeofday=noon --enable-hud-3d=no --enable-hud-2d=yes --enable-panel=no --enable-sound=no程序显示错误
05-10
-disable-terrasync --disable-clouds --disable-sound --disable-panel --disable-hud --disable-specular-highlight --timeofday=noon --prop:/sim/rendering/multi-sample-buffers=1 --prop:/sim/rendering/multi...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值