您的位置：首页 > Web前端 > JQuery

jQuery实现图片轮播（淡入淡出效果）

2017-07-29 10:40 736 查看
实现思路：用一个容器把图片都放进去，容器的overflow为hidden，设一个定时器，每间隔一段时间就将其中一张图片的display设为block，其他的都为none。

话不多说，直接上代码

1.首先用html搭好基本框架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="wrapper">
<div id="banner">
<ul class="imgList">
<li><a href="#"><img src="img/01.jpg" /> </a></li>
<li><a href="#"><img src="img/02.jpg" /> </a></li>
<li><a href="#"><img src="img/03.jpg" /> </a></li>
<li><a href="#"><img src="img/04.jpg" /> </a></li>
<li><a href="#"><img src="img/05.jpg" /> </a></li>
</ul>
<span id="prev"><</span>
<span id="next">></span>
<ul class="infoList">
<li class="infoOn">1/5</li>
<li>2/5</li>
<li>3/5</li>
<li>4/5</li>
<li>5/5</li>
</ul>
</div>
<ul class="indexList">
<li class="active"><span class="indexOn">迪桑娜VIP大牌日</span></li>
<li><span>年终回馈日 会员特价权</span></li>
<li><span>盛夏潮鞋释出 最高满298减50</span></li>
<li><span>盛夏潮鞋释出 最高满298减50</span></li>
<li><span>手表配饰百货城 满298减60</span></li>
</ul>
</div>
</body>
</html>


2.来点样式

<style>
body,div,a,ul,li,img{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
#wrapper{
position: relative;
width:1024px;
height:580px;
margin:0 auto;
}
#banner{
position:relative;
width:1024px;
height:460px;
overflow: hidden;
}
.imgList{
position:relative;
width:1024px;
height:460px;
overflow: hidden;
z-index: 10;
}
.imgList li{
display:inline;
float: left;
-webkit-animation-name:fade;
-webkit-animation-duration: 2s;
animation-name:fade;
animation-duration: 2s;
}
/*给图片添加淡入淡出效果*/
@-webkit-keyframes fade{
from{
opacity: 0.;
}
to{
opacity: 1;
}
}
@keyframes fade{
from{
opacity: 0.5;
}
to{
opacity: 1;
}
}
#prev,#next{
position:absolute;
color:white;
font-size:70px;
width:55px;
height:65px;
background-color:black;
z-index: 20;
opacity: 0.2;
text-align: center;
line-height: 65px;
font-weight:bold;
cursor: pointer;
transition:opacity 1s;
-webkit-transition: opacity 1s;
display:none;
}
/*只有当鼠标放在图片容器里的时候，上一张，下一张按钮才出现*/
#banner:hover #prev{
display:block;
}
#banner:hover #next{
display:block;
}
#prev{
left:0;
top:200px;
-webkit-animation-name:leftIn;
-webkit-animation-duration: 1s;
animation-name:leftIn;
animation-duration: 1s;
}
/*给上一张按钮添加进入时动画*/
@-webkit-keyframes leftIn{
from{
left:-55px;
}
to{
left:0px;
}
}
@keyframes leftIn{
from{
left:-55px;
}
to{
left:0px;
}
}
#next{
right:0;
top:200px;
-webkit-animation-name:rightIn;
-webkit-animation-duration: 1s;
animation-name:rightIn;
animation-duration: 1s;
}
/*给下一张按钮添加进入时动画*/
@-webkit-keyframes rightIn{
from{
right:-55px;
}
to{
right:0px;
}
}
@keyframes rightIn{
from{
right:-55px;
}
to{
right:0px;
}
}
#prev:hover,#next:hover{
opacity: 0.7;
}
.infoList{
position:absolute;
top:15px;
left:15px;
font-size:18px;
color:white;
z-index:20;
}
.infoList li{
display:none;
}
.infoList .infoOn{
display:inline;
}
.indexList{
position: absolute;
margin-top:5px;
height:35px;
width:100%;
}
.indexList li{
display:inline;
text-align: center;
line-height:35px;
float:left;
cursor:pointer;
opacity: 0.8;
}
.indexList li span{
height:30px;
padding:0 11px;
line-height:30px;
border-left: solid 1px rgba(0,0,0,0.3);
}
.indexList li .indexOn{
border:none;
}
.indexList li:hover{
border-bottom: solid 4px deeppink;
opacity: 1;
}
.active{
border-bottom: solid 4px deeppink;
opacity: 1;
}
</style>


