jQuery带文字动画图片轮播特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带文字动画图片轮播特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery带文字动画图片轮播代码</title>
<!--可无视-->
<link rel="stylesheet" href="style/public.css"/>
<!--主要样式-->
<link rel="stylesheet" href="style/css.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>

</head>
<body>

<div class="bannerbox">
    <div class="nav">
        <dl>
            <dd class=""></dd>
            <dd class=""></dd>
            <dd class=""></dd>
        </dl>
    </div>
    <ul>
        <li class="fst-li">
            <div class="containt-div">
               <div class="baner-01-a"><img src="images/banner-01-a.png" alt=""/></div>
               <div class="baner-01-b"><img src="images/banner-01-b.png" alt=""/></div>
            </div>
        </li>
        <li class="sec-li">
            <div class="containt-div">
                <div class="banner2-02"><img src="images/banner2-02.png" alt=""/></div>
                <div class="banner2-01"><img src="images/banner2-01.png" alt=""/></div>
                <div class="banner2-03"><img src="images/banner2-03.png" alt=""/></div>
            </div>
        </li>
        <li class="third-li">
            <div class="containt-div">
                <div class="banner3-01"><img src="images/banner3-01.png" alt=""/></div>
                <div class="banner3-02"><img src="images/banner3-02.png" alt=""/></div>
                <div class="banner3-03"><img src="images/banner3-03.png" alt=""/></div>
                <div class="banner3-04"><img src="images/banner3-04.png" alt=""/></div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

JS代码(js.js):

var width=$(".bannerbox").width();
	var i=-1;
	var timer=0;
	$(document).ready(function (){
	move();
	timer=setInterval("move()",3000);
	$(".bannerbox ul li").hover(function(){
	clearInterval(timer);
}
,function(){
	timer=setInterval("move()",3000);
}
) $('.nav dl dd').click(function(){
	var ddIndex=$(this).index()-1;
	i=ddIndex;
	move();
}
)}
)function move(){
	i++;
	$('.baner-01-a').css({
	"top":"100px",opacity:0}
);
	$('.baner-01-b').css({
	"top":"400px",opacity:0}
);
	$('.banner2-02,.banner2-03').css({
	opacity:0}
);
	$('.banner2-01').css({
	opacity:0,"left":"-100px"}
);
	$('.banner3-04').css({
	opacity:0,"bottom":"100px"}
);
	$('.banner3-01').css({
	opacity:0}
);
	$('.banner3-02').css({
	opacity:0}
);
	$('.banner3-03').css({
	opacity:0}
);
	if(i>=3){
	i=0;
}
if(i<3){
	if(i==0){
	//$('.fst-li').fadeIn(100).siblings().fadeOut(100);
	$('.nav dl dd').eq(i).addClass('bg').siblings().removeClass('bg');
	$('.bannerbox ul li').eq(i).fadeIn(100).siblings().fadeOut();
	$('.baner-01-a').animate({
	"top":"174px",opacity:1}
,450,function(){
	$('.baner-01-b').animate({
	"top":"400px",opacity:1}
,450)}
);
}
if(i==1){
	//$(".sec-li").fadeIn(100).siblings().fadeOut(100);
	$('.nav dl dd').eq(i).addClass('bg').siblings().removeClass('bg');
	$('.bannerbox ul li').eq(i).fadeIn(100).siblings().fadeOut();
	$('.banner2-02').animate({
	opacity:1}
,300,function(){
	$('.banner2-03').animate({
	opacity:1}
,300,function(){
	$('.banner2-01').animate({
	opacity:1,"left":0}
,300);
}
);
}
);
}
if(i==2){
	$('.nav dl dd').eq(i).addClass('bg').siblings().removeClass('bg');
	$('.bannerbox ul li').eq(i).fadeIn(100).siblings().fadeOut();
	$('.banner3-04').animate({
	opacity:1,"bottom":"0"}
,225,function(){
	$('.banner3-01').animate({
	opacity:1,"margin-left":"-360px"}
,225,function(){
	$('.banner3-02').animate({
	opacity:1,"margin-left":"-305px"}
,225,function(){
	$('.banner3-03').animate({
	opacity:1,"margin-left":"-107px"}
,225);
}
);
}
);
}
);
}
}
}

CSS代码(public.css):

/* CSS Document */
@charset "utf-8";/* CSS Document */
body,ul,ol,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0 auto;padding:0;border:0;}
body{background:#fff;color:#414040;font-size:14px;margin-top:0px;font-family:"microsoft Yahei","Arial Narrow";line-height:22px;}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
.left{float:left;}
.right{float:right;}
.clearfix{zoom:1;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
a{outline:none;}

附件:下载该文件资源,减少时间成本(增值服务)