DIV+CSS+JQ上下翻滚焦点幻灯片 向上向下滚动幻灯片特效，点击焦幻灯片图片可自动向下向上滚动，适合搜索引擎优化的幻灯片特效

css div jq幻灯片效果截图

基于jquery的图片自动上下翻滚式焦点图广告代码特效，完全仿淘宝网首页的焦点幻灯片效果。

CSS幻灯片主要控制代码：

<script type="text/javascript" > 
$(function(){ 
var len = $(".num > li").length; 
var index = 0; 
var adTimer; 
$(".num li").mouseover(function(){ 
index = $(".num li").index(this); 
showImg(index); 
}).eq(0).mouseover(); 
//滑入停止动画，滑出开始动画 
$('.ad').hover(function(){ 
clearInterval(adTimer); 
},function(){ 
adTimer = setInterval(function(){ 
showImg(index) 
index++; 
if(index==len){index=0;} 
} , 2000); 
}).trigger("mouseleave"); 
}) 
// 通过控制top ，来显示不同的幻灯片 
function showImg(index){ 
var adHeight = $(".ad").height(); 
$(".slider").stop(true,false).animate({top : -adHeight*index},400); 
$(".num li").removeClass("on") 
.eq(index).addClass("on"); 
} 
</script> 

其中的 2000 是控制自动播放间隔时间的，400 是控制鼠标划过数字时图片的翻滚速度的。按照你的实际需要自行修改CSS样式为合适的大小，比如css 宽度,css高度，图片本身大小即可适用你所需，本自动上下滚动幻灯片特效兼容各大浏览器。

在线演示：查看案例

完整源代码打包下载：

相关幻灯片特效：CSS上下滚动切换幻灯片特效

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-texiao/texiao606.shtml