這種簡(jiǎn)單的幻燈片是使用索引匹配的。一個(gè)思路如下：
創(chuàng)新互聯(lián)公司擁有十多年的建站服務(wù)經(jīng)驗(yàn)，在此期間，我們發(fā)現(xiàn)較多的客戶在挑選建站服務(wù)商前都非常的猶豫。主要問題集中：在無法預(yù)知自己的網(wǎng)站呈現(xiàn)的效果是什么樣的？也無法判斷選擇的服務(wù)商設(shè)計(jì)出來的網(wǎng)頁(yè)效果自己是否會(huì)滿意？創(chuàng)新互聯(lián)公司業(yè)務(wù)涵蓋了互聯(lián)網(wǎng)平臺(tái)網(wǎng)站建設(shè)、移動(dòng)平臺(tái)網(wǎng)站制作、網(wǎng)絡(luò)推廣、按需求定制制作等服務(wù)。創(chuàng)新互聯(lián)公司網(wǎng)站開發(fā)公司本著不拘一格的網(wǎng)站視覺設(shè)計(jì)和網(wǎng)站開發(fā)技術(shù)相結(jié)合，為企業(yè)做網(wǎng)站提供成熟的網(wǎng)站設(shè)計(jì)方案。
寫一個(gè)函數(shù)，這個(gè)函數(shù)可以實(shí)現(xiàn)圖片的切換；
function?flipSlide(int){
//橫向滑動(dòng)
$('#slideContent?.sc_wrap:first').animate({'left'?:?'-'+?int*960?+'px'});
//縱向滑動(dòng)
$('#slideContent?.sc_wrap:first').animate({'top'?:?'-'+?int*200?+'px'});
}
然后，大致有3種切換方法，分別是：左右控制（上一個(gè)下一個(gè)），指示控制（1，2，3，4）和自動(dòng)播放；
左右控制比較簡(jiǎn)單，點(diǎn)擊按鈕+1-1即可。
var?startInt?=?0;//默認(rèn)顯示第一個(gè)
//上翻
$('#prev').click(function(){
//上一個(gè)，就是當(dāng)前元素的上一個(gè)元素,要做判斷的不會(huì)有-1的索引。
startInt?=?startInt-1;
//調(diào)用切換函數(shù)
flipSlide(startInt?);
})
指示控制更簡(jiǎn)單，直接適應(yīng)其index索引即可。
$('#slideNav?ul?li').click(function(){
//獲取當(dāng)前的索引
var?thisId?=?$(this).index();
//執(zhí)行播放函數(shù)
flipSlide(thisId?);
})
自動(dòng)播放需要寫一個(gè)自動(dòng)播放函數(shù)，然后調(diào)用，比如：
function?autoPlay(){
if(startInt?=?幻燈片個(gè)數(shù)){
startInt?=?0;
}else{
startInt?=?startInt?+?1;
}
//執(zhí)行播放函數(shù)
flipSlide(thisId?);
}
//定時(shí)播放,3秒切換
setInterval(autoPlay,3000);
這樣，一個(gè)簡(jiǎn)單的幻燈片就寫好了。
如果你希望它更智能，那么你就需要多下點(diǎn)功夫了。其實(shí)，道理都是一樣的，只不過做成什么樣的效果更好看而已。這個(gè)效果和滑動(dòng)門tab是一樣的原理。
對(duì)于一位合格的前端開發(fā)人員來說，首頁(yè)圖片輪播可謂是必會(huì)的基本功。那么我們聊一聊如何用jquery封裝自己的輪播插件。
首先必須要聊到的jquery為我們提供的兩大擴(kuò)展方法，$.fn和$.extend(),$.extend相當(dāng)于為jQuery類（注意，JavaScript并沒有類，我們只是以類來理解這種做法）添加靜態(tài)方法，
$.fn其實(shí)就是jQuery.prototype，原型，對(duì)于新手比較難解的概念，可以簡(jiǎn)單的理解為，我更改了印章，印章印出來的每個(gè)印記都會(huì)受到印章的影響，可謂釜底抽薪，JavaScript原型鏈相對(duì)較為復(fù)雜，JavaScript的繼承特性便是基于原型實(shí)現(xiàn)的，在編寫大規(guī)模的JavaScript代碼的時(shí)候，以面向?qū)ο蟮姆绞骄帉懖艜?huì)顯得有價(jià)值，我們?cè)诖瞬毁樖觥?/p>
好了，我們有了上述的知識(shí)儲(chǔ)備，我們開始編寫輪播插件。
[html] view plain copy
!DOCTYPE html
html lang="en"
head
title/title
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1"
link href="main.css" rel="stylesheet"
script src="./js/jquery-1.10.2.min.js"/script
script src="./js/jquery.slider.js"/script
script src="./js/main.js"/script
/head
body
div class="slider"
div class="slider_img"
a class="slider-active" href="#" style="background: url(./img/nav1.jpg) 50% no-repeat; background-size: cover; opacity: 1;"/a
a href="#" style="background: url(./img/nav2.jpg) 50% no-repeat; background-size: cover;"/a
a href="#" style="background: url(./img/nav3.jpg) 50% no-repeat; background-size: cover;"/a
a href="#" style="background: url(./img/nav4.jpg) 50% no-repeat; background-size: cover;"/a
a href="#" style="background: url(./img/nav5.jpg) 50% no-repeat; background-size: cover;"/a
/div
span id="left" class="arrow-icon"/span
span id="right" class="arrow-icon"/span
div class="slider_icon"
span class="active"/span
span/span
span/span
span/span
span/span
/div
/div
/body
/html
這是HTML代碼的結(jié)構(gòu)，需要一個(gè)向左，一個(gè)向右按鈕和對(duì)應(yīng)輪播圖片數(shù)目的icon按鈕，建議大家用a標(biāo)簽設(shè)置圖片的容器，比較好操作。
CSS我就不貼了，之后我會(huì)將其上傳。
最重要的是JavaScript代碼:
[javascript] view plain copy
(function($) {
$.fn.slider = function(options) {
//this指向當(dāng)前的選擇器
var config = {
index: 0,
timer: null,
speed: 3000,
min: 0.3, //和css中的樣式對(duì)應(yīng)
max: 1
};
var opts = $.extend(config, options);
//核心方法，把當(dāng)前index的圖片和icon顯示，把除此之外的圖片和icon隱藏
var core = function() {
if (opts.index 4) {
opts.index = 0;
} else if (opts.index 0) {
opts.index = 4;
}
$(".slider_icon span").eq(opts.index).addClass("active").siblings("span").removeClass("active");
$(".slider_img a").eq(opts.index).css("display", "block").stop().animate({ "opacity": opts.max }, 1000).siblings("a").css({ "display": "none", "opacity": opts.min });
};
//左邊
$(this).find("#left").bind("click", function() {
--opts.index;
core();
});
//右邊
$(this).find("#right").bind("click", function() {
++opts.index;
core();
});
//每個(gè)icon分配事件
$(this).find(".slider_icon").on("click", "span", function() {
var index = $(this).index();
opts.index = index;
core();
});
//定時(shí)器
var start = function() {
opts.timer = setInterval(function() {
++opts.index;
core();
}, opts.speed);
}
$(this).hover(function() {
clearInterval(opts.timer);
}, function() {
start();
});
start();
}
}(jQuery));
1:core方法，其實(shí)圖片輪播的本質(zhì)就是把當(dāng)前索引的圖片顯示，導(dǎo)航icon高亮，其余的隱藏，我做的是淡入淡出。
2：向左，向右，導(dǎo)航其實(shí)無非就是index的改變，jquery提供了一個(gè)index()方法，可以獲得所有匹配元素中當(dāng)前元素的索引，從0開始。
3：定時(shí)器，要實(shí)現(xiàn)圖片的自動(dòng)導(dǎo)航，無非就是每隔一定的時(shí)間，index+1。另外，當(dāng)鼠標(biāo)放入的時(shí)候，要清楚定時(shí)器，當(dāng)輸入移出的時(shí)候，再開啟定時(shí)器。
!doctype?html??
html??
head??
meta?charset="UTF-8"??
titleDocument/title??
style??
*{padding:?0;margin:?0;??}??
ul?li{list-style-type:?none}??
.gameTab{??width:?1100px;??height:?150px;??overflow:?hidden;??margin:?50px?auto;position:?relative;}??
.gameTab?ul{??width:?7680px;??overflow:?hidden;??}??
.gameTab?ulli{???width:?220px;???height:150px;?float:?left;text-align:?center;}??
.gameTab?ulli:hover{opacity:?0.5}?
.prev,.next{position:?absolute;top:?50%;transform:translate(0,-50%);padding:?5px;background:?red;z-index:?99;text-decoration:?none;color:?#fff;
}
.prev{left:?0;}
.next{right:?0;}
/style??
/head??
body??
div??
a?href="javascript:;"前一張/a
ul??
li?style="background:?#CB2929"1111/li??
li?style="background:?#23C048"2222/li??
li?style="background:?#00ABEA"3333/li??
li?style="background:?#FF9800"4444/li?
li?style="background:?#F96B36"5555/li?
li?style="background:?#ADADAD"6666/li???
/ul??
a?href="javascript:;"下一張/a
/div??
script?src=""/script
script??
$(function?()?{??
//下一張
function?moveLeft(){
$(".gameTab?ul").animate({marginLeft:"-220px"},300,?function?()?{??
$(".gameTab?ul").children().first().appendTo($(".gameTab?ul"));??
$(".gameTab?ul").css('marginLeft','0px');??
});??
}
$('.next').click(moveLeft);
//前一張
$('.prev').click(function?()?{?
$(".gameTab?ul").children().last().prependTo($(".gameTab?ul"));//把ul的最后一個(gè)子元素添加到開頭第一個(gè)
$(".gameTab?ul").css('marginLeft','-220px');??//初始化把ul的marginleft左移220
$(".gameTab?ul").animate({marginLeft:"0px"},300);??
})??
//?自動(dòng)輪播
var?timer?=?setInterval(moveLeft,3000)
//hover時(shí)停掉定時(shí)器
$('.gameTab').mouseenter(function(){
clearTimeout(timer)
})
$('.gameTab').mouseleave(function(){
timer=setInterval(moveLeft,3000)
})
})
/script??
/body??
/html
!DOCTYPE?HTML
html
head
titleyugi/title
meta?charset=UTF-8?/
style?type="text/css"
#pic?{
width:?410px;
height:?200px;
margin:?0?auto;
margin-top:?150px;
}
#pic?#po?{
width:?370px;
overflow:?hidden;
height:?170px;
left:?20px;;
top:?10;
position:?relative;
}
#pic?#pol?{
width:?2370px;
height:?165px;
position:?absolute;
}
#pic?#num?{
width:?120px;
height:?25px;
position:?absolute;
z-index:?2;
left:?247px;
top:?140px;
}
#pic?#num?span?{
width:?10px;
margin-left:?10px;
cursor:?pointer;
font-size:?12px;
height:?20px;
float:?left;
color:?#000000;
text-align:?center;
}
#pic?#num?span.cut?{
background:?#000000;
color:?#FFFFFF;
}
img?{
width:?370px;
height:?165px;
float:?left
}
/style
script?type="text/javascript"?src="jquery-1.8.0.min.js"/script
script?type="text/javascript"
jQuery?(function?($)
{
var?CRT?=?0;
var?w?=?$?("img").width?(),?pol?=?$("#pol"),?spans?=?$?("#num?span");
spans.hover?(function?()
{
var?me?=?$?(this);
me.addClass?("cut").siblings?(".cut").removeClass?("cut");
spans.eq(CRT).clearQueue();
pol.stop?().animate?(
{
left?:?"-"?+?w?*?(CRT?=?me.index?())?+?"px"
},?"slow");
},?function()
{
anony();
});
var?anony?=?function?()
{
CRT++;
CRT?=?CRT??spans.length?-?1???0?:?CRT;
spans.eq(CRT).clearQueue().delay(1000).queue?(function()
{
spans.eq(CRT).triggerHandler?("mouseover");
anony();
});
};
anony();
});
/script
/head
body
div?id="pic"
div?id="po"
div?id="pol"
img?src="../../圖片/素材/738b4710b912c8fcbb648ccdfe039245d688211e.jpg"?/?
img?src="../../圖片/素材/9f510fb30f2442a76c08f9a4d343ad4bd11302a8.jpg"?/?
img?src="../../圖片/素材/fd039245d688d43f76f37f527e1ed21b0ef43b3c.jpg"?/?
img?src="../../圖片/素材/11385343fbf2b21154e02b29c88065380dd78e8f.jpg"?/?
img?src="../../圖片/素材/a08b87d6277f9e2f7dd1b36f1d30e924b999f3f5.jpg"?/
/div
div?id="num"
span?class="cut"?1/span?
span2/span?
span3/span?
span4/span?
span5/span
/div
/div
/div
/body
/html
引入文件：
link rel="stylesheet" href="css/jquery.fullPage.css"
script src="js/jquery.min.js"/script
!-- jquery.easings.min.js 用于 easing 參數(shù)，也可以使用完整的 jQuery UI 代替，如果不需要設(shè)置 easing 參數(shù)，可去掉改文件 --
script src="js/jquery.easings.min.js"/script
!-- 如果 scrollOverflow 設(shè)置為 true，則需要引入 jquery.slimscroll.min.js，一般情況下不需要 --
script src="js/jquery.slimscroll.min.js"/script
script src="js/jquery.fullPage.js"/script
div id="dowebok"
div class="section"
h3第一屏/h3
/div
div class="section"
h3第二屏/h3
/div
div class="section"
h3第三屏/h3
/div
div class="section"
h3第四屏/h3
/div
/div
每個(gè) section 代表一屏，默認(rèn)顯示“第一屏”，如果要指定加載頁(yè)面時(shí)顯示的“屏幕”，可以在對(duì)應(yīng)的 section 加上 class=”active”，如：
div class="section active"第三屏/div
同時(shí)，可以在 section 內(nèi)加入 slide，如：
div id="dowebok"
div class="section"第一屏/div
div class="section"第二屏/div
div class="section"
div class="slide"第三屏的第一屏/div
div class="slide"第三屏的第二屏/div
div class="slide"第三屏的第三屏/div
div class="slide"第三屏的第四屏/div
/div
div class="section"第四屏/div
/div
調(diào)用的JavaScript代碼如下：
$(function(){
$('#dowebok').fullpage();
});
配置項(xiàng)如下圖所示：
方法，如下圖所示：
回調(diào)函數(shù)，如下圖所示：
7
運(yùn)行效果如下圖所示：
重慶分公司
重慶分公司
