非常适合商品宣传的jquery幻灯切换特效

发布时间：2014-07-12 15:44:40　来源/作者：学技巧网页制作　分类：图片特效阅读：0次点评一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>非常适合商品宣传的jquery幻灯切换特效</title> <script src="http://www.xuejiqiao.com/demo/4/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var currentIndex = 0; var DEMO; //函数对象 var currentID = 0; //取得鼠标下方的对象ID var pictureID = 0; //索引ID $("#ifocus_piclist li").eq(0).show(); //默认 autoScroll(); $("#ifocus_btn li").hover(function() { StopScrolll(); $("#ifocus_btn li").removeClass("current")//所有的li去掉当前的样式加上正常的样式 $(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式 currentID = $(this).attr("id"); //取当前元素的ID pictureID = currentID.substring(currentID.length - 1); //取最后一个字符 $("#ifocus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示 $("#ifocus_piclist li").not($("#ifocus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏 $("#ifocus_tx li").hide(); $("#ifocus_tx li").eq(pictureID).show(); }, function() { //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步 currentID = $(this).attr("id"); //取当前元素的ID pictureID = currentID.substring(currentID.length - 1); //取最后一个字符 currentIndex = pictureID; autoScroll(); }); //自动滚动 function autoScroll() { $("#ifocus_btn li:last").removeClass("current"); $("#ifocus_tx li:last").hide(); $("#ifocus_btn li").eq(currentIndex).addClass("current"); $("#ifocus_btn li").eq(currentIndex - 1).removeClass("current"); $("#ifocus_tx li").eq(currentIndex).show(); $("#ifocus_tx li").eq(currentIndex - 1).hide(); $("#ifocus_piclist li").eq(currentIndex).fadeIn("slow"); $("#ifocus_piclist li").eq(currentIndex - 1).hide(); currentIndex++; currentIndex = currentIndex >= 4 ? 0 : currentIndex; DEMO = setTimeout(autoScroll, 2000); } function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动 { clearTimeout(DEMO); } }); </script> </head> <body> <style>body {text-align: center;margin:0;padding:0;background: #FFF;font-size:12px;color:#353535;font-family: "宋体";} div,form,img,ul,ol,li,dl,dt,dd,label {margin: 0; padding: 0; border: 0;} table,td,tr,th{font-size:12px;} h1,h2,h3,h4,h5,h6{margin:0; padding:0;} img{border:0;} li{list-style-type:none;} /*-------------------------------------------------------*/ /*****首页FLASH图片切换*****/ #ifocus { width:689px; height:244px;border:1px solid #DEDEDE; background:#F8F8F8;} #ifocus_pic { display:inline; position:relative;float:left;width:570px; height:225px; overflow:hidden; margin:10px 0 0 10px; } #ifocus_piclist { position:absolute; } #ifocus_piclist li { width:570px; height:225px; overflow:hidden; display:none} #ifocus_piclist img { width:570px; height:225px;} #ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0;} #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; } #ifocus_btn .current { background: url(ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); } #ifocus_opdiv { position:absolute; left:0; bottom:0; width:570px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; } #ifocus_tx .normal { display:none; } </style> <div id="confirm"></div>  <div class="content1"> <div class="top"></div> <div class="main cl">  <div class="l_flash_pic"> <div id="ifocus"> <div id="ifocus_pic"> <div id="ifocus_piclist" style="left:0; top:0;"> <ul> <li><a href="XiaoYuan.htm" target="_blank"><img src="http://www.xuejiqiao.com/demo/4/02.jpg" alt="校园模特招聘" /></a></li> <li><a href="http://www.xuejiqiao.com/" target="_blank"><img src="http://www.xuejiqiao.com/demo/4/02.jpg" alt="学技巧网站制作" /></a></li> <li><a href="http://www.xuejiqiao.com/" target="_blank"><img src="http://www.xuejiqiao.com/demo/4/02.jpg" alt="dedecms模板" /></a></li> <li><a href="http://www.xuejiqiao.com/" target="_blank"><img src="http://www.xuejiqiao.com/demo/4/02.jpg" alt="网页模板" /></a></li> </ul> </div> <div id="ifocus_opdiv"></div> <div id="ifocus_tx"> <ul> <li class="current">校园模特招聘</li> <li class="normal">焦点图 b2</li> <li class="normal">焦点图 c3</li> <li class="normal">焦点图 d4</li> </ul> </div> </div> <div id="ifocus_btn"> <ul> <li class="current" id="p0"><img src="http://www.xuejiqiao.com/demo/4/02.jpg" alt="" /></li> <li id="p1"><img src="http://www.xuejiqiao.com/demo/4/02.jpg" alt="" /></li> <li id="p2"><img src="http://www.xuejiqiao.com/demo/4/02.jpg" alt="" /></li> <li id="p3"><img src="http://www.xuejiqiao.com/demo/4/02.jpg" alt="" /></li> </ul> </div> </div> </div>  </div> </div>  </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

这一款jquery幻灯切换特效，适用与服装广告宣传等特效源码。

如果运行代码没有效果，请点击下列链接进行预览：

http://www.xuejiqiao.com/demo/4/

特效下载地址

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！