Jquery实现轮播图效果

首先是html

<div id="box"><img src="./day6/am/轮播图/img/1.jpg" alt=""><img src="./day6/am/轮播图/img/2.jpg" alt=""><img src="./day6/am/轮播图/img/3.jpg" alt=""><img src="./day6/am/轮播图/img/4.jpg" alt=""></div><ul id="ul"><li class="li1">1</li><li>2</li><li>3</li><li>4</li></ul><button id="shang">上一张</button><button id="xia">下一张</button>

id为box的div里面存放的是我们即将轮播的图片；
id为ul的ul，它的作用是让它下面的li变成小圆圈，来与轮播的图片呼应，点击小圆圈跳转对应的图片。
下面是css样式：

<style>*{margin: 0px;padding: 0px;list-style: none;}#box{width: 300px;height: 300px;border: 1px solid;}#box>img{position: absolute;display: none;}#box>img:first-child{display: block;}#ul{display: flex;position: absolute;top: 270px;left: 80px;}#ul>li{width: 20px;height: 20px;border: 1px solid black;border-radius: 50%;margin-left: 10px;text-align: center;}#ul>.li1{background-color: aqua;}</style>

border-radius：50%让Li变成小圆圈。然后绝对定位再轮播图上层显示。
接下来是jq的代码：

var index=0;function fangfa(){// 图片根据下标来确认是显示还是隐藏// 当前图片显示时，其他图片隐藏// 此时我们需要引入一个变量来界定下标，这样就有了上方的全局变量index=0，下标从0开始// 因为这是一个函数我们可以把它封装出来，正好后面的也需要用到$("#box>img").eq(index).show().siblings().hide();// 这里是小圆圈轮播，当图片位于第几张时，圆圈同样位于第几个$("#ul>li").eq(index).addClass("li1").siblings().removeClass("li1")// 当下标产生变化时，当前图片显示，其他图片隐藏，我们就需要让下标变化，每次加1，就是index++index++;// 因为定时器是持续的，而此时我们的下标是随着时间递增的，所以需要判断当下标等于所有图片的数量时返回第一张// 于是就有了index=0if(index>$("#box>img").length){index=0;}}var time=setInterval(fangfa,1000);// 鼠标移入时图片停止轮播，移出时轮播继续$("#box").hover(function(){// 移入时清除定时器即可clearInterval(time);},function(){// 移出时再让定时器开启即可time=setInterval(fangfa,1000);})// 赋予每个li一个点击事件，用来切换图片$("#ul>li").on("click",function(){// 当此时li的下标等于当前轮播的下标时index=$(this).index();// 图片切回点击li事件的所属图片$("#box>img").eq(index).show().siblings().hide();// 同样li的小圆圈也高亮显示，其他li取消高亮$("#ul>li").eq(index).addClass("li1").siblings().removeClass("li1");})// 当点击下一张时，让图片进行下一张操作，所以直接调取上方的封装函数即可$("#xia").click(function(){// 因为方法中已经有到达最后一张时返回第一张，所以直接调取fangfa();})$("#shang").click(function(){// 当点击上一张时必然要图片显示和小圆圈高亮显示，所以前两行直接复制即可$("#box>img").eq(index).show().siblings().hide();$("#ul>li").eq(index).addClass("li1").siblings().removeClass("li1");// 此时关键来了，因为点击上一张，index一直处于递减状态，必然会超越0，成为负数// 这是我们就需要判断当index<0的时候，应该让其返回最后一张照片// 因为我们是通过下标来操作图片，小圆圈的轮播，但是整体的长度却是下标+1// 所以结束条件当下标==轮播图片长度-1时，就是返回最后一张图片if(index<0){index=$("#box>img").length-1}// 这里就是后退图片index--})

已经将注释写在了代码之中，这样或许对照的更清晰一些。
以上就是jq的轮播图做法了！

Jquery实现轮播图效果相关推荐

用jQuery实现轮播图效果（自动播放，能手动切换）
大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果首先我们看到,它是由背景图片.方向图标和指示器组成.**我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位. ...
Jquery实现轮播图效果（fadeIn()和fadeOut()方法的应用）
2019独角兽企业重金招聘Python工程师标准>>> 1.jquery.js从官网上下载最新的,使用外链导入到html中, 下载地址: http://jquery.com/down ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
jQuery实现常见的轮播图效果
1.在网页中常见的一类轮播图如下图所示, 此处以小米官网(www.mi.com)为例进行说明说明:红色箭头标注的是左.右箭头:右下角蓝色箭头标注的是可以控制图片播放顺序的小圆点: 2.轮播图的特点 ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
网页直播源码，JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
jQuery实现轮播图这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...

Jquery实现轮播图效果

Jquery实现轮播图效果

Jquery实现轮播图效果相关推荐

最新文章

热门文章