jQuery实现图片轮播效果代码
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jQuery实现图片轮播效果代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
整理以前用jQuery实现的图片轮播效果。
1. 不做操作时，自动轮播
2. 鼠标悬浮在图片上时，停止自动轮播，隐藏在图片左右的箭头会显示出来
3. 手动轮播1：鼠标指向图片底部的小标按钮，可以切换对应的图片
4. 手动轮播2：点击左右箭头也可以切换图片
效果图：（PS：用软件捕捉的，不太会弄，感觉图片都失真了）
狼蚁网站SEO优化是代码区域：
**inde.html部分代码**
<div class="box"> <ul class="img"> <li class="photo"><a href="#"><img src="images/1.jpg" alt=""/></a></li> <li class="photo"><a href="#"><img src="images/2.jpg" alt=""/></a></li> <li class="photo"><a href="#"><img src="images/3.jpg" alt=""/></a></li> <li class="photo"><a href="#"><img src="images/4.jpg" alt=""/></a></li> <li class="photo"><a href="#"><img src="images/5.jpg" alt=""/></a></li> <li class="photo"><a href="#"><img src="images/6.jpg" alt=""/></a></li> <li class="photo"><a href="#"><img src="images/7.jpg" alt=""/></a></li> </ul> <div> <span class="jt" id="jtLeft"><</span> <span class="jt" id="jtRight">></span> </div> <div class="numList"></div> </div>
**reset.css代码**
.box{
padding:0;
width: 800px;
height: 500px;
margin: 0 auto;
position:relative;
}
ul.img{
padding:0;
margin: 0 auto;
}
ul.img .photo{
list-style: none;
position: absolute;
display: none;
}
img{
width: 800px;
height: 500px;
}
.box .img .active{
display: block;
}
.jt{
width: 40px;
height: 50px;
background-color: rgba(0,0,0,0.5);
position: absolute;
top:50%;
margin-top: -25px;
line-height: 50px;
font-size: 30px;
color: white;
font-weight: 800;
text-align: center;
display: none;
}
#jtRight{
right: 0;
}
.numList{
font-size: 0;
position: absolute;
bottom:10px;
left: 50%;
margin-left:-70px;
}
.numList .num{
background-color: black;
width: 20px;
height: 20px;
border-radius: 50%;
color: white;
text-align: center;
font-size: 14px;
display: inline-block;
}
.numList .check{
background-color: red;
}
**main.js代码**
$(function(){
/*定义全局变量，用来记录表示显示的图片的下标*/
var i=0;
/*按图片的数量添加下标*/
var size=$(".photo").size();
for (var j=1;j<=size;j++){
var span=$("<span class='num'>"+j+"</span>");
$(".numList").append(span);
}
/*默认选中第一个下标和显示第一张图片*/
$(".photo:eq(0)").addClass("active");
$(".num:eq(0)").addClass("check");
/*手动轮播*/
var HandleImgChange=function(){
$(".num").each(function(){
$(this).mouseover(function(){
$(this).siblings().removeClass("check");
$(this).addClass("check");
/*获得选择的下标值*/
i=$(this).index();
$(".photo").hide();
$(".photo").eq(i).show();
});
});
};
/*显示下一张图*/
var move=function(){
i++;
if(i>size-1){
i=0;
}
$(".num").eq(i).addClass("check").siblings().removeClass("check");
$(".photo").eq(i).show().siblings().hide();
};
/*自动轮播*/
var AutoImgChange=function(){
var t=setInterval(move,1000);
$(".box").hover(function(){
$(this).css({"cursor":"pointer"});
$(".jt").css({"display":"block"});
clearInterval(t);
},function(){
$(".jt").css({"display":"none"});
t=setInterval(move,1000);
})
};
/*设置左右箭头点击事件*/
var jtL=function(){
$("#jtLeft").click(function(){
i--;
if(i<0){
i=size-1;
}
$(".num").eq(i).addClass("check").siblings().removeClass("check");
$(".photo").eq(i).show().siblings().hide();
})
};
var jtR=function(){
$("#jtRight").click(function(){
move();
})
};
HandleImgChange();
AutoImgChange();
jtR();
jtL();
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。