Php滑动图片效果,SuperSlide2实现图片滚动特效_图象特效

这里贴一下自己演示的代码，期望对使用的朋友所有启发，我这里是结合了两个例子实现的

.focus-item ul li.item{

text-align: center;

}

.scroll-area .prev,.scroll-area .next{

position: absolute;

bottom: 590px;

width: 29px;

height: 64px;

opacity: 0.6;

overflow: hidden;

display: none;

text-indent: -999px;

border: medium none;

background: url('/images/arrowLR.png') no-repeat scroll 0% 0% transparent;

}

.scroll-area .prev{

left: 0px;

background-position: -50px 0px;

}

.scroll-area .next{

right: 0px;

}

.scroll-area .bdOn .prev,.scroll-area .bdOn .next{

display: block;

}

.scroll-area .focus-hd{

/*width: 832px;*/

/*left: 60px;*/

/*position: absolute;*/

/*height: 100px;*/

/*overflow: hidden;*/

left: 63px;

position: absolute;

}

.focus-hd .sNext, .focus-hd .sPrev{

float: left;

display: block;

width: 14px;

height: 47px;

text-indent: -9999px;

background: url('/images/sprites1008.png') no-repeat scroll 0px -3046px transparent;

}

.focus-hd .sNext{

background-position: 0px -2698px;

}

.focus-hd .show_bottom_nav {

float: left;

margin: 0px 6px;

display: inline;

width: 832px;

overflow: hidden;

}

.focus-hd .show_bottom_nav ul li{

margin-left:15px;

}

html演示代码：

js脚本代码：

jQuery(".scroll-area").slide({titCell:'.focus-hd li',mainCell:'.focus-item ul',delayTime:0,trigger:0,autoPlay:true});

jQuery(".scroll-area .focus-item").hover(function(){jQuery(this).addClass("bdOn")},function(){jQuery(this).removeClass('bdOn')});

//小标签的导航

jQuery(".scroll-area .show_bottom_nav").slide({ mainCell:"ul",delayTime:100,vis:5,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext" });

本文原创发布php中文网，转载请注明出处，感谢您的尊重！