基于jQuery实现淡入淡出效果轮播图
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了基于jQuery淡入淡出效果轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用JavaScript做了平滑切换的焦点轮播图之后，用jQuery写了个简单的淡入淡出的轮播图，代码没有做优化，html结构稍微有一些调整，图片部分用ul替换了之前用的div。
html结构如下：
<div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></li> <li><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></li> <li><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3"></a></li> </ul> <ul id="position"> <li class="cur"></li> <li class=""></li> <li class=""></li> </ul> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div>
css设置：
*{
margin: 0;
padding: 0;
text-decoration: none;
}
ul{
list-style: none;
}
#container{
position: relative;
width: 400px;
height: 200px;
margin: 20px auto;
}
.pic li {
position: absolute;
top: 0;
left: 0;
display: none;
}
.pic li img {
width: 400px;
height: 200px;
}
#position{
position: absolute;
bottom: 0;
right:0;
margin: 0;
background: #000;
opacity: 0.4;
width: 400px;
text-align: center;
}
#position li{
width: 10px;
height: 10px;
margin:0 2px;
display: inline-block;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #afafaf;
}
#position .cur{
background-color: #ff0000;
}
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 50%;
margin-top: -20px; /*width的一半*/
background-color: RGBA(0,0,0,.3);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0,0,0,.7);
}
#container:hover .arrow {
display: block;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
JavaScript代码：
$(function(){
//第一张显示
$(".pic li").eq(0).show();
//鼠标滑过手动切换，淡入淡出
$("#position li").mouseover(function() {
$(this).addClass('cur').siblings().removeClass("cur");
var index = $(this).index();
i = index;//不加这句有个bug，鼠标移出小圆点后，自动轮播不是小圆点的后一个
// $(".pic li").eq(index).show().siblings().hide();
$(".pic li").eq(index).fadeIn(500).siblings().fadeOut(500);
});
//自动轮播
var i=0;
var timer=setInterval(play,2000);
//向右切换
var play=function(){
i++;
i = i > 2 ? 0 : i ;
$("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
$(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//向左切换
var playLeft=function(){
i--;
i = i < 0 ? 2 : i ;
$("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
$(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//鼠标移入移出效果
$("#container").hover(function() {
clearInterval(timer);
}, function() {
timer=setInterval(play,2000);
});
//左右点击切换
$("#prev").click(function(){
playLeft();
})
$("#next").click(function(){
play();
})
})
精彩专题分享：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。