使用方法,狠狠的点击下面链接

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"});

转载于:https://www.cnblogs.com/qiao20/p/5683596.html

SuperSlidev2.1 轮播图片和无缝滚动相关推荐

  1. 【原生js】详解轮播图之无缝滚动

    前言:轮播图,是网站首页中最常见的一种图片切换特效,作为前端开发者,我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播,省事简单.所以我今天想介绍一下原生js代码实现的图片轮播. 结 ...

  2. 图片轮播c语言,IOS开发之UIScrollView实现图片轮播器的无限滚动

    IOS开发之UIScrollView实现图片轮播器的无限滚动 简介 在现在的一些App中常常见到图片轮播器,一般用于展示广告.新闻等数据,在iOS内并没有现成的控件直接实现这种功能,但是通过UIScr ...

  3. java 图片手动切换_JavaScript学习案例之手动切换轮播图片

    javascript学习案例之手动切换轮播图片 效果图: 思路: 1.先做界面 1.1制作按钮及点击触发事件 1.2引入一张图片 2.书写css 2.1跳转p盒子的布局(宽.高.边框线.水平居中.文字 ...

  4. swiper高度自适应_微信小程序之swiper轮播图片高度自适应

    微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应. 效果图: swiper ...

  5. Html之实例练习(轮播图片、放大镜效果、面板拖动)

    文章目录 一.轮播图片 二.放大镜效果 三.面板拖动 本篇将简单演示一下HTML里的轮播图片.放大镜效果和面板拖动的实例,代码已经打包在文章开头,需要参考的请自行下载 一.轮播图片 1.效果图 2.J ...

  6. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  7. vue-awesome-swiper实现轮播图片

    前言 最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时,学习到第三章 3.7-首页顶部轮播图片(vue-swipp ...

  8. 点击轮播图片,链接跳转错误

    <#if (InfoList?size > 0)><#list InfoList as newsInfo><li class="slider-li1&qu ...

  9. 关于element-ui中轮播图手动切换轮播图片

    文章目录 前言 一.关于element-ui中轮播图手动切换轮播图片 二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法 结尾 前言 在开发过程中发现项目中轮 ...

最新文章

  1. Python 用while 实现循环 到特定条件退出循环(input 输入错误之后重新输入)
  2. Linux 系统有关Systemd 的知识
  3. (转)PHP EOF(heredoc)的使用方法
  4. [周年感悟]看软件项目中的四种角色
  5. 使用QEMU创建虚拟机
  6. iOS消息推送机制原理与实现
  7. R语言与数据的概括性度量
  8. 台达编码器型号含义_光电编码器型号含义_光电编码器应用实例
  9. “蓝脑”计划:人造大脑的可能性 文化·探索 CCTV_com
  10. eslint 快捷键设置_eslint的妙用和快捷修复
  11. Vs2010中文版安装silverlight5bate方法
  12. Word操作技巧大全
  13. cpu_relax()函数的意义
  14. http服务(nginx、apache)停用不安全的SSL协议、TLS1.0和TLS1.1协议/启用TLS1.3
  15. 回顾马云屌丝岁月的惨状:多次被拒失声痛哭
  16. HoughCircles()函数 画圆心和圆的轮廓
  17. A.Mio visits ACGN Exhibition
  18. FPGA设计中,产生LFSR伪随机数
  19. 根据卫星的方位角和仰角画卫星星空图(QT实现)
  20. 智能机器人为什么连接不上服务器,战争机器人无法连接服务器是什么原因

热门文章

  1. 赵雅智:js知识点汇总
  2. Hadoop伪分布安装配置
  3. 在PS里怎样使图层居中对齐?
  4. js 数组的属性及其常用的方法
  5. HTTP(超文本传输协议)
  6. JavaScript学习(八十二)—JavaScript的组成
  7. powershell写mysql_使用Powershell对MySql运行MySql存储过程脚本
  8. SQL63 刷题通过的题目排名
  9. HBuilderX是什么
  10. 车险受益人变更需要什么资料?