Создание первого плагина слайдшоу jQuery, преобразование из Javascript

-10

Я спрашивал о плагине jQuery с изображением, названием и описанием jQuery slide show. Но такого не найти. Поэтому попытался создать очень маленькое и легкое [уродливое] слайд-шоу, используя только javascript. Но есть некоторые недостатки, так как в моем сценарии мне приходится записывать изображения, заголовки и описания. Поэтому я хочу создать плагин jQuery с нуля, который выполняет только ту же работу, что и скрипт, а также создает слайд-шоу во время выполнения. Таким образом, это будет также учебник по созданию базового плагина слайд-шоу.Создание первого плагина слайдшоу jQuery, преобразование из Javascript

кода я использовал для легкого, уродливой слайд-шоу контроллера

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

источник

2016-06-09 Sourav

Вам нужно лучше объяснить ваш вопрос. – Tobsta

Итак, вы хотите, чтобы кто-то показал вам, как изобретать колесо, чтобы вы могли сделать учебник по переосмыслению колеса? – DelightedD0D

@ DelightedD0D точно, вы просто так великолепны – Sourav

Вы можете использовать nivo slider.

Вы просто должны упомянуть описание изображения в атрибуте alt и заголовке изображения в атрибуте title.

И просто прикрепить плагин к вашему обертку элемента:

$(window).load(function() { 
    $('#main').nivoSlider(); 
});

Edit1: Простой способ создать такой 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. здесь exampleс аннотированным кодом.

источник

2016-06-15 14:20:57 sweeta

Я хочу знать, как создать такой плагин. – Sourav

Существует множество способов создания таких плагинов ... проверить отредактированный ответ – sweeta

рабочий пример будет полезен – Sourav

Создание первого плагина слайдшоу jQuery, преобразование из Javascript

ответ

Смежные вопросы