<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/baner.js"></script>
</head>
<body>
<div class="main">
<a href=""><img src="img/baner-1.jpg" alt=""></a>
<a href=""><img src="img/baner-2.jpg" alt=""></a>
<a href=""><img src="img/baner-3.jpg" alt=""></a>
<a href=""><img src="img/baner-4.jpg" alt=""></a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html> 
/*************初始化************/
*{margin:0;padding: 0;border: none;list-style: none}
/*********輪播左右居中*************/
.main{
width: 1024px;
height: 320px;
margin: 0 auto;
position: relative;
}
.main a{
position: absolute;
}
.main a img{
width: 100%;
height: 320px;
}
/***********左邊小圖標(biāo)************/
.main ul li.selected{
background: #f97157;
}
.main ul{
position: absolute;
z-index: 999;
top: 120px;
left: 20px;
}
.main ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background: #909090;
cursor: pointer;
text-align: center;
} 
/**
* Created by Administrator on 16-3-12.
*/
/***********定義全局變量和定時(shí)器*************/
var t=null;
var n=0;/**動(dòng)態(tài)變化**/
var count;
/************************/
$(function(){
count=$(".main a").length;/*給動(dòng)態(tài)變化的n備用*/
/**讓不是輪播中的第一個(gè)隱藏**/
$(".main a:not(:first-child)").hide();
/*點(diǎn)擊當(dāng)前l(fā)i當(dāng)前l(fā)i對(duì)應(yīng)的圖片顯示出來(lái)*/
$(".main ul li").click(function(){
var index=$(this).text()-1;
n=index;
console.log(n);
/*****讓當(dāng)前顯示的圖片0.5S內(nèi)漸隱，并匹配下一個(gè)漸顯示*****/
$(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000);
/*******聚焦，給當(dāng)前l(fā)i追加類，改變背景色*******/
$(this).addClass("selected");
/****同時(shí)移除當(dāng)前l(fā)i的所有兄弟的類名為selected，還原背景色*****/
$(this).siblings().removeClass("selected");
});
/***定義定時(shí)器3秒執(zhí)行一次****/
t=setInterval("autoMove()",3000);
/****當(dāng)鼠標(biāo)進(jìn)入時(shí)候定時(shí)器停止，移除時(shí)候定時(shí)器開(kāi)啟****/
$(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});
});
/***定義自動(dòng)輪播函數(shù)****/
function autoMove(){
if(n>=(count-1)){
n=0;
}else{
++n;
}
/*****給li執(zhí)行匹配的事件*****/
$(".main ul li").eq(n).trigger("click");
}

以上所述是小編給大家介紹的Jquery實(shí)現(xiàn)簡(jiǎn)單的輪播效果，希望對(duì)大家有所幫助！

您可能感興趣的文章: