快捷導(dǎo)航

Jquery實(shí)現(xiàn)簡(jiǎn)單的輪播效果(代碼管用)

更新時(shí)間：2016年03月14日 09:19:15 作者：super_walker

這篇文章主要介紹了Jquery實(shí)現(xiàn)簡(jiǎn)單的輪播效果(代碼管用) 的相關(guān)資料,需要的朋友可以參考下

廢話不多說(shuō)了，直接給大家貼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;
}
/***********左邊小圖標(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ì)大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

jQuery的三種$()
$號(hào)是jQuery“類”的一個(gè)別稱，$()構(gòu)造了一個(gè)jQuery對(duì)象。所以，“$()”可以叫做jQuery的構(gòu)造函數(shù)（個(gè)人觀點(diǎn)，呵呵！）。
2009-12-12
JQuery實(shí)現(xiàn)Table的tr上移下移功能
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)Table的tr上移下移功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
jQuery手風(fēng)琴的簡(jiǎn)單制作
這篇文章主要為大家詳細(xì)介紹了jQuery手風(fēng)琴的簡(jiǎn)單制作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
淺談jquery中ajax跨域提交的時(shí)候會(huì)有2次請(qǐng)求的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談jquery中ajax跨域提交的時(shí)候會(huì)有2次請(qǐng)求的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
此jQuery插件為Ajax分頁(yè)插件，一次性加載，故分頁(yè)切換時(shí)無(wú)刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因?yàn)榧虞d會(huì)比較慢,接下來(lái)詳細(xì)介紹使用方法，感興趣的朋友可以了解下
2013-01-01
jquery.messager.js插件導(dǎo)致頁(yè)面抖動(dòng)的解決方法
這盤文章介紹了jquery.messager.js插件導(dǎo)致頁(yè)面抖動(dòng)的解決方法，有需要的朋友可以參考一下
2013-07-07
jQuery實(shí)現(xiàn)手機(jī)號(hào)正則驗(yàn)證輸入及自動(dòng)填充空格功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)手機(jī)號(hào)正則驗(yàn)證輸入及自動(dòng)填充空格功能,涉及jQuery事件響應(yīng)、字符串遍歷及正則判斷等相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
jQuery 跨域訪問(wèn)問(wèn)題解決方法
瀏覽器端跨域訪問(wèn)一直是個(gè)問(wèn)題, 多數(shù)研發(fā)人員對(duì)待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時(shí)候,時(shí)不時(shí)地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級(jí)域名跨域訪問(wèn)的問(wèn)題.
2009-12-12
jQuery 插件仿百度搜索框智能提示(帶Value值)
因公司需要做一個(gè)仿百度搜索框,并且?guī)alue值的, 網(wǎng)上找了下只有Text, 都沒(méi)帶Value的所以做了個(gè),代碼給予簡(jiǎn)單的注釋，結(jié)構(gòu)很清晰，很容易看懂，感興趣的朋友可以了解下
2013-01-01
JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
這篇文章主要介紹了JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié),本文總結(jié)了控制style、控制CSS、JQuery自帶方法等幾種顯示、隱藏div的方法,需要的朋友可以參考下
2015-04-04