微客导航 » 文章资讯 » jQuery实现轮播图效果demo

jQuery实现轮播图效果demo

2023-08-03 06:13:04 331

本文实例为大家分享了jQuery实现轮播图效果的具体代码，供大家参考，具体内容如下

效果展示：

编程思路：

1.首先是基础的布局，使用"子绝父相"等页面布局方法，将图片、左右按钮以及每张图片下方对应的标识小按钮安排的明明白白。
2.JS中在通过点击左右按钮来切换图片时，使用三个变量分别来表示当前显示的图片序号、点击上一张按钮时候显示的图片序号、点击下一张按钮时候显示的图片序号。
3.在自动轮播的时候，通过使用定时器来改变当前显示的图片序号来控制轮播

具体代码：

HTML代码：

CSS代码：

#slideShow{
width:330px;
height:245px;
background-color:#999999;
text-align:center;
left:50%;
margin-left:-165px;
position:relative;
}
#slideShow.slide_pic{
position:absolute;
left:0;
top:0;
}
#slideShow.prev_one{
position:absolute;
left:0;
top:45%;
}
#slideShow.next_one{
position:absolute;
right:0;
top:45%;
}
#slideShow#mark_box{
position:absolute;
bottom:0;
}

#mark_box.mark{
width:20px;
height:20px;
border-radius:20px;
padding:2px;
text-align:center;
line-height:20px;
background-color:red;
float:left;
list-style:none;
margin:10px10px;
cursor:pointer;
}
#mark_box.active_img{
background-color:green;
}

Javascript代码：

$(function(){
varprev_mark=0;//点击上一张按钮时候的一个标志位
varnext_mark=0;//点击下一张按钮时候的一个标志位
varcur_pic=$('.slide_pic').length-1;//当前图片的序号

$('.prev_one').click(function(){
prev_mark=cur_pic;//获取当前图片的序号
if(prev_mark===0){
prev_mark=$('.slide_pic').length-1;
}
else{
prev_mark--;
}
cur_pic=prev_mark;
$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
$('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
});

$('.next_one').click(function(){
next_mark=cur_pic;
if(next_mark===$('.slide_pic').length-1){
next_mark=0;
}
else{
next_mark++;
}
cur_pic=next_mark;
$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
$('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
});

//轮播图下面的指示点
$.each($('.mark'),function(index,value){
$(value).click(function(){
cur_pic=this.innerHTML-1;
$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
$(this).addClass('active_img').siblings('.mark').removeClass('active_img');
});
});

//鼠标移入图片则停止轮播；鼠标移出图片则开始轮播
varslide_timer=setInterval(auto_slide,2000);
$('#slideShow').mouseenter(function(){
clearInterval(slide_timer);
});
$('#slideShow').mouseleave(function(){
slide_timer=setInterval(auto_slide,2000);
});

//自动轮播函数
functionauto_slide(){
if(cur_pic===$('.slide_pic').length-1){
cur_pic=0;
}
else{
cur_pic++;
}
$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
$('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
}
});

更多关于轮播图效果的专题，请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现轮播图效果demo

热门推荐

随机推荐