超简单的渐变轮播插件

Creabine
Creabine 发布于 2017-01-11 16:17:33 浏览:286 类型:原创 - 教程 分类:JavaScript - 插件 二维码: 作者原创 版权保护
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Example</title>
       <style>
.CreabineCarousel{
	width: 100%;
    height: 700px;
    background-size: cover;
    position: relative;
}
.CreabineCarousel .CreabineCarousel-dotContainer{
	position:absolute;
	bottom: 5%;
	margin:0 auto;
	z-index: 100;
	list-style-type: none;
	width: 100%;
	text-align: center;
	left: 0;
	padding: 0;
}
.CreabineCarousel .CreabineCarousel-dotContainer .dot{
	width: 30px;
	height: 4px;
	border-radius:3px;
	background-color:#fff;
	display: inline-block;
	margin:0 5px;
	opacity: 0.7;
}
.CreabineCarousel .CreabineCarousel-dotContainer .dot:hover{
	opacity: 1;
}

.CreabineCarousel .CreabineCarousel-item{
	position:absolute;
	width: 100%;
	height: 100%;
	transition:all 0.8s;
}
.CreabineCarousel .CreabineCarousel-item h1{
	max-width: 600px;
	text-align: center;
	font-size: 5rem;
	line-height: 1.3;
	color: #fff;
	padding: 300px 50px 0 50px;
	margin:0 auto;
}
.CreabineCarousel .CreabineCarousel-item p{
	max-width: 600px;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.4;
	color: #fff;
	padding-top: 10px 50px 0 50px;
	margin:0 auto;
}
       </style>
</head>
<body>
	
	<div id="carouselRoot"></div>


<script>
function CreabineCarousel(options){
	var imgPathList = options.images;
    var textList = options.contant;
    if (!options.root) {
        throw "require root to this CreabineCarousel";
    }
    if (!imgPathList) {
        throw "must provide parameter images";
    }
    if (imgPathList.length != textList.length) {
        throw "images are not equal to contants";
    }
    var changeCount = 0;
    var timer;
    var _autoScroll = options.autoScroll || false;
    var _scrollDuration = options.scrollDuration || 4000;
    var _height = options.height || 700;

    function initElements() {
    	var _root = document.getElementById(options.root);
    	if (!_root) {
            throw "no exist called this name element,please create element called this name";
        }
        _root.className = "CreabineCarousel";
        _root.style.height = _height + "px";
        var _dotContainer = document.createElement("ul");
        _dotContainer.className = 'CreabineCarousel-dotContainer';
        _root.appendChild(_dotContainer);
        for (var i = 0; i < imgPathList.length; i++) {
            var _dot = document.createElement("li");
            _dot.className = "dot";
            _dot.id = "item" + (i+1) + "dot";
            _dotContainer.appendChild(_dot);
            var _item = document.createElement("div");
            _item.className = "CreabineCarousel-item"
            _item.id = "item" + (i+1);
            _item.style.backgroundImage = "url(" + imgPathList[i] + ")";
            _item.style.backgroundSize = "cover";
            _item.style.backgroundRepeat = "no-repeat";
            if(i == 0){
                _item.style.opacity = '0';
                _item.style.zIndex = '1';
            }
            _root.appendChild(_item);
            var _h = document.createElement("h1");
            _h.innerText = textList[i].title;
            _item.appendChild(_h);
            var _p = document.createElement("p");
            _p.innerText = textList[i].text;
            _item.appendChild(_p);
        }
        _dotContainer.addEventListener("mouseover",function(e){
        	if( e.target && e.target.className == "dot" ){
        		clearInterval(timer);
        		var id = e.target.id.substring(0,5);
        		CarouselHover(id);
        	}
        });
        _dotContainer.addEventListener("mouseout",function(e){
        	if( e.target && e.target.className == "dot" ){
        		var id = e.target.id;
        		CarouselOut(id);
        	}
        });
        if(_autoScroll){
            timer = setInterval(function(){Carousel()},_scrollDuration);
        }

    }
    function Carousel(){
        var all = document.getElementsByClassName('CreabineCarousel-item');
        for (var i = all.length - 1; i >= 0; i--) {
            all[i].style.opacity = '0';
            all[i].style.zIndex = '1';
        }
        var i=((changeCount++%5)+1);
        var id = "item" + i;
        document.getElementById(id).style.opacity = '1';
        document.getElementById(id).style.zIndex = '10';
    }
    function CarouselHover(id){
        clearInterval(timer);
        var all = document.getElementsByClassName('CreabineCarousel-item');
        for (var i = all.length - 1; i >= 0; i--) {
            all[i].style.opacity = '0';
            all[i].style.zIndex = '1';
        }
        document.getElementById(id).style.opacity = '1';
        document.getElementById(id).style.zIndex = '10';
    }
    function CarouselOut(id){
        var num = id.substring(4,5);
        num = parseInt(num)-1;
        changeCount = num;
        timer = window.setInterval(function(){Carousel()},_scrollDuration);
    }
    initElements();
}




	new CreabineCarousel({
		root:'carouselRoot',
		autoScroll:true,
                scrollDuration:3000,
		height:700,
		images:['https://cdn.worktile.com/images/index/index_all_bg_1.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_2.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_3.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_4.jpg?v=4.5.18','https://cdn.worktile.com/images/index/index_all_bg_5.jpg?v=4.5.18'],
		contant:[
			{
				title:"title-1",
				text:"text-111"
			},
			{
				title:"title-2",
				text:"text-222"
			},
			{
				title:"title-3",
				text:"text-333"
			},
			{
				title:"title-4",
				text:"text-444"
			},
			{
				title:"title-5",
				text:"text-555"
			},
		]
	});
</script>
</body>
</html>


第一次造轮子,很菜,新手小伙伴可以看看源码,很简单,保证你也可以造出自己的轮子。github地址,小菜鸡也想求star
z
给个赞 1 人点赞
收藏 6 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
Creabine Creabine 作者

作者最新