基于jQuery编写的横向自适应幻灯片切换特效

最新推荐文章于 2021-02-13 17:01:58 发布

weixin_30639719

最新推荐文章于 2021-02-13 17:01:58 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/heyoung/p/3218747.html

本文提供了一个全屏自适应的jQuery焦点图切换特效实现方式，包括兼容IE6在内的多种浏览器支持，以及详细的代码解析。通过实例演示了如何使用jQuery轻松创建响应式的幻灯片切换效果。

基于jQuery编写的横向自适应幻灯片切换特效

全屏自适应jquery焦点图切换特效，在IE6这个蛋疼的浏览器兼容性问题上得到了和谐，兼容IE6。

适用浏览器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

相关代码：

 1 <script type="text/javascript">
 2 jQuery(".fullSlide").hover(function() {
 3     jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
 4 },
 5 function() {
 6     jQuery(this).find(".prev,.next").fadeOut()
 7 });
 8 jQuery(".fullSlide").slide({
 9     titCell: ".hd ul",
10     mainCell: ".bd ul",
11     effect: "fold",
12     autoPlay: true,
13     autoPage: true,
14     trigger: "click",
15     startFun: function(i) {
16         var curLi = jQuery(".fullSlide .bd li").eq(i);
17         if ( !! curLi.attr("_src")) {
18             curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
19         }
20     }
21 });
22 </script>