3.现在用jQuery来绑定事件了

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
$(document).ready(function(){
var curIndex=0;//定义一个全局变量，也就是图片的索引值
imgLen=$(".imgList li").length;//获取图片的张数
/*1.用定时器做一个自动播放函数，当图片索引值小于图片长度-1的时候，就让索引值自增，当它等于图片长度，也就是到最后一张图片的时候，让它为0，从第一张图片重新开始*/
var autoChange=setInterval(function(){
if(curIndex<imgLen-1){
curIndex++;
}
else{
curIndex=0;
}
changeTo(curIndex);
},3000);
/*2.给上一张按钮添加鼠标悬浮事件，当鼠标悬浮时，清除定时器，鼠标移开时，调用函数重新开始自动播放*/
$("#prev").hover(function(){
clearInterval(autoChange);
},function(){
autoChangeAgain();
});
/*3.给上一张按钮添加鼠标点击事件，当索引值>0的时候，就让它自减，否则也就是已经到第一张图片的时候让索引值为图片长度减1，也就是回到最后一张图片，再将索引值传给changeTo函数*/
$("#prev").click(function(){
curIndex=(curIndex>0)?(--curIndex):(imgLen-1);
changeTo(curIndex);
})
/*4.给下一张按钮添加鼠标悬浮事件*/
$("#next").hover(function(){
clearInterval(autoChange);
},function(){
autoChangeAgain();
});
/*5.给下一张按钮绑定鼠标点击事件*/
$("#next").click(function(){
curIndex=(curIndex<imgLen-1)?(++curIndex):0;
changeTo(curIndex);
})
/*6.给下面的文字列表绑定事件，当鼠标悬浮到某个li上面时清除定时器，移开又自动播放*/
$(".indexList").find("li").each(function(item) {
$(this).hover(function() {
clearInterval(autoChange);
changeTo(item);
curIndex = item;
}, function() {
autoChangeAgain();
});
});
/*7.定义一个重新自动播放函数*/
function autoChangeAgain(){
autoChange=setInterval(function(){
if(curIndex<imgLen-1){
curIndex++;
}
else{
curIndex=0;
}
changeTo(curIndex);
},3000);
};
/*8.定义一个切换图片的函数*/
function changeTo(num){
$(".imgList").find("li").css("display","none").eq(num).css("display","block");
$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
$(".indexList").find("li").removeClass("active").eq(num).addClass("active");
};
});
</script>




