本文实例讲述了jQuery横向擦除焦点图特效。分享给大家供大家参考。具体如下：
迅雷jQuery横向擦除焦点图是一款基于jQuery实现的7屏横向擦除焦点图代码，有缩略图和标题，可以自定义标题。
运行效果图：-------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
（1）在head区域引入CSS样式：
<link href="https://www.jb51.net/css/zzsc.css">
（2）js代码放在文档最底端：
<script type="text/javascript" src="https://www.jb51.net/js/jquery.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ $(".guidelist li").hover( function () { $(this).attr("class", "mouseon"); }, function () { $(this).attr("class", "mouseout"); } ); $(".ftoollist li").mouseover(function(){ $(this).siblings().removeClass("on"); $(this).addClass("on"); var preNumber=$(this).prevAll().size(); $(".fimglist li").removeClass("onpre"); $(".fimglist li:nth-child("+preNumber+")").addClass("onpre"); var margin = 990; margin = margin *preNumber; margin = margin * -1; $(".fimglist").stop().animate({marginLeft: margin + "px"}, {duration: 500}); }); }); </script>
为大家分享的jQuery横向擦除焦点图特效代码如下
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>迅雷jQuery横向擦除焦点图</title> <link href="https://www.jb51.net/css/zzsc.css"> <base target="_blank"> </head> <body> <!-- 代码 开始 --><br /><br /> <div> <div> <div> <ul> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/Gintama.jpg" title="素材"></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/SteinsGate.jpg" title="素材"></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/Unicorn.jpg" title="素材"></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/Berserk.jpg" title="素材"></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/SummerWars.jpg" title="素材"></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/akito.jpg" title=" 素材"></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/EVA.jpg" title="素 材"></a></li> </ul> </div> <div> <ul><!--通过控制该ul的left值来实现列表的左右移动，增量为 931px--> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/Gintama_s.jpg"><p>银魂剧场版</p><p>永远的万 事屋</p></a></li><!--当前项时为该li添加class: on--> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/SteinsGate_s.jpg"><p>石头门剧场版</p><p>负 荷领域的既视感</p></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/Unicorn_s.jpg"><p>高达UC</p><p>Gundam Unicorn</p></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/Berserk_s.jpg"><p>剑风传奇</p><p>黄金时代</p></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/SummerWars_s.jpg"><p>夏日大作战</p><p>Summer Wars</p></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/akito_s.jpg"><p>亡国的阿基德</p><p>Code Geass</p></a></li> <li><a href="https://www.jb51.net/jiaoben/"><img src="https://www.jb51.net/images/EVA_s.jpg"><p>新EVA剧场版</p><p>New Evangelion</p></a></li> </ul> </div> <a href="javascript://" target="_self">上一页 </a> <a href="javascript://" target="_self">下一页 </a> </div> </div> <script type="text/javascript" src="https://www.jb51.net/js/jquery.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ $(".guidelist li").hover( function () { $(this).attr("class", "mouseon"); }, function () { $(this).attr("class", "mouseout"); } ); $(".ftoollist li").mouseover(function(){ $(this).siblings().removeClass("on"); $(this).addClass("on"); var preNumber=$(this).prevAll().size(); $(".fimglist li").removeClass("onpre"); $(".fimglist li:nth-child("+preNumber+")").addClass("onpre"); var margin = 990; margin = margin *preNumber; margin = margin * -1; $(".fimglist").stop().animate({marginLeft: margin + "px"}, {duration: 500}); }); }); </script> <!-- 代码 结束 --> </div> </body> </html>
以上就是为大家分享的迅雷jQuery横向擦除焦点图特效代码，希望大家可以喜欢，并应用到实践中。
您可能感兴趣的文章: