Jquery代碼實(shí)現(xiàn)圖片輪播效果（一）
更新時(shí)間：2015年08月12日 14:58:02 作者：qq791967024
經(jīng)理交給我一個(gè)網(wǎng)站新聞資訊網(wǎng)頁開發(fā)的活兒，對(duì)于我這樣的java程序員，沒有接觸過網(wǎng)頁設(shè)計(jì)這么高端的東東，該怎么搞呢，去度娘那搜索到不少結(jié)果，而且很大部分都是用jquery做的，于是根據(jù)自己的一些的理解，提供了這篇jquery輪播效果的講解，有需要的朋友可以來參考下
文章寫的不好，還請(qǐng)各位高手指教，不廢話了，先上張效果圖吧看下：
首先是初始化部分：將除了第一張輪播圖片意外的圖片都隱藏，并且隱藏向前、向后按鈕，使第一個(gè)索引按鈕處于激活狀態(tài)。
事件部分：通過jquery的hover()綁定鼠標(biāo)上懸以及離開時(shí)的事件處理， jquery的bind()方法綁定鼠標(biāo)點(diǎn)擊事件處理向前、向后翻動(dòng)、輪播控制：pre(), next(), play(), start()開始自動(dòng)輪播，stop()停止自動(dòng)輪播。
下篇是一個(gè)純粹的jquery輪播插件， 該插件可以定制各種效果，方便的配置以及可擴(kuò)展。
下面是整體的代碼：
index.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery輪播效果圖 </title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
border: none;
}
.slider-extra {
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #3e3e3e;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
.slider-page a{
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color: #fff;
text-align: center;
display: block;
font-family: "simsun";
font-size: 22px;
width: 28px;
height: 62px;
line-height: 62px;
margin-top: -31px;
position: absolute;
top: 50%;
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
left: 100%;
margin-left: -28px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已經(jīng)開始輪播
t = 3000; //輪播時(shí)間間隔
length = $('.slider-panel').length;
//將除了第一張圖片隱藏
$('.slider-panel:not(:first)').hide();
//將第一個(gè)slider-item設(shè)為激活狀態(tài)
$('.slider-item:first').addClass('slider-item-selected');
//隱藏向前、向后翻按鈕
$('.slider-page').hide();
//鼠標(biāo)上懸時(shí)顯示向前、向后翻按鈕,停止滑動(dòng)，鼠標(biāo)離開時(shí)隱藏向前、向后翻按鈕，開始滑動(dòng)
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
/**
* 向前翻頁
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻頁
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 從preIndex頁翻到currentIndex頁
* preIndex 整數(shù)，翻頁的起始頁
* currentIndex 整數(shù)，翻到的那頁
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
* 開始輪播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止輪播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}
//開始輪播
start();
});
</script>
</head>
<body>
<div class="slider">
<ul class="slider-main">
<li class="slider-panel">
<a href="http://m.fzitv.net" target="_blank"><img alt="關(guān)注腳本之家" title="關(guān)注腳本之家" src="images/1.jpg"></a>
</li>
<li class="slider-panel">
<a href="http://m.fzitv.net" target="_blank"><img alt="關(guān)注腳本之家" title="關(guān)注腳本之家" src="images/2.jpg"></a>
</li>
<li class="slider-panel">
<a href="http://m.fzitv.net" target="_blank"><img alt="關(guān)注腳本之家" title="關(guān)注腳本之家" src="images/3.jpg"></a>
</li>
<li class="slider-panel">
<a href="http://m.fzitv.net" target="_blank"><img alt="關(guān)注腳本之家" title="關(guān)注腳本之家" src="images/4.jpg"></a>
</li>
</ul>
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="javascript:;;"><</a>
<a class="slider-next" href="javascript:;;">></a>
</div>
</div>
</div>
</body>
</html>
至此一個(gè)簡(jiǎn)單的jquery輪播效果就完成了，當(dāng)然還有很多需要改進(jìn)的地方。
您可能感興趣的文章:
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- 原生js和jquery實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播的具體實(shí)現(xiàn)
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效
- 原生js和jquery實(shí)現(xiàn)圖片輪播淡入淡出效果
- jquery 實(shí)現(xiàn)輪播圖詳解及實(shí)例代碼
- 利用jquery寫的左右輪播圖特效
- jQuery實(shí)現(xiàn)碎片輪播效果
- jQuery實(shí)現(xiàn)炸裂輪播效果
相關(guān)文章
詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動(dòng)換行
這篇文章主要介紹了微信小程序canvas繪制文字實(shí)現(xiàn)自動(dòng)換行，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了ES6生成器用法,結(jié)合實(shí)例形式分析了ECMAScript6中生成器的概念、語法、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
JS如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素綁定事件
這篇文章主要介紹了JS如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素綁定事件,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
JavaScript常見事件對(duì)象與操作實(shí)例總結(jié)
這篇文章主要介紹了JavaScript常見事件對(duì)象與操作,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)DOM、IE及跨瀏覽器事件對(duì)象的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Javascript中獲取出錯(cuò)代碼所在文件及行數(shù)的代碼
之前在做一個(gè)Javascript的日志控制臺(tái)功能模塊，希望能夠在Javascript代碼出錯(cuò)時(shí)捕獲此錯(cuò)誤，并將出錯(cuò)的文件及相應(yīng)的行數(shù)打印到控制臺(tái)并匯報(bào)給服務(wù)器。2010-09-09
javascript:FF/Chrome與IE動(dòng)態(tài)加載元素的區(qū)別說明
今天在寫一段js時(shí)，發(fā)現(xiàn)IE與FF在動(dòng)態(tài)加載Html元素時(shí)，有一些差別，一起過來看看下面的代碼吧2014-01-01
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實(shí)例形式分析了javascript寄生組合式繼承的原理、定義與簡(jiǎn)單使用方法,需要的朋友可以參考下2019-01-01
詳解微信小程序用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要介紹了微信小程序用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
request請(qǐng)求獲取參數(shù)的實(shí)現(xiàn)方法(post和get兩種方式)
下面小編就為大家?guī)硪黄猺equest請(qǐng)求獲取參數(shù)的實(shí)現(xiàn)方法(post和get兩種方式)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了使用get方式提交表單在地址欄里面不顯示提交信息的相關(guān)資料,需要的朋友可以參考下2017-02-02