Structure-behavior-style-requirejs implement picture Carousel Plugin

Recently work needs, I wrote a picture carousel plug-in, but thought to integrate into the framework, so again with Requirejs changed again.

Main documents:

• Style.css
• Jquery-1.11.1.min.js
• Require.js
• Viewpager.js
• View.js
• Index.html

Viewpager.js:

define ([' jquery '],function ($) {    functionViewpager (setting) {varMySet ={index:0        }; Setting=$.extend ({}, MySet, setting);  This. Init (setting);    }; Viewpager.prototype={init:function(s) { This. ID =s.id;  This. List = $ ("#" + s.id). Find ("Li");  This. index =S.index;  This. Isauto =S.isauto;  This. Renderui ();  This. Bindui (); }, Renderui:function () {            varinhtml = $ (' <div class= "prev" ><span class= "Prev_icon" ></span></div><div class= "Next" > <span class= "Next_icon" ></span></div> '); //selector to the specified ID            //inhtml.appendto ("Body Ul#viewpager");$("#" + This. ID). append (inhtml); }, Bindui:function () {            varthat = This; if(That.isauto) {setinterval (function() {That.prev (); }, 3000); }            $("#" + This. ID). Delegate (". Prev", "click",function() {That.prev ();            }); $("#" + This. ID). Delegate (". Next", "click",function() {that.next ();        }); }, Prev:function () {            $( This. list[ This. index]). Animate ({opacity:' Hide '            }, 500); if( This. Index < This. list.length-1) {                 This. index++;  This. PICGO (); }            Else {                 This. index = 0;  This. PICGO (); }}, Next:function () {            $( This. list[ This. index]). Animate ({opacity:' Hide '            }, 500); if( This. Index > 0) {                 This. index--;  This. PICGO (); }            Else {                 This. index = This. list.length-1;  This. PICGO (); }}, Picgo:function () {            $( This. list[ This. index]). CSS ({"Left": "0px"            }); $( This. list[ This. index]). Animate ({opacity:' Show '            }, 800);    }    }; return{Viewpager:viewpager}});

View.js

require.config ({    paths: {        "jquery": "Js/jquery-1.11.1.min"        "Viewpager": "js/ Viewpager "abstract": "Js/abstract"    }); require ([function ($, v) {             New  V.viewpager ({        "id": "viewpager"        true    } );     New V.viewpager ({        "id": "viewpager1"    }) ;

Index.html

<!    DOCTYPE html>
Structure-behavior-style-requirejs implement picture Carousel Plugin