创建第一个jQuery幻灯片插件，从Javascript转换 [英] Creating first jQuery slideshow plugin, converting from Javascript
问题描述
我在问一个有关jQuery插件的图片，标题和描述 jQuery幻灯片.但是找不到.因此，尝试仅使用javascript构建非常小巧且容易的[丑陋]幻灯片演示.但是有一些缺点，因为在我的脚本中，我必须对图像，标题和描述进行硬编码.因此，我想从头开始创建一个jQuery插件，该插件只能执行与脚本相同的工作，还可以在运行时构建幻灯片.因此，这还将是有关创建基本幻灯片演示插件的教程.
I was asking about a jQuery plugin with image, title and description jQuery slide show. But can't find such. So tried to build a very small and easy [ugly] slide-show using only javascript. But there are some drawbacks, as in my script I have to hard code images, titles and descriptions. So I want to create a jQuery plugin from scratch which does only the same job as the script does, and also builds the slide-show on runtime. So this will also be a tutorial on creating a basic slide-show plug-in.
我用于简单，丑陋的幻灯片控制器的代码
The code I used for the easy, ugly slide-show controller
<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>
推荐答案
您可以使用 nivo滑块.
您只需要在alt属性中提及图像描述，并在title属性中提及图像标题.
You just have to mention description of an image in alt attribute and title of an image in title attribute.
然后将插件附加到包装器元素上
And just attach the plugin to your wrapper element:
$(window).load(function() {
$('#main').nivoSlider();
});
创建此类插件的简单方法
A simple way to create such plugin
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 Image Slider插件. 这是带有注释代码的示例 .
I have created a jQuery Image Slider Plugin. here is the example with annotated code.
这篇关于创建第一个jQuery幻灯片插件，从Javascript转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
