特效描述:图片滚动 提示弹出层。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-->