jQuery实现轮播效果

最新推荐文章于 2024-02-20 00:03:41 发布
最新推荐文章于 2024-02-20 00:03:41 发布
阅读量243 收藏 2
点赞数
分类专栏： jQuery 文章标签： js jQuery 前端 案例 练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44821445/article/details/100099185
版权

jQuery实现轮播效果

实际效果图

  • 不多说，直接上代码。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3D手动轮播图</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				line-height: 0;
			}
			body{
				background-color: aliceblue;
				opacity: 0.8;
			}
			img{
				width: 100%;
				height: 100%;
			}
			div{
				box-shadow: 0 0 10px #000 ;
			}
			#div_main{
				position: absolute;left: 25%; top: 100px;
				width: 700px;height: 400px;
				background-color: rosybrown;
				z-index: 10;opacity: 1;
			}
			#div_left{
				position: absolute;left: 10%; top: 150px;
				width: 500px;height: 300px;
				background-color: rosybrown;
				z-index: 9;opacity: 0.8;
			}
			#div_rignt{
				position: absolute;left: 55%; top: 150px;
				width: 500px;height: 300px;
				background-color: rosybrown;
				z-index: 9;opacity: 0.8;
			}
			#div_leftSon{
				position: absolute;left: 6%; top: 225px;
				width: 500px;height: 150px;
				background-color: rosybrown;
				z-index: 8;opacity: 0.6;
			}
			#div_rigntSon{
				position: absolute;left: 59%; top: 225px;
				width: 500px;height: 150px;
				background-color: rosybrown;
				z-index: 8;opacity: 0.6;
			}
			input[type="button"]{
				position: absolute;
				padding: 15px;
				font-size: 20px;
				background-color: white;
				opacity: 0.9;
				border: none;border-radius: 7px;box-shadow: 0 0 20px whitesmoke;
				z-index: 11;
			}
			#button_left{
				left: 20%;top: 280px;
			}
			#button_right{
				left: 78%;top: 280px;
			}
		</style>
	<script src="../../js/jquery-1.12.4.js"></script>
	</head>
	<body>
		<input type="button" value="<" id="button_left"/>
		<input type="button" value=">" id="button_right"/>
		<div id="div_leftSon">
			<img src="http://b.hiphotos.baidu.com/zhidao/pic/item/96dda144ad34598293f69d550cf431adcaef84fc.jpg"/>
		</div>
		<div id="div_left">
			<img src="http://pic1.win4000.com/wallpaper/8/583f83394c3a3.jpg"/>
		</div>
		<div id="div_main">
			<img src="http://pic1.win4000.com/wallpaper/f/5462cc463dc11.jpg"/>
		</div>
		<div id="div_rignt">
			<img src="http://www.79n.cn/uploads/allimg/130202/1-130202213035.jpg"/>
		</div>
		<div id="div_rigntSon">
			<img src="http://pic1.win4000.com/wallpaper/e/580b343bdb11b.jpg"/>
		</div>
	<script type="text/javascript">
		$(function(){
			/**
			可以实现切换的功能，但是比较“生硬” 
			且需要将图片路径改为“标准”格式，如：img/1.jpg
			 */
//			$("#button_left").click(function(){
//				//获得所有的img标签
//				var imgs = $("img");
//				//遍历所有的标签，改变相应图片的路径，实现按钮点击改变图片的效果
//				imgs.each(function(i) {
//					//截取路径中数字部分
//					var src_ = Number($(this).attr("src").substring(7,8));
//					//改变数字
//					src_ += 1;
//					//如果数字为5+1，则图片换为第一张
//					if(src_ == 6){
//						src_ = 1;
//					}
//					//设置路径
//					$(this).attr("src",'images/'+ src_ +'.jpg');
//				});
//			});

			/**
			通过animate（）函数，实现缓动效果，对图片切换之间的各个变化的属性进行调整。 
			 */
			//左按钮点击进行图片切换
			$("#button_left").click(function(){
				//获得所有的img标签
				var divs = $("div");
				//遍历所有的标签，改变相应图片的路径，实现按钮点击改变图片的效果
				divs.each(function(i) {
					var str = $(this).attr("id");
					//判断每一个div的id，进行不同情况的变化处理
					switch(str){
						case "div_leftSon": 
						//避免图片切换的生硬，先进行z-index的改变，再进行其他变化
							$(this).animate({
								"z-index": 8
							},0).animate({
								left: "59%", 
								top: "225px",
								width: "500px",
								height: "150px",
								opacity: "0.6"
								//图片变换后，重新设置id，使其符合相应的位置
							},500).attr("id","div_rigntSon");
						break;
						case "div_rigntSon": 
							$(this).animate({
								"z-index": 9
							},0).animate({
								left: "55%", 
								top: "150px",
								width: "500px",
								height: "300px",
								opacity: "0.8"
							},800).attr("id","div_rignt");
						break;
						case "div_rignt": 
							$(this).animate({
								"z-index": 10
							},0).animate({
								left: "25%", 
								top: "100px",
								width: "700px",
								height: "400px",
								opacity: "1"
							},500).attr("id","div_main");
						break;
						case "div_main": 
							$(this).animate({
								"z-index": 9
							},0).animate({
								left: "10%", 
								top: "150px",
								width: "500px",
								height: "300px",
								opacity: "0.8"
							}).attr("id","div_left");
						break;
						case "div_left": 
							$(this).animate({
								"z-index": 8
							},0).animate({
								left: "6%", 
								top: "225px",
								width: "500px",
								height: "150px",
								opacity: "0.6"
							}).attr("id","div_leftSon");
						break;
					}
				});
			});
			//点击右侧按钮实现图片的切换			
			$("#button_right").click(function(){
				//获得所有的img标签
				var divs = $("div");
				//遍历所有的标签，改变相应图片的路径，实现按钮点击改变图片的效果
				divs.each(function(i) {
					var str = $(this).attr("id");
					switch(str){
						case "div_rignt": 
							$(this).animate({
								"z-index": 8
							},0).animate({
								left: "59%", 
								top: "225px",
								width: "500px",
								height: "150px",
								opacity: "0.6"
							}).attr("id","div_rigntSon");
						break;
						case "div_main": 
							$(this).animate({
								"z-index": 9
							},0).animate({
								left: "55%", 
								top: "150px",
								width: "500px",
								height: "300px",
								opacity: "0.8"
							}).attr("id","div_rignt");
						break;
						case "div_left": 
							$(this).animate({
								"z-index": 10,
								left: "25%", 
								top: "100px"
							},0).animate({
								width: "700px",
								height: "400px",
								opacity: "1"
							}).attr("id","div_main");
						break;
						case "div_leftSon": 
							$(this).animate({
								"z-index": 9,
							},0).animate({
								left: "10%", 
								top: "150px",
								width: "500px",
								height: "300px",
								opacity: "0.8"
							},800).attr("id","div_left");
						break;
						case "div_rigntSon": 
							$(this).animate({
								"z-index": 8,
							},0).animate({
								left: "6%", 
								top: "225px",
								width: "500px",
								height: "150px",
								opacity: "0.6"
							},500).attr("id","div_leftSon");
						break;
					}
				});
				
			});
		});
	</script>
	</body>
