好资源导航 » 文章资讯 » jQuery轮播图功能制作方法详解

jQuery轮播图功能制作方法详解

2023-08-05 01:49:04 65

本文实例讲述了jQuery轮播图功能制作方法。分享给大家供大家参考，具体如下：

在写轮播图之前我们先看看这个轮播图完成后的样式是怎样的

素材图片：

代码

HTML代码







Document





















山河
一个人
我眺望远方

夕阳

平静的湖水

美丽不可方物

沙漠

广袤

一往无前

温泉

游客

魂牵梦绕

大海

一棵树

紫气东来

CSS代码

*{
padding:0;
margin:0;
}
body{
background:#000;
}
.banner{
margin-left:15%;
width:70%;
position:relative;
}
.src{
max-width:100%;
}
.banner-img{
list-style:none;
}
.banner-body{
width:100%;
position:absolute;
bottom:0;
background:#fff;
}
.banner-img>li{
display:none;
}
.banner-img>.show{
display:block;
animation:opcaty2s;
}
@keyframesopcaty{
from{
opacity:0.2;
}
to{
opacity:1;
}
}
.banner-body-img{
margin:5px;
max-width:60%;
list-style:none;
}
.banner-body-img>li{
display:inline-block;
max-width:18%;
}
.banner-body-img>.active{
border-bottom:2pxsolid#000;
animation:left2s;
}
@keyframesleft{
from{
width:0;
}
to{
width:100%
}
}
.banner-text{
width:25%;
position:absolute;
bottom:0;
left:70%;
background:#493e56;
color:#fff;
}
.banner-text>div{
overflow:auto;
width:100%;
margin:10px;
display:none;
}
.banner-text>.text-active{
display:block;
}
.banner-text>div>p{
margin:10px0px;
}

JS代码

//构建索引值
varcurrIndex=0;
//初始化点击事件
initClick();
functioninitClick(){
$(".banner-imgli").hover(function(){
$(".banner-body").stop().slideUp();
clearInterval(timer);
},function(){
timer=setInterval("banner()",3000);
$(".banner-body").stop().slideDown();
})
$('#bannerUlli').click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
$(".banner-imgli").eq($(this).index()).addClass("show");
$(".banner-imgli").eq($(this).index()).siblings().removeClass("show");
$(".banner-textdiv").eq($(this).index()).addClass("text-active");
$(".banner-textdiv").eq($(this).index()).siblings().removeClass("text-active");
currIndex=$(this).index();
clearInterval(timer);
timer=setInterval("banner()",3000);
});
}
//构建定时器
vartimer=setInterval("banner()",3000);
functionbanner(){
if(currIndex>3){
currIndex=0;
}else{
currIndex++;
}
$(".banner-imgli").eq(currIndex).addClass("show");
$(".banner-imgli").eq(currIndex).siblings().removeClass("show");
$("#bannerUlli").eq(currIndex).addClass("active");
$("#bannerUlli").eq(currIndex).siblings().removeClass("active");
$(".banner-textdiv").eq(currIndex).addClass("text-active");
$(".banner-textdiv").eq(currIndex).siblings().removeClass("text-active");
}

如上。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

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

返回顶部
514930285
czq8825@qq.com

jQuery轮播图功能制作方法详解

热门推荐

随机推荐