创建第一个 jQuery 幻灯片插件，从 Javascript 转换
Posted
技术标签:
【中文标题】创建第一个 jQuery 幻灯片插件，从 Javascript 转换【英文标题】：Creating first jQuery slideshow plugin, converting from Javascript 【发布时间】：2016-10-10 12:30:06 【问题描述】：我在询问一个带有图像、标题和描述 jQuery slide show 的 jQuery 插件。但是找不到这样的。因此尝试仅使用 javascript 构建一个非常小且简单的 [丑陋] 幻灯片。但也有一些缺点，因为在我的脚本中，我必须对图像、标题和描述进行硬编码。所以我想从头开始创建一个 jQuery 插件，它只做与脚本相同的工作，并且还在运行时构建幻灯片。所以这也是一个创建基本幻灯片插件的教程。
我用于简单、丑陋的幻灯片控制器的代码
<html>
<style type="text/css">
td
border:1px solid #ccc;
width: 420px;
max-width:420px;
text-overflow:ellipsis;
span
word-wrap: break-word;
width: 420px;
max-width:420px;
overflow-y:auto; overflow-x:hidden;
border:1px solid red;
</style>
<body>
<table>
<tr><td><img id="img" name="img" src="" title="Image" /></td> </tr>
<tr><td><span id="title">title</span></td></tr>
<tr><td><span id="desc">description</span></td></tr>
<tr><td><input type="button" value="<" onclick="back()" />
<input type="button" value=">" onclick="next()" />
<input type="text" id="idx" value="1" size="2" /> </td></tr>
</table></body>
<script>
var titles = ["zero", "one", "two", "three", "four"];
var descs = ["0 zer0", "1 one ", "2 two ", "3 three", "4 four"];
var img = document.getElementById('img');
var ttl = document.getElementById('title');
var dsc = document.getElementById('desc');
var idx = document.getElementById('idx');
var limit = titles.length-1;
function back()
if (parseInt(idx.value) > 1)
idx.value = parseInt(idx.value) - 1;
img.src = 'images/image' + idx.value + '.jpg';
ttl.innerHTML = titles[idx.value];
dsc.innerHTML = descs[idx.value];
function next()
if (parseInt(idx.value) < limit)
idx.value = parseInt(idx.value) + 1;
img.src = 'images/image' + idx.value + '.jpg';
ttl.innerHTML = titles[idx.value];
dsc.innerHTML = descs[idx.value];
</script>
</html>
我希望它被用作
<div id="main">
<img src="...." title="Title of image 1" data-desc="description of #1 image" />
<img src="...." title="Title of image 2" data-desc="description of #2 image" />
</div>
【问题讨论】：
你需要更好地解释你的问题。 所以你想让别人教你如何重新发明***，这样你就可以制作一个关于重新发明***的教程？ @DelightedD0D，你真是太棒了 @Sourav 我猜你正在寻找这样的东西？ Simple way of creating jQuery Slider 见***.com/questions/33492797/… 【参考方案1】：您可以使用 nivo slider 。
您只需在 alt 属性中提及图像的描述，并在 title 属性中提及图像的标题。
只需将插件附加到您的包装元素：
$(window).load(function()
$('#main').nivoSlider();
);
编辑1： 创建此类插件的简单方法
jQuery.fn.imgSlider = function( options )
// default settings:
var defaults =
textColor: "#000",
backgroundColor: "#fff",
fontSize: "16px",
getTextFromTitle: true,
getTextFromAlt: false,
animateOpacity: true,
animationDuration: 500,
clickImgToGoToNext: true,
clickImgToGoToLast: false,
nextButtonText: "next",
previousButtonText: "previous",
nextButtonTextColor: "red",
previousButtonTextColor: "red"
;
var settings = $.extend( , defaults, options );
return this.each(function()
// Plugin code would go here...
);
;
调用插件
$( "div" ). imgSlider();
编辑 2
我创建了一个 jQuery 图像滑块插件。 这里是example 带注释的代码。
【讨论】：
我想知道如何创建这样的插件 有很多方法可以创建这样的插件...检查编辑的答案 @Sourav 哈哈，我敢打赌它会，然后那个教程就会自己写；） @Sourav 添加了一个示例链接，请检查答案。它可能有用。以上是关于创建第一个 jQuery 幻灯片插件，从 Javascript 转换的主要内容，如果未能解决你的问题，请参考以下文章