jQuery实现带进度条的轮播图
本文实例为大家分享了jQuery实现带进度条轮播图的具体代码，供大家参考，具体内容如下
1.html模块
<div class="banner"> <ul> <li style="background: url(img/bg1.jpg) center;"> <img src="img/con1.png" /> <div class="nav"></div> <div class="bar"> <p></p> </div> </li> <li style="background: url(img/bg2.jpg) center;"> <img src="img/con2.png" /> <div class="nav"></div> <div class="bar"> <p></p> </div> </li> <li style="background: url(img/bg3.jpg) center;"> <img src="img/con3.png" /> <div class="nav"></div> <div class="bar"> <p></p> </div> </li> </ul> </div>
2.css模块
<style type="text/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;
}
</style>
3.jQuery模块
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
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++;
}
})
})
}
</script>
4.方法二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带进度条的轮播图</title>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(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);
});
}
</script>
<style type="text/css">
*{
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);
}
</style>
</head>
<body>
<div id="main">
<div id="box" class="box">
<!--图片-->
<ul class="cont">
<li class="con1"><img src="img/con1.png"/></li>
<li class="con2"><img src="img/con2.png"/></li>
<li class="con3"><img src="img/con3.png"/></li>
</ul>
<div class="pav"></div>
<!--进度条-->
<div class="bar">
<span></span>
</div>
</div>
</div>
</body>
</html>
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现轮播图源码
本文实例为大家分享了jQuery实现轮播图展示的具体代码,供大家参考,具体内容如下 设计: 根据上图可以看出,轮播图需要以下元素:外面的盒子div.放置图片集合的盒子ul.放置两侧按钮的盒子div.下侧顺序按钮div 源代码如下: 一.html源码如下: <div class="outer"> <ul class="img"> <li><a><img src="../static/img/1.jpg&q
-
利用jquery写的左右轮播图特效
最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的 将jquery框架的链接跟图片替换就可以看到效果了 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
-
jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(
-
jQuery实现轮播图及其原理详解
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalabl
-
jquery实现左右无缝轮播图
本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下 <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{p
-
jQuery自适应轮播图插件Swiper用法示例
本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
-
jquery实现左右滑动式轮播图
本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"><
-
jQuery实现简单的轮播图
使用jQuery实现轮播图,废话不多说,直接上代码了. HTML部分 其中,图片和路径是我电脑中的,你需要自己准备好图片,然后写你自己图片的路径. <div class="slider"> <ul> <li><a href="#" ><img src="images/1.jpg" alt=""></a></li> <li><a
-
jquery 实现轮播图详解及实例代码
轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea
-
jquery实现左右轮播图效果
我们经常看到购物网站上首页有轮播图,比如某东某京 如图我们打开网页就看到京东的轮播图 接下来,这个小案例就是要介绍如何实现这种效果,即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片会随着左右的点击移动) 2**重点内容.还有位于中间的小圆点(点击小圆点会跳转到那个图片) 3重点内容**轮播图会自己向左滑动(里面有一个定时器自动播放) 分析完之后就是我们写代码(这个是仿京东的轮播图) HTML的内容 代码片 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多