简单的渐变轮播插件
话不多说，请看代码：
<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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
jQuery简单自定义图片轮播插件及用法示例
本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh
-
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形.在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件--jqthumb.js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果--不知
-
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势. 然后......自己想办法呗,再然后,就有下面3种解决方案 : jQuery Mobile (http:/
-
第十篇BootStrap轮播插件使用详解
Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果图如下所示: 关键代码如下: <div id="carousel-example-generic" c
-
jQuery图片轮播插件——前端开发必看
还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js.jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO.有兴趣的朋友可以去看
-
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m
-
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car
-
jQuery自适应轮播图插件Swiper用法示例
本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
-
jQuery插件实现图片轮播特效
好了废话不多说了,先看看效果图. HTML部分: <div class="slider"> <div class="ul-box"> <ul> <li><a href="javascript:;"><img src="img/1.jpg"/></a></li> <li><a href="javascrip
-
jQuery的图片轮播插件PgwSlideshow使用详解
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides