下面小編就為大家帶來一篇Jquery實現的簡單輪播效果【附實例】。小編覺得挺不錯的，現在分享給大家，也給大家做個參考
Jquery實現的簡單輪播效果【附實例】
<!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;
}
/***********左邊小圖標************/
.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.
*/
/***********定義全局變量和定時器*************/
var t=null;
var n=0;/**動態變化**/
var count;
/************************/
$(function(){
count=$(".main a").length;/*給動態變化的n備用*/
/**讓不是輪播中的第一個隱藏**/
$(".main a:not(:first-child)").hide();
/*點擊當前li當前li對應的圖片顯示出來*/
$(".main ul li").click(function(){
var index=$(this).text()-1;
n=index;
console.log(n);
/*****讓當前顯示的圖片0.5S內漸隱，并匹配下一個漸顯示*****/
$(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000);
/*******聚焦，給當前li追加類，改變背景色*******/
$(this).addClass("selected");
/****同時移除當前li的所有兄弟的類名為selected，還原背景色*****/
$(this).siblings().removeClass("selected");
});
/***定義定時器3秒執行一次****/
t=setInterval("autoMove()",3000);
/****當鼠標進入時候定時器停止，移除時候定時器開啟****/
$(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});
});
/***定義自動輪播函數****/
function autoMove(){
if(n>=(count-1)){
n=0;
}else{
++n;
}
/*****給li執行匹配的事件*****/
$(".main ul li").eq(n).trigger("click");
}
以上這篇Jquery實現的簡單輪播效果【附實例】就是小編分享給大家的全部內容了，希望能給大家一個參考
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
