SuperSlidev2.1 轮播图片和无缝滚动

只谈情不闲聊 提交于 2020-03-27 05:49:48

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

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!