jQuery特效：实现简易轮播图

要求

点击页面的左边, 展示左边的一张图片
点击页面的右边, 展示右边的一张图片
越界循环

知识点

$(window).width() 获取屏幕宽度
animation动画
clone()克隆结点
append、prepend插入结点

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;list-style: none;}.box{width: 520px;height: 280px;margin: 100px auto;border: 1px solid orangered;overflow: hidden;}.box>ul{position: relative;}.box>ul>li{position: absolute;left: 0;top: 0;}.box>ul>li>img{width: 520px;height: 280px;}</style>
</head>
<body><div class="box"><ul><li><img src="data:images/01.jpg" alt=""></li></ul></div><script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {/*要求:点击页面的左边, 展示左边的一张图片点击页面的右边, 展示右边的一张图片越界循环*/// 1. 准备数据源var imageNames = [];for(var i=1; i<5; i++){imageNames.push('images/0'+ i +'.jpg');}// console.log(imageNames);// 2. 设置当前的索引var currentShowImgIndex = 0;// 3. 监听点击$(document).click(function (event) {// 3.1 定义变量var middleX = $(window).width() * 0.5;var isLeft = false;// 3.2 判断if(event.pageX <= middleX){ // 左边isLeft = true;currentShowImgIndex = (currentShowImgIndex - 1 + imageNames.length) % imageNames.length;}else { // 右边isLeft = false;currentShowImgIndex = (currentShowImgIndex + 1) % imageNames.length;}// console.log(currentShowImgIndex);// 3.3 创建节点, 放在ul的最前面var imageName = imageNames[currentShowImgIndex];var $newTag = $('.box>ul>li').clone();$newTag.children('img').attr('src', imageName);$('.box>ul').prepend($newTag);// 3.4 动画展示和删除if(isLeft){$('.box>ul>li:last').animate({left: '-520px'}, 200, function () {$(this).remove();})}else {$('.box>ul>li:last').animate({left: '520px'}, 200, function () {$(this).remove();})}});});
</script>
</body>
</html>

运行效果

点击屏幕左侧、右侧图片进行切换

jQuery特效：实现简易轮播图相关推荐

jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一下午带晚上的jQuery/Zepto的Bootstrap轮播图插件,功能是能够根据当前较短的一边实现自适应宽度,并且 ...
js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件常见触屏事件: 触屏touch事件说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
使用js做简易轮播图，可自动
[作者注]:第一次使用js做简易轮播图首先在body里div个容器 div class="box"> <p id="p" ></p&g ...
WebAPI第四天学习总结—— 常见网页特效案例（轮播图、节流阀、返回顶部、筋斗云案例）
常见网页特效案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往 ...
slides.jquery.js快速实现轮播图效果
最近在做项目的时候,发现了这款插件slides.jquery.js,操作起来非常简单,不用自己去敲js代码,只需要简单配置几个属性就可以实现幻灯片轮播了. 使用例子: tips:这个例子不做过多样式的 ...
jQuery实现常见的轮播图效果
1.在网页中常见的一类轮播图如下图所示, 此处以小米官网(www.mi.com)为例进行说明说明:红色箭头标注的是左.右箭头:右下角蓝色箭头标注的是可以控制图片播放顺序的小圆点: 2.轮播图的特点 ...
jQuery实现的无缝轮播图
其实只要原生js学好了,能够实现轮播图无缝切换,再用jQuery写,感觉简单多了,嗯.为了熟悉jQuery的用法,还是动手把它实现了,废话不多说,看代码吧,实现的过程都注释在代码中了,嗯.要养成注释的 ...
css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
Android通过网络实现简易轮播图
先导入依赖一个Banner和一个imageloader 轮播图依赖:implementation'com.youth.banner:banner:1.4.9' 紧接着写布局 public class ...

jQuery特效：实现简易轮播图

要求

知识点

代码

运行效果

jQuery特效：实现简易轮播图相关推荐

最新文章

热门文章