HTML .CSS JQUERY unslider插件实现首页动态
丌官承
一、jquery使用技巧
1、jquery操作css
2、jquery hover()方法
3、轮播图插件unslider
4、jqeury click()方法
5、图片放大插件jQueryMagnifier
6、jquery设置内容和属性
7、jquery添加、删除元素
二、任务
1、首页（轮播图、鼠标悬停效果）
（1）读一遍轮播图的demo代码（页面标签元素、标签样式效果、jquery代码）
（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;}
类似资料：