</html>
无风无疯
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jQuery实现轮播图效果（自动播放，能手动切换）
hjseo_seg的博客
03-02 5008
大家好，今天我和大家分享一下轮播图的实现，下面是我做的轮播图效果 首先我们看到，它是由背景图片、方向图标和指示器组成。**我们发现背景图片、方向图标和指示器是层叠在一起的，所以布局时我们要用绝对定位。**我们要实现点击方向图标时，图片跟着变换；点击指示器时，图片跟着变换；不点击时每隔5秒自动播放；不点击时不显示方向图标。 **结构布局：**用一个div包裹3个div，里面的3个div分别显示背景图片部分、方向图标部分和指示器部分。 <!DOCTYPE html> <html lang="
jQuery轮播效果（Carousell）
chenmo2001的博客
06-07 2909
jQuery轮播效果（Carousell） 轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JavaScript构建---内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图分浏览控制和指令支持。 在支持Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态。窗口最小化时），轮播效果控件会停止运动，从而节省性能。 用法 通过数据属性 使用数据属性可以轻松控制转盘的位置。Data-slide接受关键字，p...
使用Jquery实现轮播图
jiaohuizhuang6019的博客
09-14 1852
使用Jquery实现轮播图
jQuery实现轮播图
qq_58460470的博客
11-21 3999
jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法 实现广告图片的轮播展示效果
淘宝顶部header的居中布局
u011280778的博客
06-29 1928
<!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-...
jquery实现轮播效果js源码下载
06-04
接着，"js"文件夹中的JavaScript源码是实现轮播效果的核心。此代码会监听用户操作（如点击按钮或自动切换），并更新HTML元素的状态，如改变图片的显示、调整过渡效果等。jQuery提供了丰富的API，如`$.fn.slideToggle...
jQuery实现轮播图效果
01-21
本文实例为大家分享了jQuery实现弹幕效果的具体代码，供大家参考，具体内容如下 话不多说吧，直接看效果吧： 主要思路 其实弹幕的主要思路很简单，就是将div从右向左移动，直到完全移除屏幕之后，将当前div从body中...
Jquery轮播效果实现过程解析
10-22
JQuery轮播效果的实现是Web开发中常见且重要的技能之一，它主要用于网站中的广告展示、图片展示等场景。下面我们将详细分析Jquery轮播效果的实现步骤。 首先，我们需要构建HTML结构。一个基础的轮播组件通常由一个...
jquery实现轮播图效果
10-20
总的来说，这个jQuery实现的轮播图效果利用了CSS和JavaScript的结合，通过简单的代码实现了图片的自动切换和用户交互。它展示了如何用jQuery处理DOM操作、动画和事件监听，是学习和理解jQuery应用的一个好例子。
简单实现jQuery轮播效果
10-19
现在，我们可以编写jQuery代码来实现轮播效果。首先，我们定义全局变量`timer`来存储定时器，以便在需要时暂停和恢复轮播。接着，我们在文档加载完成后执行轮播初始化： ```javascript $(function() { // 初始化...
jQuery焦点图轮播特效代码分享（3款）
10-23
主要介绍了jQuery焦点图轮播特效，jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码，是一段拥有三种不同风格和效果的焦点图轮播代码，还可以使用鼠标的滚轮控制图片的缩放，推荐给大家，有需要的小伙伴可以参考下。
简单的jquery轮播效果
08-12
想要拥有jquery轮播的效果吗？本jquery轮播效果实现了轮播的核心功能，这个只是给出了轮播的一个简单的例子，以后会提供更简单、灵活的jquery轮播插件，敬请期待...
轮播图 原生代码（HTML+CSS+JQuery）
qq_69635978的博客
03-29 5227
【代码】轮播图 原生代码（HTML+CSS+JQuery）
Jquery版轮播图超详细
周百万的博客
09-15 3467
主要功能介绍： 鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况
Jquery实现轮播图效果
weixin_52503404的博客
12-21 3362
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.j
【Jquery】Jquery 实现轮播图
day day up
10-30 344
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由发布。
html+css+jquery实现轮播图自动切换、左右切换、点击切换
最新发布
打代码是一天，不打代码也是一天
02-20 3402
代码如下： 效果如下图： 需要引入jquery； 定时器实现4s自动切换轮播图 步骤3：左右切换，左右点击事件手动切换 实现代码如下： 到目前存在自动切换轮播图，也存在手动切换轮播图。就可能存在手动切换时，又自动切换，客户体验就不太好，可以优化成，手动切换轮播图时，自动切换轮播图关掉，手动切换完成后，又开启自动切换轮播图。优化后，自动切换和左右切换js代码如下： 步骤4：点击切换，点击圆点事件手动切换 代码如下： html+css+jquery实现轮播图自动切换、左右切换、点击切换，代码如下：
用jq实现轮播图片的效果
qq_37561833的博客
05-18 9716
用jq实现轮播图片的效果 使用jq实现简单的图片轮播效果，图片自动轮播功能，左右点击滑动功能，鼠标进入数字列表时实现图片滑动功能；主要是通过操作图片数组删除和添加的元素，然后重新渲染页面的方式来实现轮播。 1.效果图 2.html代码 <h2 class="sub-header">例子：轮播</h2> <div id="out_view">...
使用jQuery实现动态轮播图效果
"该资源是关于使用jQuery实现轮播图的代码示例，包含HTML结构、CSS样式引用以及JavaScript脚本引用。HTML部分定义了一个id为'slideShow'的容器，其中包含多个带图片的'a'标签（表示轮播图的各个幻灯片），以及前后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值