jquery 制作幻灯片浏览图片

最新推荐文章于 2024-07-23 12:35:43 发布
最新推荐文章于 2024-07-23 12:35:43 发布
阅读量200 收藏
点赞数
分类专栏： jquery学习笔记 文章标签： javascript xhtml ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen106106/article/details/84278543
版权

jquery幻灯片的效果浏览图片的插件有很多，但那些插件有时候往往不是我们需要的，比如当添加了某个插件我们页面原来的布局就完全被破坏了，这时候当我们不需要很复杂的效果的时候，还不如自己手动写一个有类似效果的插件。

效果图如下：


 

这个demo实现了点击上面的向左、向右的按钮，下面的缩写图也跟着变化，当点击下面制定的某种小图的时候，可以找到对应的大图显示。但还没有实现点击下面的向右、向左按钮的时候上面的大图也滑动。

 

下面是主要的代码：

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="naxienian.css"/>
<script src="http://images.zhenai.com/ex/public/js/jquery-1.7.min.js"></script>
<script src="naxienian.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".change .pre").bind("click",preClick);
		$(".change .next").bind("click",nextClick);
		
		$("#gallery div ul li img").each(function(index, element) {
			
            $(this).bind("click",{index:index},handleThumbClick);
        });;
	});
	
	function preClick(){
		//先影藏所有的div类为image的元素，再显示下一幅图像
		  //获取当前显示的图片  
	   var firstImg = $('#gallery div.img:first');
	  var currImg = $("#gallery .show");  
				  if(currImg.index() == 0){
					  alert("已经是第一页了");
				  return;
				  }
				  
	  //获取下一幅要显示的图片和需要显示的标题栏的内容  
	  var preImg = (currImg.prev("div").length) ? currImg.prev():firstImg;
	   
	  
	  //让当前的图像以动画的形式影藏  
	  currImg.hide(); 
	  currImg.removeClass("show");
	  preImg.show();
	  preImg.addClass("show");
	  
	  //同时让底下的缩写图也向前移动
	  var prevOperator = $("#gallery .list .pre");
	  prevOperator.trigger("click");
	}
	
	function nextClick(){
		var currImg = $("#gallery .show");  
	//debugger;
	if(currImg.index() == currImg.parent().children().size()-3){
		alert("已经是最后一页了");
	}
	  //获取下一幅要显示的图片和需要显示的标题栏的内容  
	  var lastImg = $('#gallery div.img:last');
	  var nextImg = ((currImg.next().length) ? ((currImg.next().hasClass('change'))? lastImg :currImg.next()) : lastImg);    
	   
	  
	  //让当前的图像以动画的形式影藏  
	  currImg.hide(); 
	  currImg.removeClass("show");
	  nextImg.show();
	  nextImg.addClass("show");
	  
	  //同时让下面的缩写图向右移动
	  var nextOperator = $("#gallery .list .next");
	  nextOperator.trigger("click");
	}
	
	//处理缩写图被点击事件
	function handleThumbClick(event){
		//显示对应的大图
		var index = event.data.index;
		var originImg = $("#gallery div.img:eq("+index+")");
		
		var curImg = $("#gallery .show");
		console.log(index);	
		
		originImg.show();
		originImg.addClass("show");
		curImg.removeClass("show");
		curImg.hide();
	}
</script>
</head>
<body>

<!-- -->
<div class="c" id="gallery">

  <div class="img show" >
    <div> <span>&#8201;</span> <a><img src="images/1.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  <div class="img" style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/2.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/3.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/4.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/5.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/6.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/7.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/8.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/9.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/10.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/11.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/12.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  <div class="change"> <a class="pre">上一张</a> <a class="next">下一张</a> </div>
  
  <!-- -->
  <div class="list"> <a class="pre"></a> <a class="next"></a>
    <div>
      <ul>
        <li> <img src="images/thumbs/t1.jpg" /> <span>1/20</span> </li>
        <li> <img src="images/thumbs/t2.jpg" /> <span>2/20</span> </li>
        <li> <img src="images/thumbs/t3.jpg" /> <span>3/20</span> </li>
        <li> <img src="images/thumbs/t4.jpg" /> <span>4/20</span> </li>
        <li> <img src="images/thumbs/t5.jpg" /> <span>5/20</span> </li>
        <li> <img src="images/thumbs/t6.jpg" /> <span>6/20</span> </li>
        <li> <img src="images/thumbs/t7.jpg" /> <span>7/20</span> </li>
        <li> <img src="images/thumbs/t8.jpg" /> <span>8/20</span> </li>
        <li> <img src="images/thumbs/t9.jpg" /> <span>9/20</span> </li>
        <li> <img src="images/thumbs/t10.jpg" /> <span>10/20</span> </li>
        <li> <img src="images/thumbs/t11.jpg" /> <span>11/20</span> </li>
        <li> <img src="images/thumbs/t12.jpg" /> <span>12/20</span> </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
 

