实现功能
界面
1.图片淡入淡出轮播，鼠标移入停止，移开继续
2.点击左右箭头切换图片，有鼠标悬停特效
3.点击下方灰点显示对应图片，有鼠标悬停特效
4.图片切换时，灰点也对应显示
思路
1.图片轮播
1.1 图片采用绝对定位，使其重叠
1.2 默认透明度为0，需显示图片则透明度置1
1.3 setInterval()实现自动轮播
2.鼠标移入移除事件mouseover()和mouseout()
3.鼠标单击事件click()
4.设置全局变量index来同步图片与灰点显示，依靠eq()获取元素节点
一些细节
- position属性
1.1 static
静态定位，默认值。没有定位，元素出现在正常的流中（忽略TRBL或者 z-index 声明）。
1.2 relative
相对定位，生成相对定位的元素，相对于其正常（原先本身）位置进行定位。
元素通过TRBL属性规定位置和z-index规定层次分级。
1.3 absolute
绝对定位，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素通过TRBL属性规定位置和z-index规定层次分级。
1.4 fixed
固定定位，生成绝对定位的元素，相对于浏览器窗口进行定位。
元素通过TRBL属性规定位置和z-index规定层次分级。
位置不随滚轮移动而改变。
- 涉及jQuery API
2.1 css
css(properties)要设置为样式属性的名/值对。
2.2 animate
animate(params,speed)用于创建自定义动画的函数。
-params:一组包含作为动画属性和终值的样式属性和及其值的集合
-speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值.
2.3 eq
eq(n) 获取当前链式操作中第n个对象
总结
jQuery极大简化了Js编程。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.5.0.min.js"></script>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
width: 1226px;
height: 460px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img{
position: absolute;
width: 100%;
height: 100%;
}
#myimg{
opacity: 0;
}
#left,#right{
position: absolute;
top: 195px;
margin: 0px;
width: 41px;
height: 69px;
background-image: url(./images/arrow.png);
background-color:rgba(0,0,0,0);
cursor: pointer;
}
#left{
background-position: -83px 0px;
}
#left:hover{
background-position: 0px 0px;
}
#right{
left: auto;
background-position: -124px 0px;
}
#right:hover{
background-position: -41px 0px;
}
#point{
width: 100px;
height: 10px;
position: absolute;
left: auto;
top: auto;
right: 30px;
bottom: 20px;
}
#point ul li{
width: 6px;
height: 6px;
border: 2px solid #fff;
border-color: hsla(0,0%,100%,.3);
border-radius: 10px;
list-style: none;
background: rgba(0,0,0,.4);
margin:0 5px;
float: left;
cursor: pointer;
}
</style>
<body>
<div id="did">
<img id="myImg" src="./images/1.webp" alt="">
<img id="myimg" src="./images/2.webp" alt="">
<img id="myimg" src="./images/3.webp" alt="">
<img id="myimg" src="./images/4.webp" alt="">
<div class="arrow" id="left"></div>
<div class="arrow" id="right"> </div>
<div id="point">
<ul id="uid"><li></li><li></li><li></li><li></li></ul>
</div>
</div>
</body>
<script>
var index = 0;
doStart();// 默认开启
// 自动轮播效果
function doStart(){
myTime = setInterval(function(){
//让上一张淡出
imgOut(index);
index = ++index%4;
//让下一张淡入
imgIn(index);
},3000);
}
// 鼠标移入暂停轮播;移出继续
$("#did").mouseover(function(){
clearInterval(myTime);
}).mouseout(function(){
doStart();
});
// 右箭头单击事件
$("#right").click(function(){
//让上一张淡出
imgOut(index);
index = ++index%4;
//让下一张淡入
imgIn(index);
});
// 左箭头单击事件
$("#left").click(function(){
//让上一张淡出
imgOut(index);
index--;
if(index < 0){
index = 3;
}
//让下一张淡入
imgIn(index);
});
// 灰点事件
$("li").mouseover(function(){// 鼠标移入
dotIn(this);
}).mouseout(function(){// 鼠标移出
dotOut(this);
}).click(function(){// 单击
// 不同的灰点单击才变换
if(index != $(this).index()){
imgOut(index);// 当前的淡出
index = $(this).index();
imgIn(index);// 小圆点对应的淡入
}
});
// 图片淡入
function imgIn(num){
$("img").eq(num).animate({"opacity":1},1000);
dotIn( $("li").eq(num));// 对应灰点亮起
}
// 图片淡出
function imgOut(num){
$("img").eq(num).animate({"opacity":0},1000);
dotOut( $("li").eq(num));// 对应灰点暗去
}
// 小灰点亮
function dotIn(dot){
$(dot).css({"background":"hsla(0,0%,100%,.4)","borderColor":"rgba(0,0,0,0.4)"});
}
// 小灰点暗
function dotOut(dot){
$(dot).css({"background":"rgba(0,0,0,.4)","borderColor":"hsla(0,0%,100%,.3)"});
}
</script>
</html>
