jquery用的不熟，關於輪播閃爍的問題還要繼續想一下，整體感覺很不順暢，
待完善，先吃飯去！得意
代碼結構：
JS部分：
/**
* Created by Think on 2017/6/8.
*/
var oCss = document.createElement("link");
oCss.setAttribute("rel", "stylesheet");
oCss.setAttribute("type", "text/css");
oCss.setAttribute("href", "../component/Carousel/carousel.css");
document.getElementsByTagName("HEAD")[0].appendChild(oCss);
var Carousel = function(content,urls,autoplay,timeInterval) {
init_carousel(content,urls,autoplay);
}
var init_carousel = function (content,urls,autoplay,timeInterval) {
var timeInterval = timeInterval || 2000;
var _interval;
var tempIndex = 0;
urls.length == 0 && function(){return false}();
var _width = content.offsetWidth;
var _con = document.createElement("div");
_con.className= "con";
var _ul = document.createElement("ul");
_ul.className = "ul";
_ul.style.minWidth = _width + "px";
for(var i=0; i<urls.length; i++){
var _li = document.createElement("li");
_li.className = "li";
_li.style.background = "url(" + urls[i] + ") no-repeat";
_li.style.backgroundSize = "cover";
_li.style.width = _width + "px";
_ul.appendChild(_li);
}
_con.appendChild(_ul);
content.appendChild(_con);
$(".ul li:eq(0)").css("display","block");
var _tab = document.createElement("div");
_tab.className= "tab";
_ul.appendChild(_tab);
for(var i=1;i<=urls.length;i++){
$(".tab").append('<a href="javascript:(void)">'+i+'</a>');
}
$(".tab a").eq(0).addClass('active');
var _func_lb = function () {
tempIndex ++ ;
tempIndex == urls.length && function () {
tempIndex = 0;
}();
$(".tab a").eq(tempIndex).addClass('active').siblings().removeClass("active");
$(".con ul li ").eq(tempIndex).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
$(".tab").fadeIn("fast");
};
autoplay == true && function () {
_interval = setInterval(_func_lb, timeInterval);
}();
$(".tab a").mouseover(function () {
clearInterval(_interval)
});
$(".tab a").mouseleave(function () {
tempIndex = $(this).index();
_interval = setInterval(_func_lb, timeInterval);
})
$(".tab a").click(function () {
$(this).addClass('active').siblings().removeClass('active');
// var index = $(this).index();
tempIndex = $(this).index();
$(".con ul li").eq(tempIndex).stop().fadeIn(300).siblings().stop().fadeOut(300);
$(".tab").fadeIn("fast");
})
}CSS部分：
.con{
width: 100%;
height: 100%;
}
.ul{
min-width: 900px;
min-height: 300px;
height: auto;
position: relative;
list-style: none;
}
.li{
width: 900px;
min-height: 300px;
height: auto;
display: none;
float: left;
}
.tab{
min-height: 50px;
height: auto;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
width: 346px
}
.tab a{display: inline-block;padding: 2px 10px;font-size: 10px;background: #fff;margin: 0 5px;color: #333;}
.tab a.active{background: #09b;color: #fff;}HTML（調用部分）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../component/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../component/Carousel/carousel.js"></script>
<style>
html,body,div{
height: 100%;
width: 100%;
overflow: hidden;
}
#tt{
width: 600px;
height: 320px;
position: absolute;
top:20%;
}
</style>
</head>
<body>
<div id="tt"></div>
</body>
<script>
var test = new Carousel(document.getElementById("tt"),["../component/image/1.jpg","../component/image/2.jpg","../component/image/3.jpg"],true);
</script>
</html>這種隨時可以“new”出來，嵌入DOM的東西，是我理解的組件化開發。
PS：任何意見請高手給予指教，不勝感謝！
尋Web前端開發工作，地點北京，期望月10-15K.