HTML .CSS JQUERY unslider插件实现首页动态

最新推荐文章于 2023-04-02 20:59:48 发布

从此再无྅

最新推荐文章于 2023-04-02 20:59:48 发布

阅读量333

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/qq_67519129/article/details/125427900

版权

本文介绍了如何使用jQuery来实现轮播图功能，利用unslider插件创建轮播图，并展示了如何配置相关文件和修改样式。同时，文章还探讨了jQuery的悬停事件hover()，用于改变图片透明度，为网页增加交互体验。此外，代码示例中还包括了图片的添加、删除及内容和属性的设置等jQuery基本操作。

摘要由CSDN通过智能技术生成

一、jquery使用技巧

1、jquery操作css

2、jquery hover()方法

3、轮播图插件unslider

4、jqeury click()方法

5、图片放大插件jQueryMagnifier

6、jquery设置内容和属性

7、jquery添加、删除元素

二、任务

1、首页（轮播图、鼠标悬停效果）

（1）读一遍轮播图的demo代码（页面标签元素、标签样式效果、jquery代码）

jquery轮播图插件unslider

（2）准备并配置好插件的相关文件（js文件、图片）

（3）粘贴demo代码

（4）修改属性（高宽、颜色、形状等CSS样式）和参数（id名称、class名称、图片路径、）

三、实现代码

.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link href="css/common.css" rel="stylesheet"/>
		<link href="css/index.css" rel="stylesheet"/>
		<script src="js/jquery-3.6.0.min.js"></script>
		<script src="js/unslider.min.js"></script>
		<!-- <style>
			
		</style> -->
	</head>
	<body>
	<div class="all">
		<iframe class="iheader" src="header.html"></iframe>
		<div class="content">
			<!-- <img class="imgtop" src="img/about1.jpg"/> -->
			<div class="banner" id="b04">
			    <ul>
			        <li><img src="img/bg.jpg" alt="" width="1200" height="500" ></li>
			        <li><img src="img/bg1.jpg" alt="" width="1200" height="500" ></li>
			        <li><img src="img/bg2.jpg" alt="" width="1200" height="500" ></li>
			        <li><img src="img/bg3.jpg" alt="" width="1200" height="500" ></li>
			    </ul>
			    <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="img/arrowl.png" alt="prev" width="20" height="35"></a>
			    <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="img/arrowr.png" alt="next" width="20" height="35"></a>
			</div>
			<img class="img1" src="img/cake_03.jpg"/>
			<img class="img1" src="img/cake_05.jpg"/>
			<img class="img1" src="img/cake_07.jpg"/>
		</div>
		<div style="clear: both;"></div>
		<iframe class="ifooter" src="footer.html"></iframe>
	</div>
	</body>
	<!-- //图片划过变浅 -->
	<script>
		$(function(){
			$(".img1").hover(function(){
				$(this).css("opacity","0.3");
				// $(this).css("background-color","red");
			},function(){
				$(this).css("opacity","1");
				// $(this).css("background-color","yellow");
			});
		});
	</script>
	<!-- 图片轮播 -->
	<script>
		$(function(){
			//初始化轮播图对象
		    var unslider04 = $('#b04').unslider({
				//显示中间的圆点效果图
		        dots: true
		    }),
			//获取轮播图里面的对象数据（集合）
		    data04 = unslider04.data('unslider');
		     //左右箭头的点击事件，实现图片的切换
		    $('.unslider-arrow04').click(function() {
		        var fn = this.className.split(' ')[1];
		        data04[fn]();
		    });
		});
	</script>
</html>

.css

.all{
	width: 100%;
	height: 810px;
	margin: auto;
	/* border: 1px solid red; */
}
.iheader{
	height: 80px;
}
iframe{
	width: 1230px;
}
.all .content .imgtop{
	width: 1200px;
	height: 500px;
	float: left;
}
.all .content .img1{
	width: 400px;
	height: 200px;
	float: left;
}

ul, ol { padding: 0;}
			.banner { position: relative; overflow: auto; text-align: center;}
			.banner li { list-style: none; }
			.banner ul li { float: left; }
			#b04 { width:1200px;}
			#b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
			#b04 .dots li 
			{ 
			    display: inline-block; 
			    width: 10px; 
			    height: 10px; 
			    margin: 0 4px; 
			    text-indent: -999em; 
			    border: 2px solid #fff; 
			    border-radius: 6px; 
			    cursor: pointer; 
			    opacity: .4; 
			    -webkit-transition: background .5s, opacity .5s; 
			    -moz-transition: background .5s, opacity .5s; 
			    transition: background .5s, opacity .5s;
			}
			#b04 .dots li.active 
			{
			    background: #fff;
			    opacity: 1;
			}
			#b04 .arrow { position: absolute; top: 250px;}
			#b04 #al { left: 15px;}
			#b04 #ar { right: 15px;}