<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淡入淡出輪播圖</title>
<style>
ul{
list-style: none;
}
img{
width:100%;
height:500px;
}
.contain{
position:relative;
width:100%;
height:500px;
margin:0 auto;
}
.box ul li{
position: absolute;
width:100%;
height:100%;
display:none;
}
.box ul li:first-child{
display: block;
}
.btn a{
position:absolute;
width:30px;
height:50px;
background: red;
line-height: 50px;
text-align: center;
text-decoration: none;
color:#fff;
font-size:26px;
font-family:consolas;
top:50%;
margin-top:-25px;
}
#btnleft{
left:10px;
}
#btnright{
right:10px;
}
.circle{
position:absolute;
left:50%;
bottom:20px;
margin-left:-50px;
}
.circle ul li{
float:left;
width:15px;
height:15px;
border-radius:15px;
background:red;
margin:0 3px;
}
.circle .cur{
background:yellow;
}
</style>
</head>
<body>
<div class="contain">
<!--放圖片-->
<div class="box">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
</div>
<!--左右按鈕-->
<div class="btn">
<a href="javascript:;" id="btnleft"><</a>
<a href="javascript:;" id="btnright">></a>
</div>
<!--小圓點-->
<!--注意小圓點length要與圖片length相等-->
<div class="circle">
<ul>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//獲取變量
var $imgs = $(".box ul li");
var $btnleft = $("#btnleft");
var $btnright = $("#btnright");
var $cirst = $(".circle ul li");
var $contain = $(".contain");
//創建定時器
var timer = setInterval(change,2000);
//鼠標移入清楚定時器
$contain.mouseenter(function(){
clearInterval(timer);
});
//鼠標移出
$contain.mouseleave(function(){
//先清楚定時器
clearInterval(timer);
//再開定時器
timer = setInterval(change,2000);
});
//定義一個函數
function change(){
//防止動畫重複（防流氓動畫）
if($imgs.is(":animated")){
return;
}
//點擊又按鈕當前圖片淡出消失
$imgs.eq(index).fadeOut(600);
//信號量++
index++;
//邊界判斷
if(index>length-1){
index=0;
}
//下一張圖片淡入顯示
$imgs.eq(index).fadeIn(600);
//當前小圓點變色
$cirst.eq(index).addClass("cur").siblings().removeClass("cur");
}
//獲取所有li的長度（個數）
var length = $imgs.length;
//定義信號量
var index = 0;
//右按鈕點擊事件
$btnright.click(change);
//左按鈕點擊事件
$btnleft.click(function(){
//防止動畫重複（防流氓動畫）
if($imgs.is(":animated")){
return;
}
//點擊做按鈕當前圖片淡出消失
$imgs.eq(index).fadeOut(600);
//信號量--
index--;
//邊界判斷
if(index<0){
index=length-1;
}
//上一張圖片淡入顯示
$imgs.eq(index).fadeIn(600);
//當前小圓點變色
$cirst.eq(index).addClass("cur").siblings().removeClass("cur");
});
//小圓點事件
$cirst.mouseenter(function(){
//當前圖片淡出消失
$imgs.eq(index).stop(true).fadeOut(600);
//重新獲取信號量
index = $(this).index();
//移入的對應圖片淡入顯示
$imgs.eq(index).stop(true).fadeIn(600);
//小圓點對應變色
$(this).addClass("cur").siblings().removeClass("cur");
});
</script>
</body>
</html>
jQuery實現淡入淡出效果輪播圖
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
標籤點擊事件後的操作
其實，也不知道怎麼去給文章命名，就簡單的記錄下我遇到的問題吧，不多說，上代碼。 <a id="tab1" href="https://www.baidu.com">測試連接</a> <br/>