菜单

slick.js插件实现监听video视频播放结束再自动轮播的代码

slick.js是常用的轮播图插件,监听video视频播放是常用的轮播模块效果。和SuperSlide.js插件、Swiper插件实现当前焦点有视频就暂停自动轮播,等视频播放结束再继续自动轮播的实现原理基本一样,就是先判断当前焦点是否有视频,如果有视频就调用暂停轮播的插件方法,使用addEventListener监听视频是否播放结束,然后再调用启用轮播的插件方法和立即播放下一屏的插件方法。 使用到的slick.js插件方法有:slickPause、slickPlay、slickNext;使用到的slick.js插件回调函数有:afterChange;使用到的js事件有:end...

响应式javascript堆叠式轮播图切换的实现代码

响应式javascript堆叠式轮播图切换的实现代码

三张图堆叠式立体轮播图效果在网页前端开发过程中经常会做到,之前不想费心费力自己弄,习惯使用一些成熟的jquery轮播图插件(如slick.js、Owl-Carousel.js)改造实现,效果也算是差强人意。这次在bilibili上看到有人分享相同效果的代码,下载下来发现代码挺简单,效果也比较合适,于是就在原代码的基础上对html、css和js都进行了些小修改,结果比较符合自己的要求。 HTML代码: <div class="owl"> <div id="stacked"> <div class="item">...

支持触摸的jQuery响应式幻灯片插件Owl Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,兼容包括 IE6、IE7在内的所有浏览器,需要jquery 1.7 及以上版本。Owl Carousel 提供了众多的参数、回调函数及自定义事件,所以它几乎可以满足你的所有要求。它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适...

jquery幻灯片插件FlexSlider插件的详细设置参数

$(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Select your animation type, "fade" or "slide"图片变换方式:淡入淡出或者滑动 slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"图片设置为滑动式时的滑动方向:左右或者上下 slidesho...

多种切换过渡效果小巧jQuery图片幻灯片插件Coin Slider

多种切换过渡效果小巧jQuery图片幻灯片插件Coin Slider

Coin Slider是款很小巧,简单易用,具有多种图片过渡效果的jquery幻灯片插件。 使用方法: 下载插件:http://pan.baidu.com/s/1pJNriFD 引用文件: <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="coin-slider.min.js"></script> <link rel="sty...

兼容IE6/IE7的焦点轮播图插件KinSlideshow

兼容IE6/IE7的焦点轮播图插件KinSlideshow

幻灯片是网站最常使用的网页效果之一,KinSlideshow幻灯片插件非常好用,需要元素结构简单,CSS基本不需要作多改动,只需要设置调用函数,即可实现超炫的轮播效果!兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多,基本能满足在网页上使用幻灯片(焦点图)效果。 KinSlideshow默认设置效果代码: jQuery: $(function(){ $("#KinSlideshow").KinSlideshow(); }) ...

jQuery简单的js+div+css图片幻灯片效果代码

网站经常用到的jQuery幻灯片,需要元素结构很简单,只需要调用函数。 jQuery部分代码: $(function(){ $("#KinSlideshow").KinSlideshow({ moveStyle:"right", titleBar:{titleBar_height:30,titleBar_bgColor:"#08355c",titleBar_alpha:0.5}, titleFont:{TitleFont_size:12,TitleFont_color:"#FFFFFF",TitleFont_weight:"normal"}, ...