您好,欢迎访问一九零五行业门户网

SuperSlidev2.1实现轮播图片和无缝滚动的实例代码

superslidev2.1 轮播图片和无缝滚动使用方法点击链接:
简单使用方法如下
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实现轮播图片和无缝滚动的实例代码的详细内容。
其它类似信息

推荐信息