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上面没有图片,所以就不会轮播,需要手动重置下轮播 ...
随机推荐
- 我的c语言经历
作为一名计算机专业的学生,c语言是我的启蒙编程语言.当时,是刘慧老师带的课.很庆幸,是刘老师带的课.因为,后来当我这个人有了一些经历就会知道.对于像一张 白纸一样的大一新生.老师,如果能给学生很好的启 ...
- (转)Linux: su sudo sudoer
http://zebralinux.blog.51cto.com/8627088/1369301 日常操作中为了避免一些误操作,更加安全的管理系统,通常使用的用户身份都为普通用户,而非root.当需要 ...
- 流媒體】jrtplib—VS2010下RTP开源协议库JRTPLIB3.9.1编译
一.JRTPLIB简介 老外用C++编写的开源RTP协议库,用来进行实时数据传输,可以运行在 Windows.Linux. FreeBSD.Solaris.Unix和VxWorks 等多种操作系统上, ...
- Android 如何使用juv-rtmp-client.jar向Red5服务器发布实时视频数据
使用juv-client-client.jar主要是尽快地完成毕业设计里面手机端向网页端发送实时视频的功能,由于实习和做毕业设计的时间冲突,因此完成毕业设计只花了1个多月时间. (万恶的形式主义,论文 ...
- SQL2012远程连接到SQL2008时的问题:已成功与服务器建立连接,但在登陆过程中发生错误。
服务器装的是2008,我机上装的是2012,结果一远程连接马上报错而且2012直接crash了.后来找到这位兄弟的帖子,http://www.cnblogs.com/liuguozhu2015/p/3 ...
- HDU 4422 The Little Girl who Picks Mushrooms
题意:一共有5座山,已知小女孩在n座山采了n篮蘑菇,如果n小于5则在其他的山里采了任意重量的蘑菇,给出每篮蘑菇的重量,她回去的时候会遇到仨女巫要她交出三篮蘑菇的重量和恰好为1024的倍数,否则就把她的 ...
- poj 3311 Hie with the Pie
floyd,旅游问题每个点都要到,可重复,最后回来,dp http://poj.org/problem?id=3311 Hie with the Pie Time Limit: 2000MS Me ...
- MFC DLL 资源模块句柄切换[转]
以前写MFC的DLL的时候,总会在自动生成的代码框架里看到提示,需要在每一个输出的函数开始添加上 AFX_MANAGE_STATE(AfxGetStaticModuleState()).一直不明白这样 ...
- MFC工程目录
如果已经以Debug方式编译链接过程序,则会在解决方案文件夹下和工程子文件夹下各有一个名为“Debug”的文件夹,而如果是Release方式编译则会有名为“Release”的文件夹.这两种编译方式将产 ...
- 《Genesis-3D开源游戏引擎-官方录制系列视频教程:基础操作篇》
注:本系列教程仅针对引擎编辑器:v1.2.2及以下版本 G3D基础操作 第一课<G3D编辑器初探> G3D编辑器介绍,依托于一个复杂场景,讲解了场景视图及其基本操作,属性面板和工具栏的 ...