1顶

jquery+css实现宽屏焦点图切换特效

稿源：互联网 2022-04-02 21:40:38 点击： 5099 撤稿纠错

jquery+css实现焦点图定时切换显示特效，右下角带左右按钮和编号。

以下讨论的是和焦点图图片切换相关的jquery+css实现宽屏焦点图切换特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" />
<title>网页特效 jquery+css实现的宽屏焦点图切换特效 站长特效网</title>
<style type=text/css>
BODY {
 LINE-HEIGHT: 1.5; FONT-FAMILY: Tahoma, Helvetica, Arial, sans-serif; COLOR: #333333; FONT-SIZE: 12px
}
A {
 COLOR: #333; TEXT-DECORATION: none
}
A:hover {
 TEXT-DECORATION: underline
}
.zzjs {
 POSITION: relative; WIDTH: 960px; HEIGHT: 315px;
 margin:0 auto;
}
.nav_zzjs {
 BACKGROUND: url(/img/nav_zzjs.png) no-repeat
}
.prevBtn {
 BACKGROUND: url(/img/nav_zzjs.png) no-repeat
}
.nextBtn {
 BACKGROUND: url(/img/nav_zzjs.png) no-repeat
}
.imgSelected {
 BACKGROUND: url(/img/nav_zzjs.png) no-repeat
}
.nav_zzjs {
 POSITION: absolute; WIDTH: 125px; BOTTOM: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 30px; RIGHT: 10px; FONT-WEIGHT: bold
}
.nav_zzjs A {
 TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 25px; FLOAT: left; VERTICAL-ALIGN: middle
}
.prevBtn {
 DISPLAY: block; BACKGROUND-POSITION: 0px -30px; HEIGHT: 30px
}
.nextBtn {
 DISPLAY: block; BACKGROUND-POSITION: -100px -30px; HEIGHT: 30px
}
.imgSelected {
 BACKGROUND-POSITION: 1px -60px; COLOR: #000
}
</style>
<SCRIPT type=text/javascript src="/img/jquery_zzjs.js"></SCRIPT>
<SCRIPT type=text/javascript>
//<![CDATA[
$(function() {
    (function() {
        var curr = 0;
        $("#nav_zzjs .trigger").each(function(i) {
            $(this).click(function() {
                curr = i;
                $("#zzjs img").eq(i).fadeIn("slow").siblings("img").hide();
                $(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
                return false;
            });
        });
var pg = function(flag) {
//flag:true表示前翻， false表示后翻
            if (flag) {
                if (curr == 0) {
                    todo = 2;
                } else {
                    todo = (curr - 1) % 3;
                }
            } else {
                todo = (curr + 1) % 3;
            }
            $("#nav_zzjs .trigger").eq(todo).click();
        };
//前翻欢迎来到站z长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
        $("#prev").click(function() {
           pg(true);
           return false;
       });
//后翻欢迎来到站长特z效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
        $("#next").click(function() {
            pg(false);
            return false;
        });
//自动翻
        var timer = setInterval(function() {
            todo = (curr + 1) % 3;
            $("#nav_zzjs .trigger").eq(todo).click();
        }, 4000);
//鼠标悬停在触发器上时停止自动翻
        $("#nav_zzjs a").hover(function() {
            clearInterval(timer);
        },
function() {
   timer = setInterval(function() {
       todo = (curr + 1) % 3;
       $("#nav_zzjs .trigger").eq(todo).click();
   }, 1500);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
);
})();
});
//]]>
</SCRIPT>
</head>
<body style="text-align:center">
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<span style="color:#FF0000">需要加载js文件，请刷新页面后看效果。</span>
<DIV id=zzjs class="zzjs"><IMG src="/img/01_20110118zzjs_net.jpg"> <IMG style="DISPLAY: none" src="/img/02_20110118zzjs_net.jpg"> <IMG style="DISPLAY: none" src="/img/03_20110118zzjs_net.jpg">
<DIV id=nav_zzjs class=nav_zzjs><A id=prev class=prevBtn href="javascript:void(0)"></A><A class="trigger imgSelected" href="javascript:void(0)">1</A><A class=trigger href="javascript:void(0)">2</A><A class=trigger href="javascript:void(0)">3</A><A id=next class=nextBtn href="javascript:void(0)"></A></DIV></DIV>
</body>
</html>

关于jquery+css实现宽屏焦点图切换特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011011966900.shtml方便下次再访问哦。

·上一篇： 三屏js+flash焦点图切换效果
·下一篇： flash+xml焦点图立体切换效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

jquery+css实现宽屏焦点图切换特效

文章分类LIST >>返回首页

最新游戏

最新新闻