类似轮播图的简单jQuery代码

代码和个人解析:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

img {

width: 300px;

height: 300px;

}

    /* 这里设置样式只是为了使图片在点击时不会出现图片大小不一的情况,img可以统一设置页面中所有的图片大小 */

</style>

</head>

<body>

<img src="./img/1.jpg" />

             <!-- 这里有一个要注意的点,图片的名称要变成连贯的数字序号排列 -->

<button>上一张</button>

<button>下一张</button>

<script src="./js/jquery-3.4.1.js"></script>

<script>

$(function() {

var t = 1;   //定义一个变量用来进行判断

//上一张的按钮实现

$("button").eq(0).click(function() {   //这里的eq()是相当于是索引,从0开始计数,就是获取第一个button按钮

t += 1;     //我这里是简写了,展开就是 t=t+1 ,当点击第二次的时候,就+1,把图片变成第二张,再点击,就再+1

if (t > 4) {

   //这里的if判断,也可以说是充当一个for循环,我只有4张图片,当我点击到最后一张时,就是说图片已经到我没有的第五张图时,

  //就把t的值改为 1 就到了我的第一张图片,类似于一个for循环

t = 1

}

$("img").attr("src", "img/" + t + ".jpg")

        //这里是一个类似字符串的拼接,t 是一个动态的数据

})

//下一张的按钮实现

$("button").eq(1).click(function() {

t -= 1; //展开 t=t-1

if (t < 1) {

t = 4

}

$("img").attr("src", "img/" + t + ".jpg")

})

//下一张按钮的实现与上一张的思路和逻辑是一样,判断就是把上一张按钮的条件反过来

//值得注意的是eq()的索引值的起始值,还有把判断条件理清楚,然后就是图片的命名

})

</script>

</body>

</html>

<!-- 一起加油努力学习前端知识吧 -->

原文地址:https://www.cnblogs.com/funing-z/p/11741460.html

时间: 2024-10-12 23:59:43

类似轮播图的简单jQuery代码的相关文章

JS 轮播图(无缝连接的轮播图实现,含代码供参考)

需求:实现轮播图,图片无缝切换,自动播放. 实现效果: 思考一下:在图片列表后面多加一张图片,这张图片是第一张图片(为了确保无缝衔接).图片就是平铺放在一个pic里面的,每次移动就是改变的pic的left值. 来撸代码~~.所有的代码放在最后面,这里只讲一些重要的方法: 为防止懵逼:先贴出封装函数move()的代码供参考 function move(ele, attr, speed, target, callback){ //获取当前的位置 //从左往右进行移动 --- current<targ

轮播图点击 手势 代码

#import "HotNewsTableViewController.h" #import "HotNewsTableViewCell.h" #import "HotNews.h" #import "JudegNetWorkType.h" #import "HotNewsDetailViewController.h" #import "MJRefresh.h" #import &quo

轮播图的简单实现

html实现代码:用于内容的显示 <div class="web"> <div id="left" class="iconfont icon-xiangzuo"></div> <div id="right" class="iconfont icon-tubiaozhizuomoban"></div> <ul> <li><

轮播图左右箭头 jquery

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="view

jquery轮播图

咱们今天还是轮播图,今天说jquery的轮播图! 首先,要有个插件: 请无视Zepto插件,他没起到任何作用! 就是这两个啦! 然后就是代码! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入插件--> <script src="../上月插件/jquery-3.1.1.min.js&q

从零开始,搭建博客系统MVC5+EF6搭建框架(5),博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: 1 /// <summary> 2 /// 详情页 3 /// </summary> 4 /// <param name="id"><

js实现图片轮播图(一)

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content">   <!-- 总

小程序实践(二):swiper组件实现轮播图效果

swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属性: ------------------------------------------------------------------------------------   具体实现轮播功能:    一.添加轮播图片素材   在项目根目录下新建一个目录用于存储图片资源,目录名随意       

告别组件之教你使用原生js和css写移动端轮播图

在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. 老规矩,首先看一下最终效果,这个最终可以实现定时自动播放,触摸滑动,手动修改下面横条效果等功能. 项目中使用到的HTML代码如下 <div class="banner"> <ul class="clearfix"> <li><