html轮播条实现,jQuery实现带进度条的轮播图

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

1.html模块

• 

• 

• 

2.css模块

*{

margin: 0;

padding: 0;

list-style: none;

}

.banner{

width: 100%;

height: 600px;

position: relative;

}

ul li{

width: 100%;

height: 600px;

position: absolute;

top: 0;

left: 0;

overflow:hidden;

}

ul li img{

width: 100%;

height: 600px;

position: absolute;

left: -100%;

}

.nav{

width: 100%;

height: 70px;

background: rgba(255,255,255,0.3);

position: absolute;

bottom: 0;

}

.bar{

width: 80%;

height: 3px;

background-color: #999;

position: absolute;

bottom: 0;

left: 10%;

}

.bar p{

width: 0px;

height: 3px;

background-color: green;

}

3.jQuery模块

var i=0;//定义当前索引

imgChange();//初始化调用

//定时切换

setInterval("imgChange()",6000);

//图片轮播的函数

function imgChange(){

//进度条完成后显示下一张背景

$("ul li").eq(i).fadeIn(100).siblings().fadeOut(100);

//初始化文字图片---设置到外部

$("ul li").eq(i).find("img").css("left","-100%");

//初始化进度条

$("ul li").eq(i).find("p").css("width","0px");

//设置文字图片从左进入的动画

$("ul li").eq(i).find("img").animate({"left":"0px"},500,function(){

//设置进度条动画

$("ul li").eq(i).find("p").animate({"width":"100%"},5000,function(){

$("ul li").eq(i).find("img").animate({left:"100%"},400);

//改变当前索引，当索引为最后一个则设为0，否则就加一

if(i>=$("ul li").length-1){

i=0

}else{

i++;

}

})

})

}

4.方法二

带进度条的轮播图

$(function () {

// 初始环境

var i=0,m;

tin(i);

// 定时器

m=setInterval(function () {

if (i>=2) {

i=0;

}else{

i++;

}

tin(i);

},5000);

})

// 动画效果

var tin = function (i) {

$(".cont li").eq(i).find("img").css("left","-100%");

$(".bar span").css("width","0%");

$(".cont li").eq(i).fadeIn(100).siblings().fadeOut(100);

$(".cont li").eq(i).find("img").animate({left:"0%"},1000);

$(".bar span").animate({width:"100%"},4500,function () {

$(".cont li").eq(i).find("img").animate({left:"100%"},400);

});

}

*{

margin: 0;

padding: 0;

list-style: none;

}

.box{

width: 100%;

height: 630px;

position: relative;

}

.cont{

width: 100%;

height: 630px;

position: relative;

overflow: hidden;

}

.cont li{

width: 100%;

height: 630px;

position: absolute;

top: 0;

left: 0;

}

.bar{

width: 70%;

height: 3px;

position: absolute;

bottom: 0px;

left: 15%;

background-color: white;

border-radius: 50px;

}

.bar span{

width: 0px;

display: block;

height: 80%;

background-color: green;

border-radius: 50px;

}

.cont li img{

width: 100%;

height: 630px;

position: absolute;

left: -100%;

top: 0;

}

.con1{

background: url(img/bg1.jpg) center;

}

.con2{

background: url(img/bg2.jpg) center;

}

.con3{

background: url(img/bg3.jpg) center;

}

.pav{

width: 100%;

height: 70px;

position: absolute;

bottom: 0px;

background-color: rgba(255,255,255,0.3);

}

• 
• 
• 

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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