本篇内容主要讲解“jQuery怎么实现加载轮播图”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jQuery怎么实现加载轮播图”吧!
成都创新互联主要从事成都网站制作、成都网站设计、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务泗阳,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
引言
关于幻灯轮播图，想必大家都不陌生，尤其是基于 jQuery 的，插件、代码网上一搜一大堆，但是真正符合自己需求的几乎没有，所以我要打造一个符合自身需求，经得起广大网民考验的 jQuery 轮播图！
思路
为什么说网上其他一些轮播图不符合我的要求？我的需求又是什么呢？
现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是，先把图片和链接的 HTML 写好，然后控制隐藏和显示来轮流展示当前的幻灯图片。但是对用户而言，我们始终只是看到当前的一张图片，那其他几张隐藏的图片为什么要事先加载进来呢？这不是费时费力吗？所以我的第一个需求是按需加载。
我们一般会把轮播图放在首页展示，但是首页的重点内容应该是最近更新的文章，至少我不认为图片展示功能需要被搜索引擎收录，所以我的第二个需求是符合 SEO。
实现
冲着以上两个需求，我做了一个 DEMO ，大家不妨看看这个 DEMO 的源代码，发现区别了吗？是的，在这个 DEMO 的 HTML 源代码中，你看不到任何的图片和相关信息，都由 JS 载入进来的，也就是说爬虫爬不到，而且是随着图片的切换，一张一张地载入当前的幻灯图片。
这里我就只分享一下我的 JS 写法，HTML 什么就请各位看源码吧，代码我就不一一细说了，注释也都写得很明白了。
$(function() {
var WangeSlide = (function() {
//配置
var config = {
//轮播图尺寸
width : 960,
height : 350,
//是否自动切换
autoSwitch : true,
//自动切换间隔时间（毫秒）
interval : 6000,
//轮播图图片路径
picPath : 'http://www.dowebok.com/demo/2014/93/img/',
//轮播图图片信息：图片文件名 / 图片标题 / 图片指向链接
picInfo : [
['fullimage1.jpg', '图片1提示','http://codepen.io/webstermobile/'],
['fullimage1.jpg', '图片2提示','http://codepen.io/webstermobile/'],
['fullimage1.jpg', '图片3提示','http://codepen.io/webstermobile/']
]
};
//获取图片信息
/**
* @param index 图片所在的索引值
**/
var getImgInfo = function(index) {
var imgSrc = config.picPath + config.picInfo[index][0],
imgAlt = config.picInfo[index][3],
imgUrl = config.picInfo[index][4],
imgId = 'slide_' + (index+1).toString(),
imgHtml = '' +
' ' +
' ' +
' ' +
'',
slideTextHtml = '' + imgAlt+ '';
return {
imgAlt : imgAlt,
imgUrl : imgUrl,
imgHtml : imgHtml,
slideTextHtml : slideTextHtml
}
};
//图片完全加载后缓慢加载显示
var fadeInImg = function(el, speed) {
//console.log(el)
el.find("img").load(function() {
el.find("img").addClass("loaded")
el.fadeIn(speed)
});
};
//图片切换
/**
* @param index 图片所在的索引值
* @param triggerCurEl 当前触发节点元素
**/
var imgSwitch = function(index, triggerCurEl) {
var slideId = 'slide_' + (index+1).toString(),
slideIdEl = document.getElementById(slideId);
if (slideIdEl) {
//如果已有对应的元素，则显示已有元素
var panelLi = $('#panel ul li');
panelLi.hide();
$(slideIdEl).fadeIn('slow');
} else {
//如果还没有对应的元素，则注入元素
$(getImgInfo(index).imgHtml).appendTo($('#panel ul'));
var panelLi = $('#panel ul li');
panelLi.hide();
//载入显示图片
fadeInImg($("#" +slideId), 'slow');
}
//获取图片的 alt 作为显示信息
$('#slide_text').html(getImgInfo(index).slideTextHtml);
//当前状态 cur
$('#trigger ul li').removeClass('cur');
triggerCurEl.addClass('cur');
};
//轮播图
var slide = function() {
//设置轮播图尺寸
$('#panel').css({
'width' : config.width + 'px',
'height' : config.height + 'px'
});
var result = getImgInfo(0).imgHtml
//初使化轮播图，只加载第一张图片信息
$('#panel ul').html($(result));
//载入显示图片
fadeInImg($('#slide_1'), 500);
//注入背景层 + 触发器容器 + 轮播图文字容器
var slideBg = ' 