13518219792
这种简单的幻灯片是使用索引匹配的。一个思路如下：
创新互联公司拥有十多年的建站服务经验，在此期间，我们发现较多的客户在挑选建站服务商前都非常的犹豫。主要问题集中：在无法预知自己的网站呈现的效果是什么样的？也无法判断选择的服务商设计出来的网页效果自己是否会满意？创新互联公司业务涵盖了互联网平台网站建设、移动平台网站制作、网络推广、按需求定制制作等服务。创新互联公司网站开发公司本着不拘一格的网站视觉设计和网站开发技术相结合，为企业做网站提供成熟的网站设计方案。
写一个函数，这个函数可以实现图片的切换；
function flipSlide(int){
//横向滑动
$('#slideContent .sc_wrap:first').animate({'left' : '-'+ int*960 +'px'});
//纵向滑动
$('#slideContent .sc_wrap:first').animate({'top' : '-'+ int*200 +'px'});
}
然后，大致有3种切换方法，分别是：左右控制（上一个下一个），指示控制（1，2，3，4）和自动播放；
左右控制比较简单，点击按钮+1-1即可。
var startInt = 0;//默认显示第一个
//上翻
$('#prev').click(function(){
//上一个，就是当前元素的上一个元素,要做判断的不会有-1的索引。
startInt = startInt-1;
//调用切换函数
flipSlide(startInt );
})
指示控制更简单，直接适应其index索引即可。
$('#slideNav ul li').click(function(){
//获取当前的索引
var thisId = $(this).index();
//执行播放函数
flipSlide(thisId );
})
自动播放需要写一个自动播放函数，然后调用，比如：
function autoPlay(){
if(startInt = 幻灯片个数){
startInt = 0;
}else{
startInt = startInt + 1;
}
//执行播放函数
flipSlide(thisId );
}
//定时播放,3秒切换
setInterval(autoPlay,3000);
这样，一个简单的幻灯片就写好了。
如果你希望它更智能，那么你就需要多下点功夫了。其实，道理都是一样的，只不过做成什么样的效果更好看而已。这个效果和滑动门tab是一样的原理。
对于一位合格的前端开发人员来说，首页图片轮播可谓是必会的基本功。那么我们聊一聊如何用jquery封装自己的轮播插件。
首先必须要聊到的jquery为我们提供的两大扩展方法，$.fn和$.extend(),$.extend相当于为jQuery类（注意，JavaScript并没有类，我们只是以类来理解这种做法）添加静态方法，
$.fn其实就是jQuery.prototype，原型，对于新手比较难解的概念，可以简单的理解为，我更改了印章，印章印出来的每个印记都会受到印章的影响，可谓釜底抽薪，JavaScript原型链相对较为复杂，JavaScript的继承特性便是基于原型实现的，在编写大规模的JavaScript代码的时候，以面向对象的方式编写才会显得有价值，我们在此不赘述。
好了，我们有了上述的知识储备，我们开始编写轮播插件。
[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代码的结构，需要一个向左，一个向右按钮和对应轮播图片数目的icon按钮，建议大家用a标签设置图片的容器，比较好操作。
CSS我就不贴了，之后我会将其上传。
最重要的是JavaScript代码:
[javascript] view plain copy
(function($) {
$.fn.slider = function(options) {
//this指向当前的选择器
var config = {
index: 0,
timer: null,
speed: 3000,
min: 0.3, //和css中的样式对应
max: 1
};
var opts = $.extend(config, options);
//核心方法，把当前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();
});
//每个icon分配事件
$(this).find(".slider_icon").on("click", "span", function() {
var index = $(this).index();
opts.index = index;
core();
});
//定时器
var start = function() {
opts.timer = setInterval(function() {
++opts.index;
core();
}, opts.speed);
}
$(this).hover(function() {
clearInterval(opts.timer);
}, function() {
start();
});
start();
}
}(jQuery));
1:core方法，其实图片轮播的本质就是把当前索引的图片显示，导航icon高亮，其余的隐藏，我做的是淡入淡出。
2：向左，向右，导航其实无非就是index的改变，jquery提供了一个index()方法，可以获得所有匹配元素中当前元素的索引，从0开始。
3：定时器，要实现图片的自动导航，无非就是每隔一定的时间，index+1。另外，当鼠标放入的时候，要清楚定时器，当输入移出的时候，再开启定时器。
!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的最后一个子元素添加到开头第一个
$(".gameTab ul").css('marginLeft','-220px'); //初始化把ul的marginleft左移220
$(".gameTab ul").animate({marginLeft:"0px"},300);
})
// 自动轮播
var timer = setInterval(moveLeft,3000)
//hover时停掉定时器
$('.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 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 --
script src="js/jquery.easings.min.js"/script
!-- 如果 scrollOverflow 设置为 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
每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：
div class="section active"第三屏/div
同时，可以在 section 内加入 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
调用的JavaScript代码如下：
$(function(){
$('#dowebok').fullpage();
});
配置项如下图所示：
方法，如下图所示：
回调函数，如下图所示：
7
运行效果如下图所示：