最后附上完整代码

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,div,a,ul,li,img{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
#wrapper{
position: relative;
width:1024px;
height:580px;
margin:0 auto;
}
#banner{
position:relative;
width:1024px;
height:460px;
overflow: hidden;
}
.imgList{
position:relative;
width:1024px;
height:460px;
overflow: hidden;
z-index: 10;
}
.imgList li{
display:inline;
float: left;
-webkit-animation-name:fade;
-webkit-animation-duration: 2s;
animation-name:fade;
animation-duration: 2s;
}
/*给图片添加淡入淡出效果*/
@-webkit-keyframes fade{
from{
opacity: 0.;
}
to{
opacity: 1;
}
}
@keyframes fade{
from{
opacity: 0.5;
}
to{
opacity: 1;
}
}
#prev,#next{
position:absolute;
color:white;
font-size:70px;
width:55px;
height:65px;
background-color:black;
z-index: 20;
opacity: 0.2;
text-align: center;
line-height: 65px;
font-weight:bold;
cursor: pointer;
transition:opacity 1s;
-webkit-transition: opacity 1s;
display:none;
}
/*只有当鼠标放在图片容器里的时候，上一张，下一张按钮才出现*/
#banner:hover #prev{
display:block;
}
#banner:hover #next{
display:block;
}
#prev{
left:0;
top:200px;
-webkit-animation-name:leftIn;
-webkit-animation-duration: 1s;
animation-name:leftIn;
animation-duration: 1s;
}
/*给上一张按钮添加进入时动画*/
@-webkit-keyframes leftIn{
from{
left:-55px;
}
to{
left:0px;
}
}
@keyframes leftIn{
from{
left:-55px;
}
to{
left:0px;
}
}
#next{
right:0;
top:200px;
-webkit-animation-name:rightIn;
-webkit-animation-duration: 1s;
animation-name:rightIn;
animation-duration: 1s;
}
/*给下一张按钮添加进入时动画*/
@-webkit-keyframes rightIn{
from{
right:-55px;
}
to{
right:0px;
}
}
@keyframes rightIn{
from{
right:-55px;
}
to{
right:0px;
}
}
#prev:hover,#next:hover{
opacity: 0.7;
}
.infoList{
position:absolute;
top:15px;
left:15px;
font-size:18px;
color:white;
z-index:20;
}
.infoList li{
display:none;
}
.infoList .infoOn{
display:inline;
}
.indexList{
position: absolute;
margin-top:5px;
height:35px;
width:100%;
}
.indexList li{
display:inline;
text-align: center;
line-height:35px;
float:left;
cursor:pointer;
opacity: 0.8;
}
.indexList li span{
height:30px;
padding:0 11px;
line-height:30px;
border-left: solid 1px rgba(0,0,0,0.3);
}
.indexList li .indexOn{
border:none;
}
.indexList li:hover{
border-bottom: solid 4px deeppink;
opacity: 1;
}
.active{
border-bottom: solid 4px deeppink;
opacity: 1;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
$(document).ready(function(){
var curIndex=0;//定义一个全局变量，也就是图片的索引值
imgLen=$(".imgList li").length;//获取图片的张数
/*1.用定时器做一个自动播放函数，当图片索引值小于图片长度-1的时候，就让索引值自增，当它等于图片长度，也就是到最后一张图片的时候，让它为0，从第一张图片重新开始*/
var autoChange=setInterval(function(){
if(curIndex<imgLen-1){
curIndex++;
}
else{
curIndex=0;
}
changeTo(curIndex);
},3000);
/*2.给上一张按钮添加鼠标悬浮事件，当鼠标悬浮时，清除定时器，鼠标移开时，调用函数重新开始自动播放*/
$("#prev").hover(function(){
clearInterval(autoChange);
},function(){
autoChangeAgain();
});
/*3.给上一张按钮添加鼠标点击事件，当索引值>0的时候，就让它自减，否则也就是已经到第一张图片的时候让索引值为图片长度减1，也就是回到最后一张图片，再将索引值传给changeTo函数*/
$("#prev").click(function(){
curIndex=(curIndex>0)?(--curIndex):(imgLen-1);
changeTo(curIndex);
})
/*4.给下一张按钮添加鼠标悬浮事件*/
$("#next").hover(function(){
clearInterval(autoChange);
},function(){
autoChangeAgain();
});
/*5.给下一张按钮绑定鼠标点击事件*/
$("#next").click(function(){
curIndex=(curIndex<imgLen-1)?(++curIndex):0;
changeTo(curIndex);
})
/*6.给下面的文字列表绑定事件，当鼠标悬浮到某个li上面时清除定时器，移开又自动播放*/
$(".indexList").find("li").each(function(item) {
$(this).hover(function() {
clearInterval(autoChange);
changeTo(item);
curIndex = item;
}, function() {
autoChangeAgain();
});
});
/*7.定义一个重新自动播放函数*/
function autoChangeAgain(){
autoChange=setInterval(function(){
if(curIndex<imgLen-1){
curIndex++;
}
else{
curIndex=0;
}
changeTo(curIndex);
},3000);
};
/*8.定义一个切换图片的函数*/
function changeTo(num){
$(".imgList").find("li").css("display","none").eq(num).css("display","block");
$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
$(".indexList").find("li").removeClass("active").eq(num).addClass("active");
};
});
</script>
</head>
<body>
<div id="wrapper">
<div id="banner">
<ul class="imgList">
<li><a href="#"><img src="img/01.jpg" /> </a></li>
<li><a href="#"><img src="img/02.jpg" /> </a></li>
<li><a href="#"><img src="img/03.jpg" /> </a></li>
<li><a href="#"><img src="img/04.jpg" /> </a></li>
<li><a href="#"><img src="img/05.jpg" /> </a></li>
</ul>
<span id="prev"><</span>
<span id="next">></span>
<ul class="infoList">
<li class="infoOn">1/5</li>
<li>2/5</li>
<li>3/5</li>
<li>4/5</li>
<li>5/5</li>
</ul>
</div>
<ul class="indexList">
<li class="active"><span class="indexOn">迪桑娜VIP大牌日</span></li>
<li><span>年终回馈日 会员特价权</span></li>
<li><span>盛夏潮鞋释出 最高满298减50</span></li>
<li><span>盛夏潮鞋释出 最高满298减50</span></li>
<li><span>手表配饰百货城 满298减60</span></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  图片轮播 jquery 淡入淡出
相关文章推荐
新的分享
章节导航