SuperSlidev2.1 轮播图片和无缝滚动
使用方法,狠狠的点击下面链接
http://down.admin5.com/demo/code_pop/18/562/index.html
简单使用方法如下
html
<div class="bd">
<ul>
<li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
<li _src="url(images/2.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
<li _src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
<li _src="url(images/4.jpg)" style="background:#98918E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
<li _src="url(images/5.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>
</ul>
</div>
<div class="hd"><ul></ul></div>
<span class="prev"></span>
<span class="next"></span>
js
/***全屏轮播banner效果***/
$(".fullSlide").hover(function(){
$(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function(){
$(this).find(".prev,.next").fadeOut()
});
$(".fullSlide").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "fold",
autoPlay: true,
autoPage: true,
trigger: "click",
startFun: function(i) {
var curLi = jQuery(".fullSlide .bd li").eq(i);
if ( !! curLi.attr("_src")) {
curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
}
}
});
/***东钿报道轮播效果***/
$(".dtbd").slide({titCell: ".hd li",mainCell:".bd ul",autoPlay:true});
/***合作伙伴滚动图片***/
$(".hzhb").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:6,interTime:50,trigger:"click",prevCell:".prev",nextCell:".next"});
SuperSlidev2.1 轮播图片和无缝滚动的更多相关文章
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- iOS 图片轮播图(自动滚动)
iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...
- 轮播图片 高效图片轮播,两个imageView实现
该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 ...
- 简单html js css 轮播图片,不用jquery
这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好, 比如:dedecms 的首页的轮播图是用flash实现滚动的. 所以这个自己修改了一下,实现html+js+css ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- jquery 图片自动无缝滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应
官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...
- APP动态加载轮播图片
如果APP里面的轮播图片是动态加载的话,那么你会发现他不会轮播(前提是mui框架),这里都是用的mui框架,动态加载的图片因为mui的js查不到html上面没有图片,所以就不会轮播,需要手动重置下轮播 ...
随机推荐
- easyui-dialog中文件上传处理
function openDialog() { // $('#dlg').dialog('open'); //EasyUi的dialog中文件上传,后台获取不到文件,需要改写为下面这样 $(" ...
- UVa 11389 (贪心) The Bus Driver Problem
题意: 有司机,下午路线,晚上路线各n个.给每个司机恰好分配一个下午路线和晚上路线. 给出行驶每条路线的时间,如果司机开车时间超过d,则要付加班费d×r. 问如何分配路线才能使加班费最少. 分析: 感 ...
- hdu 4614 Vases and Flowers(线段树:成段更新)
线段树裸题.自己写复杂了,准确说是没想清楚就敲了. 先是建点为已插花之和,其实和未插花是一个道理,可是开始是小绕,后来滚雪球了,跪了. 重新建图,分解询问1为:找出真正插画的开始点和终止点,做成段更新 ...
- MYSQL查询数据库表索引的硬盘空间占用
查询数据库的占用 SELECT CONCAT(ROUND(SUM(index_length)/(1024*1024), 2), ' MB') AS 'Total Index Size' , CONCA ...
- nginx - ssl 配置 - globelsign ssl
前提: 3个文件 - domain.csr.domain.key.xxx.cer 简述: 1. 本地生成 .key文件 [附件] 2. 再利用key文件,生成csr(certificate Secu ...
- java中时间格式yyyyMMddHHmmss的大小写问题
字母 日期或时间元素 表示 示例 G Era 标志符 Text AD y 年 Year 1996 ; 96 M 年中的月份 Month July ; Jul ; 07 w 年中的周数 Numb ...
- Oracle 跟踪事件 set event
一.Oracle跟踪文件 Oracle跟踪文件分为三种类型,一种是后台报警日志文件,记录数据库在启动.关闭和运行期间后台进程的活动情况,如表空间创建.回滚段创建.某些alter命令.日志切换.错误消息 ...
- CocoaPods一个Objective-C第三方库的管理利器
转:http://blog.csdn.net/totogo2010/article/details/8198694 介绍: 开发应用的时候第三方的库是不可缺少的,能提高开发的效率. 一些经常用到的库, ...
- Android中GridView滚动到底部加载数据终极版
之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...
- http://blog.csdn.net/jbb0403/article/details/42102527
http://blog.csdn.net/jbb0403/article/details/42102527