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

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

简单使用方法如下

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/itlkNote/p/7003789.html