创建第一个 jQuery 幻灯片插件，从 Javascript 转换

Question

我问的是一个 jQuery 带有图像、标题和描述 jQuery slide show 的插件。但是找不到这样的。因此尝试仅使用 javascript 构建一个非常小且简单的 [丑陋] slide-show。但是也有一些缺点，因为在我的脚本中我必须对图像、标题和描述进行硬编码。所以我想从头开始创建一个 jQuery 插件，它只做与脚本相同的工作，并且还在运行时构建 slide-show。所以这也将是一个关于创建基本 slide-show plug-in.

的教程

我用于简单、丑陋的 slide-show 控制器的代码

<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>

Answer 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带注释的代码。

创建第一个 jQuery 幻灯片插件，从 Javascript 转换

Creating first jQuery slideshow plugin, converting from Javascript

javascript

jquery

jquery-plugins

slideshow