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");
}

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com