jquery卡片式焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery卡片式焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
    <title>jquery卡片式焦点图</title>
    <link href="css/goodnav.css" rel="stylesheet" />
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.litenav.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div id="hotpic">
        <div id="NewsPic">
            <a target="_blank" href="#" style="visibility: visible; display: block;">
                <img width="368px" height="184px" src="images/1.jpg" class="Picture" alt="测试用图片" title="第1张图片的说明文字" /></a>
            <a style="visibility: hidden; display: none;" target="_blank" href="#">
                <img class="Picture" src="images/2.jpg" style="width: 368px; height: 184px;" alt="测试用图片" title="第2张图片的说明文字" /></a>
            <a style="visibility: hidden; display: none;" target="_blank" href="#">
                <img class="Picture" src="images/3.jpg" style="width: 368px; height: 184px;" alt="测试用图片" title="第3张图片的说明文字" /></a>
            <a style="visibility: hidden; display: none;" target="_blank" href="#">
                <img class="Picture" src="images/4.jpg" style="width: 368px; height: 184px;" alt="测试用图片" title="第4张图片的说明文字" /></a>
            <a style="visibility: hidden; display: none;" target="_blank" href="#">
                <img width="368px" height="184px" src="images/5.jpg" class="Picture" alt="测试用图片" title="第5张图片的说明文字" /></a>
            <a style="visibility: hidden; display: none;" target="_blank" href="#">
                <img width="368px" height="184px" src="images/6.jpg" class="Picture" alt="测试用图片" title="第6张图片的说明文字" /></a>
            <a style="visibility: hidden; display: none;" target="_blank" href="#">
                <img class="Picture" src="images/7.jpg" style="width: 368px; height: 184px;" alt="测试用图片" title="第7张图片的说明文字" /></a>
            <div class="Nav">
                <span class="Normal">7</span>
                <span class="Normal">6</span>
                <span class="Normal">5</span>
                <span class="Normal">4</span>
                <span class="Normal">3</span>
                <span class="Normal">2</span>
                <span class="Cur">1</span>
            </div>
        </div>
        <div id="NewsPicTxt" style="width: 370px; overflow: hidden"><a target="_blank" href="#">第1张图片的说明文字</a></div>
    </div>
    <script type="text/javascript">
        $('#hotpic').liteNav(1000);
    </script>
</body>
</html>

JS代码(jquery.litenav.js):

;
	(function ($){
	$.fn.extend({
	"liteNav":function (t){
	var $this = $(this),i = 0,$pics = $('#NewsPic'),autoChange = function (){
	var $currentPic = $pics.find('a:eq(' + (i + 1 === 7 ? 0:i + 1) + ')');
	$currentPic.css({
	visibility:'visible',display:'block'}
).siblings('a').css({
	visibility:'hidden',display:'none'}
);
	$pics.find('.Nav>span:contains(' + (i + 2 > 7 ? 7 - i:i + 2) + ')').attr('class','Cur').siblings('span').attr('class','Normal');
	$('#NewsPicTxt').html('<a target="_blank" href="' + $currentPic[0].href + '">' + $currentPic.find('img').attr('title') + '</a>');
	i = i + 1 === 7 ? 0:i + 1;
}
,st = setInterval(autoChange,t || 2000);
	$this.hover(function (){
	clearInterval(st);
}
,function (){
	st = setInterval(autoChange,t || 2000)}
);
	$pics.find('.Nav>span').click(function (){
	i = parseInt($(this).text(),10) - 2;
	autoChange();
}
);
}
}
);
}
(jQuery));

CSS代码(goodnav.css):

img{vertical-align:top;border:0;}
#hotpic{width:370px;height:228px;overflow:hidden;margin:0 auto;}
#NewsPic{position:relative;width:368px;height:184px;overflow:hidden;border:solid 1px #000;}
#NewsPic a{overflow:visible;border:0;text-decoration:none;}
#NewsPic .Picture{position:absolute;left:0;top:0;}
#NewsPic .Nav{position:absolute;height:13px;line-height:14px;bottom:0;right:0;}
#NewsPic .Nav span{font-size:12px;font-weight:400;color:#FFF;float:right;display:block;width:24px;text-align:center;background:#000;border-left:solid 1px #FFF;cursor:pointer;}
#NewsPic .Nav span.Normal{color:#FFF;background:#000;filter:Alpha(opacity=50);opacity:.5;}
#NewsPic .Nav span.Cur{background:#ce0609;color:#FFF;}
#NewsPicTxt{position:relative;width:380px;height:22px;border:1px;margin:0;padding-top:4px;text-align:center;font-family:Sans-Serif;font-weight:700;color:#000;font-size:14px;margin-left:auto;margin-right:auto;margin-top:3px;}
#NewsPicTxt a:link,#NewsPicTxt a:visited{font-family:"Microsoft Yahei";font-size:16px;font-weight:700;color:#000;text-decoration:none;}
#NewsPicTxt a:hover{color:red;}

附件:下载该文件资源,减少时间成本(增值服务)