特效描述：图片滚动 提示弹出层。jquery图片滚动提示弹出层特效代码下载
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2. HTML代码
<style type="text/css">
/* reset */
*{margin:0;padding:0;list-style-type:none;}
:focus{outline:0;}
img{vertical-align:middle;}
a,img{border:0;}
a,a:visited{color:#6a6a6a;text-decoration:none;}
a:hover{color:#7bbb05;text-decoration:none;}
.f-l{float:left;}.f-r{float:right;}
body{font:12px/180% Helvetica,Arial,sans-serif,"宋体";color:#636363;}
/* focus */
.focus{width:622px;overflow:hidden;position:relative;margin:0 auto;}
.focus .focuspic{height:340px;width:999em;position:relative;float:left;}
.focus .focuspic .indexbanner{float:left;width:620px;position:relative;height:340px;overflow:hidden;border:solid 1px #3366cc;}
/* scrollbox */
.scrollbox{height:190px;padding:20px 0;float:left;}
.scrollbox .scrollbtn{width:12px;height:37px;margin:38px 0 0 0;overflow:hidden;background:url(images/arrow.gif) no-repeat;cursor:pointer;}
.scrollbox #prev{background-position:0 0;}
.scrollbox #prev.disabled{background-position:0 -37px;cursor:default;}
.scrollbox #next{background-position:-12px 0;}
.scrollbox #next.disabled{background-position:-12px -37px;cursor:default;}
.scrollbox .scrollpic{float:left;margin:0 16px 0 16px;display:inline;width:562px;height:190px;overflow:hidden;}
.scrollbox .scrollpic ul{width:999em;float:left;display:inline;}
.scrollbox .scrollpic li{float:left;width:188px;text-align:center;}
.scrollbox .scrollpic li a img{border:solid 1px #ddd;padding:5px;}
.scrollbox .scrollpic li a span{display:block;height:30px;line-height:30px;cursor:pointer;}
.scrollbox .scrollpic li a:hover span,.scrollbox .scrollpic li.current a span{color:#3366cc;font-weight:800;}
.scrollbox .scrollpic li.current a img{border:solid 1px #3366cc;}
</style>
<script type="text/javascript">
$(function(){
var animate_time=200;//动画时间：0.3秒
var interval_time=3000;//播放间隔时间：5秒
var picnumber=$(".scrollpic li").size()-1;//计算广告的数量
var slideclick = 0;//初始化
//循环函数
function autoplay(){
slideclick++;
if(slideclick<=picnumber){
$(".scrollpic li").eq(slideclick).trigger("dblclick");
}else{
$(".scrollpic li").eq(0).trigger("dblclick");
slideclick = 0
}
}
//设置循环时间，自动开始循环
var auto_setInterval = setInterval(autoplay,interval_time);
//悬停广告区域时播放停止
$(".focus").hover(function(){
clearInterval(auto_setInterval);
},function(){
auto_setInterval = setInterval(autoplay,interval_time);
});
//小图点击时，开始动画
$(".scrollpic li").dblclick(function(){
slideclick=$(".scrollpic li").index($(this));
$(".scrollpic li").removeClass("current");
$(this).addClass("current");
//大图上移
$(".focus .focuspic").animate({"marginLeft":slideclick*-622},{duration:animate_time,queue:false});
//控制缩略图显示个数
if(slideclick<picnumber){
if(slideclick==0||slideclick==1){
$(".scrollpic ul").animate({"marginLeft":"0px"},{duration:animate_time,queue:false});
}else{
$(".scrollpic ul").animate({"marginLeft":(slideclick-1)*-188},{duration:animate_time,queue:false});//显示最后4张图片不在滚动
}
}
//判断上下按钮是否可点击
if(slideclick==0){
$(".scrollbox #prev").addClass("disabled");
$(".scrollbox #next").removeClass("disabled");
}else if(slideclick==picnumber){
$(".scrollbox #prev").removeClass("disabled");
$(".scrollbox #next").addClass("disabled");
}else{
$(".scrollbox #prev").removeClass("disabled");
$(".scrollbox #next").removeClass("disabled");
}
});
//鼠标在小图上悬停时，相关移动
$(".scrollpic li").mouseover(function(){
var slidebtn_hover_chi = $(".scrollpic li").index($(this));
$(".scrollpic li").removeClass("current");
$(this).addClass("current");
$(".focuspic").animate({"marginLeft":slidebtn_hover_chi*-622},{duration:animate_time,queue:false});
if(slidebtn_hover_chi!=slideclick);
slideclick=slidebtn_hover_chi;
//判断上下按钮是否可点击
if(slideclick==0){
$(".scrollbox #prev").addClass("disabled");
$(".scrollbox #next").removeClass("disabled");
}else if(slideclick==picnumber){
$(".scrollbox #prev").removeClass("disabled");
$(".scrollbox #next").addClass("disabled");
}else{
$(".scrollbox #prev").removeClass("disabled");
$(".scrollbox #next").removeClass("disabled");
}
});
//点击向上按钮时
$(".scrollbox #prev").click(function(){
slideclick=slideclick-1;
if(slideclick<0){
slideclick=0;
}
$(".scrollpic li").eq(slideclick).trigger("dblclick");
});
//点击向下按钮时
$(".scrollbox #next").click(function(){
slideclick=slideclick+1;
if(slideclick<=picnumber){
slideclick=picnumber;
$(".scrollpic li").eq(slideclick).trigger("dblclick");
$(".scrollpic ul").animate({"marginLeft":(slideclick-2)*-188},{duration:animate_time,queue:false});// 缩略图最后滚动的左侧距离位置 正好4张缩略图显示
}else{
$(".scrollpic li").eq(0).trigger("dblclick");
slideclick = 0
}
$(".scrollpic li").eq(slideclick).trigger("dblclick");
});
});
</script>
<div class="focus">
<div class="focuspic">
<div class="indexbanner"><a target="_blank" href="http://www.51qianduan.com/" title="jquery 弹出层插件 鼠标点击文字获取标题弹出层内容信息"><img width="620" height="340" alt="jquery 弹出层插件 鼠标点击文字获取标题弹出层内容信息" src="images/c4a109ba30e5ad520220859b9a9380b9.jpg"></a></div>
<div class="indexbanner"><a target="_blank" href="http://www.51qianduan.com/" title="jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息"><img width="620" height="340" alt="jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息" src="images/be959f01665246fc4828281158aba316.jpg"></a></div>
<div class="indexbanner"><a target="_blank" href="http://www.51qianduan.com/" title="jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示"><img width="620" height="340" alt="jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示" src="images/df2a7d77f20d55bca26a8328bd8647ae.jpg"></a></div>
<div class="indexbanner"><a target="_blank" href="http://www.51qianduan.com/" title="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效"><img width="620" height="340" alt="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效" src="images/3a1184db401138d6443a1b5f42cb289b.jpg"></a></div>
<div class="indexbanner"><a target="_blank" href="http://www.51qianduan.com/" title="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本"><img width="620" height="340" alt="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本" src="images/939eec7e10f99c541febcef39202b308.jpg"></a></div>
<div class="indexbanner"><a target="_blank" href="http://www.51qianduan.com/" title="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动"><img width="620" height="340" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/99c04eb3c2092522c82fda8a5e9245b5.jpg"></a></div>
</div><!--focuspic end-->
<div class="scrollbox">
<div id="prev" class="f-l scrollbtn disabled"></div>
<div class="f-l scrollpic">
<ul>
<li class="current"><a target="_blank" href="http://www.51qianduan.com/" title="jquery 弹出层插件 鼠标点击文字获取标题弹出层内容信息"><img width="150" height="150" alt="jquery 弹出层插件 鼠标点击文字获取标题弹出层内容信息" src="images/smallc4a109ba30e5ad520220859b9a9380b9.jpg"><span>jquery 弹出层插件</span></a></li>
<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息"><img width="150" height="150" alt="jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息" src="images/smallbe959f01665246fc4828281158aba316.jpg"><span>jquery 图片提示</span></a></li>
<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示"><img width="150" height="150" alt="jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示" src="images/smalldf2a7d77f20d55bca26a8328bd8647ae.jpg"><span>jquery 滚动条插件</span></a></li>
<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效"><img width="150" height="150" alt="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效" src="images/small3a1184db401138d6443a1b5f42cb289b.jpg"><span>jquery 图片特效</span></a></li>
<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本"><img width="150" height="150" alt="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本" src="images/small939eec7e10f99c541febcef39202b308.jpg"><span>jquery 信息提示框</span></a></li>
<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动"><img width="150" height="150" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/small99c04eb3c2092522c82fda8a5e9245b5.jpg"><span>jquery 文字滚动大全</span></a></li>
</ul>
</div>
<div id="next" class="f-r scrollbtn"></div>
</div><!--scrollbox end-->
</div><!--focus end-->
