目录
1，任务概述
2，参考代码
一，重做轮播图训练任务
1，任务概述
JS 中轮播图任务卡一致，此次需要大家应用 jQuery 来完成。
具体效果参考网址：https://www.jd.com/
2，参考代码
2.1 重点摘要
1）选择imgList中的li标签
var imgs = $("#imgList li");
2）遍历li标签，并一次性设置多个css样式
$("#iconList li").each(function(){
if($(this).index() == index){
$(this).css({"border":"2px solid gray","borderColor":"rgba(128,128,128,0.5)","top":"0px"});
}else{
$(this).css({"border":"none","top":"2px"});
}
});
3）为标签绑定鼠标移入移出事件
$("#imgList").mouseout(function(){
doStart();
}).mouseover(function(){
clearInterval(timer);
index = (index - 1 + imgs.length) % imgs.length;
});
4）获得鼠标点击的li标签下标
$("#iconList li").mouseover(function(){
index = $(this).index();
doStart();
});
2.2 参考代码
为了显示jQuery在PC端的优势、对比上次任务的不同之处，代码中保留了上次任务的部分逻辑；
为便于阅读，注释代码已尽可能规范，喜欢并支持的朋友点个赞再欣赏呗（づ￣3￣）づ╭❤～
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图设计——jQuery实现</title>
<script src="./jquery-3.5.0.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
list-style: none; /* 消除列表的原点 */
text-decoration: none; /* 消除链接下划线 */
}
/* 整体展示框架的样式 */
#container{
width: 386px;
height: 260px;
left: 500px;
top: 200px;
overflow: hidden; /* 超出部分选择隐藏 */
border: 0.5px solid gray;/* 边框设置为黑色 */
position: relative; /* 框架采用相对定位 */
}
/* 图片列表的样式 */
#imgList{
width: 1930px; /* 所有图片累计的宽度386 * 5 */
height: 260px;
}
/* 单个图标的样式 */
#imgList li{
float: left; /* 浮动靠左排列 */
transition: opacity 300ms ease-in-out 0.5s;
transition-duration: 0.5s;/* 过渡动画 但是好像没有起作用 应该是没有定义过渡后的效果*/
}
/* 下方小圆点图标列表样式 */
#iconList{
position: absolute; /* 绝对定位 */
width: 75px; /* 设定整体规格、位置 */
height: 10px;
left: 20px;
bottom: 10px;
}
/* 小图标的定位 */
#iconList li{
position: relative;
float: left;
margin-left: 5px; /* 扩大圆点间距 */
width: 10px;
height: 10px;
cursor: pointer; /* 将鼠标图形变成小手样式 */
border-radius: 50%; /* 设置为圆形 */
background-color:white;
opacity: 0.75; /* 透明度 */
top: 2px; /* 普通小圆点距顶端距离 为了使选中小圆点添加边框后仍然保持对齐 */
}
/* 字体图标实现左右移动图片的功能 */
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?33765623');
src: url('./font/fontello.eot?33765623#iefix') format('embedded-opentype'),
url('./font/fontello.woff?33765623') format('woff'),
url('./font/fontello.ttf?33765623') format('truetype'),
url('./font/fontello.svg?33765623#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* 设置字体图标的整体样式 */
.icon{
font-family: 'fontello';
color: white;
}
/* 左边字体图标的样式 */
#iconLeft{
position: absolute;
cursor: pointer;
width: 20px;
height: 30px;
left: 0px;
bottom: 125px;
background-color:gray;
opacity: 0.5;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
line-height: 30px; /* 保证字体图标上下居中 */
text-align: left; /* 靠左 */
}
/* 右边字体图标的样式 */
#iconRight{
position: absolute;
cursor: pointer;
width: 20px;
height: 30px;
right: 0px;
bottom: 125px;
background-color:gray;
opacity: 0.5;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
line-height: 30px;
text-align: right; /* 靠右 */
}
</style>
</head>
<body>
<div id="container" >
<!-- 由于展示图片后index立刻加一 为了显示上一张图片 这里需要减二 -->
<!-- <div class="icon" id="iconLeft" onclick="moveImg(-2)"></div> -->
<div class="icon" id="iconLeft"></div>
<!-- 由于展示图片后index立刻加一 为了显示下一张图片 这里不需要更改 -->
<div class="icon" id="iconRight"></div>
<!-- <ul id="imgList" onmouseover="doStop()" onmouseout="doStart()"> -->
<ul id="imgList">
<li><a href=""><img src="./images/17.jpg" alt=""></a></li>
<li><a href=""><img src="./images/18.jpg" alt=""></a></li>
<li><a href=""><img src="./images/19.jpg" alt=""></a></li>
<li><a href=""><img src="./images/20.jpg" alt=""></a></li>
</ul>
<ul id="iconList">
<!-- <li onmouseover="locate(0)"></li>
<li onmouseover="locate(1)"></li>
<li onmouseover="locate(2)"></li>
<li onmouseover="locate(3)"></li> -->
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 习惯性的添加入口函数
$(function(){
// 初始化图片位置
var index = 0;
// 获取图片标签
// var imgs = document.getElementById("imgList").getElementsByTagName("li");
var imgs = $("#imgList li");
// 获取图标列表
// var icons = document.getElementById("iconList").getElementsByTagName("li");
var icons = $("#iconList li");
// 设置定时器
var timer;
// 开始轮播
doStart();
// 展示图片和小图标(通用方法)
function show(){
index = (index + imgs.length) % imgs.length;// 保证不越界
changeImg();
changeIcon();
index++; // 下标自增
}
// 启动定时轮播(通用方法)
function doStart(){
show(); // 先执行一次
if(timer != null){
clearInterval(timer);
timer = null;
}
timer = setInterval(show,3000);
}
// 根据index 修改当前位置的圆点样式
function changeIcon(){
$("#iconList li").each(function(){
if($(this).index() == index){
$(this).css({"border":"2px solid gray","borderColor":"rgba(128, 128, 128, 0.5)","top":"0px"});
}else{
$(this).css({"border":"none","top":"2px"});
}
});
// for(var i = 0; i < imgs.length; i++){
// if(i == x){
// // icons[i].style.border="2px solid gray"
// // icons[i].style.borderColor="rgba(128, 128, 128, 0.5)";
// // icons[i].style.top="0px";// 保证居中
// }else{
// icons[i].style.border="none";
// icons[i].style.top="2px";// 保证居中
// }
// }
}
// 根据index 通过修改marginLeft展示不同图片
function changeImg(){
if(index == 0){
// document.getElementById("imgList").style.marginLeft = "0px";
$("#imgList").css("marginLeft","0px");
}else{
// document.getElementById("imgList").style.marginLeft = -index * 386+"px";
$("#imgList").css("marginLeft",-index * 386+"px");
}
}
// 设计图片列表的鼠标移入移出事件
$("#imgList").mouseout(function(){
doStart();
}).mouseover(function(){
clearInterval(timer);
// 由于展示完当前图片后index立即加一,若鼠标悬停在图片上之后移开，会立刻显示第二张图片，所以减一
// 为了避免index出现负数，进行取模运算
index = (index - 1 + imgs.length) % imgs.length;
});
// 暂停定时轮播(直接在script中绑定鼠标事件，所以这里将原先在HTML中的doStop取消了)
// function doStop(){
// clearInterval(timer);
// index = (index - 1 + imgs.length) % imgs.length;
// }
// 根据选择的圆点来确定图片(这里点击事件的索引index感知点击的哪个li标签，取代了传参的方法)
$("#iconList li").mouseover(function(){
index = $(this).index();
doStart();
});
// function locate(x){
// index = (x + imgs.length) % imgs.length;
// doStart();
// }
// 绑定左右图标点击事件
$("#iconLeft").click(function(){
// 由于展示完当前图片后index立即加一,若要显示上一张图片，需要减二
index = index - 2;
doStart();
});
$("#iconRight").click(function(){
doStart();
});
});
</script>
</body>
</html>
章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】
对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731
有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]
