jquery京东左右焦点轮播图

jquery京东左右焦点轮播图

html:

<div class="slider">
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="images/7.jpg" alt=""></a></li>
<li><a href="#"><img src="images/8.jpg" alt=""></a></li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left">&lt;</span>
<span class="arrow-right">&gt;</span>
</div>
</div>

css:

* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
}
.slider li {
position: absolute;
display: none;
}
.slider li:first-child {
display: block;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}

jq:

<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function () {

// 定义一个临时变量，当li的索引值 去使用
var count = 0;

$lis = $('.slider>ul>li');
console.log($lis);

// 单击 左侧按钮
$('.arrow-left').click(function(){
count--;
if(count == -1){
count = 0;
}
console.log(count);
// // 1.当前的li 淡入
// $lis.eq(count).fadeIn(1000);
// // 2.当前li同级的其他li元素，淡出
// $lis.eq(count).siblings().fadeOut(1000);

$lis.eq(count).fadeIn(1000).siblings().fadeOut(1000);
});

// 单击 右侧按钮
$('.arrow-right').click(function(){
count++;
if(count == $lis.length){
count = 0;
}
console.log(count);
// // 1.当前的li 淡入
// $lis.eq(count).fadeIn(1000);
// // 2.当前li同级的其他li元素，淡出
// $lis.eq(count).siblings().fadeOut(1000);

$lis.eq(count).fadeIn(1000).siblings().fadeOut(1000);
});

// 自动轮播
var timer = null;
function autoPlay(){
count++;
if(count >= $lis.length){
count = 0;
}
console.log(count);
$lis.eq(count).fadeIn(1000).siblings().fadeOut(1000);
}
timer = setInterval(autoPlay,1000);

// 鼠标移入---清除定时器
$('.slider').mouseenter(function(){
clearInterval(timer);
})

// 鼠标移出---启动定时器
$('.slider').mouseleave(function(){
timer = setInterval(autoPlay,1000);
})

});
</script>

分析：

length jQuery对象中元素的个数。

click() 注册 单击事件

eq(index) 筛选中的一个方法--- 获取第N个元素

fadeIn(1000) 效果----淡入效果  通过“不透明度的变化” 来实现 所有匹配元素的 淡入效果 （慢慢的显示出来！！） 1000毫秒=1秒

在1秒内， 淡入

fadeOut(1000) 效果----淡出效果  通过“不透明度的变化” 来实现 所有匹配元素的 淡出效果 （慢慢的隐藏出来！！）

在1秒内， 淡出

siblings() 找 同辈的兄弟元素（集合）