完整的代码可以下载附件：

 

 

这个demo用到的资源都是来自AD Gallery 1.2.7 demo里面，这个插件很强大（相对我的demo）。如果需要的人可以看看。

 

下面是效果图：

 


 

chen106106
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery图片展开收起
weixin_35949542的博客
08-24 403
jquery图片展开收起
jquery实现滑动图片
zyl_lyr1019的专栏
11-04 2320
最近正在回顾之前的一些基础知识，用jquery写了一个图片滑动的插件，虽然还是有些问题存在，用法很简单，只要在对目标元素绑定slideW()函数即可，该函数最多支持两个输入，分别是图片变化之后的宽度，以及动画的速度，如果不输入，则采用默认的宽度以及默认的速度。 下面是我自己测试的例子： //html代码 css代码 //css代码 *{mar
用jquery开发幻灯片播放功能(完整版)
关注前端开发
04-10 918
很久没有写了，今天写一个简单的效果，幻灯片无限滚动和大家一起交流学习现在我自己写前端代码基本按下面的步骤：1.看效果分析效果实现。2.和美工确认各效果3.写简单的html，这里特别说明一下，简单的html就是一个大概的结构，这样好切片。4.根据第2步的确认和第3步html结构分析切图。（切图一般是我自己切这样根据代码的需要想切成什么样的图片都可以，自己好控制。）5.编写html+css代码，实现...
jQuery图片幻灯片展示
weixin_30823833的博客
01-22 126
闲来无事，使用jQuery做了一个图片幻灯片，贴出来大家都看看，多扔砖头…… 先说前台吧，很简单，如下所示： <div class="slidBox"> <div class="slidBoxImages"> <a href="http://www.baidu.com" target="_blank"><img ...
Viewer.js –JS/jQuery图片查看器-实现多张图片预览组件
CharlieChen的专栏
12-06 6867
参考和下载：http://www.dowebok.com/192.html 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转（类似微博的图片旋转） 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式（可做屏保） 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本，您可以任意选择。 GitHub ...
jQuery手机触屏滑动切换幻灯片
04-07
本主题将深入探讨“jQuery手机触屏滑动切换幻灯片”这一技术，它是基于流行的swiper js库实现的，专为移动端网站设计，旨在优化图片、内容的展示方式，使用户能够通过简单的手势滑动浏览多张图片或信息。 一、...
jQuery移动端幻灯片插件swipeslider
04-08
此外，由于其基于jQuery，你可以利用jQuery的丰富插件生态来进一步增强幻灯片的功能，比如添加图片预加载、动态加载内容等。 ### 总结 `jQuery移动端幻灯片插件swipeslider`是一个理想的选择，无论你是新手还是经验...
原创Jquery实现图片幻灯片特效
03-15
此外，`img`目录存储了实际的图片资源，而`.url`文件可能是链接到相关教程或资源的快捷方式，帮助学习者更深入地了解jQuery和幻灯片制作。 总之，这个"原创Jquery实现图片幻灯片特效"项目提供了一个实践jQuery动态...
带缩略图移动端jQuery幻灯片
04-07
【jQuery幻灯片技术概述】 在网页设计中，幻灯片是一种常见的展示方式，用于以动态效果呈现多张图片或内容。"带缩略图移动端jQuery幻灯片"是专为移动设备优化的一种幻灯片插件，它利用jQuery JavaScript库来实现...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 326
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 192
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 571
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 69
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
软件著作权申请教程（超详细）（2024新版）软著申请
最新发布
m0_75269526的博客
07-23 578
软件著作权申请教程（超详细）（2024新版），软著申请，软件著作权怎么申请，手把手教你申请软件著作权，不花冤枉钱，软著申请代理，软件著作权申请着手开始准备材料了。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。这一页的内容比较多，可以参考我下面的。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 916
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 749
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 59
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 948
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
60款精彩jQuery幻灯片效果与下载
"这篇资源汇总了60款基于jQuery的幻灯片插件，涵盖了各种设计风格和功能特性，适合用于网站的轮播图、图片画廊和动态展示。其中包括Cloud Carousel、ShineTime、Nivo Slider等知名插件，以及Interactive Photo Desk...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值