带缩略图的焦点图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" />
    <meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为带缩略图的焦点图JQuery展示效果" />
    <title>带缩略图的焦点图JQuery展示效果</title>
    <link href="css/foucsbox.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/foucsbox.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div id="foucsBox">
        <ul class="imgCon">
            <!--展示图片开始-->
            <li><a href="#" target="_blank">
                <img width="680" height="380" src="images/1.jpg" /></a>
                <div class="imgTitle"><a href="#" target="_blank">第1张图片标题显示在这里</a></div>
                <div class="showPage"></div>
            </li>
            <li><a href="#" target="_blank">
                <img width="680" height="380" src="images/2.jpg" /></a>
                <div class="imgTitle"><a href="#" target="_blank">第2张图片标题显示在这里</a></div>
                <div class="showPage"></div>
            </li>
            <li><a href="#" target="_blank">
                <img width="680" height="380" src="images/3.jpg" /></a>
                <div class="imgTitle"><a href="#" target="_blank">第3张图片标题显示在这里</a></div>
                <div class="showPage"></div>
            </li>
            <li><a href="#" target="_blank">
                <img width="680" height="380" src="images/4.jpg" /></a>
                <div class="imgTitle"><a href="#" target="_blank">第4张图片标题显示在这里</a></div>
                <div class="showPage"></div>
            </li>
            <!--展示图片结束-->
        </ul>
        <div class="foucs"></div>
        <div class="rBtn foucsButton">
            <span></span>
            <img />
        </div>
        <div class="lBtn foucsButton">
            <span></span>
            <img />
        </div>
    </div>
</body>
</html>

JS代码(foucsbox.js):

$(function (){
	var lmk123 ={
	com:function (con){
	var t,imgArr = [],$lmk = $('#foucsBox'),$imgUl = $lmk.find('ul.imgCon'),$titleDiv = $lmk.find('div.showTitle'),$foucsDiv = $lmk.find('div.foucs'),$rlBtn = $lmk.find('.foucsButton'),$rBtn = $lmk.find('.rBtn'),$lBtn = $lmk.find('.lBtn'),config ={
	len:$imgUl.find('li').length,//自动滚动时间，默认两千毫秒（一秒等于一千毫秒） timeo:2000,//宽，默认680px wid:680,//高，默认380px hei:380}
,i = 0,autoChange = function (){
	$imgUl.animate({
	marginLeft:'-' + i * config.wid + 'px'}
,function (){
	$foucsDiv.find('span:eq(' + i + ')').addClass('f').siblings().removeClass('f');
	$rBtn.find('img').replaceWith(imgArr[(i === config.len - 1) ? 0:(i + 1)]);
	$lBtn.find('img').length !== 0 ? $lBtn.find('img:eq(0)').replaceWith(imgArr[(i === 0) ? (config.len - 1):(i - 1)]):$lBtn.append(imgArr[(i === 0) ? (config.len - 1):(i - 1)]);
	i += 1;
	i = i === config.len ? 0:i;
}
);
}
;
	$imgUl.find('img').each(function (inde,ele){
	imgArr[inde] = new Image();
	imgArr[inde].src = $(this).attr('src');
}
);
	$imgUl.css('width',config.len * config.wid);
	$foucsDiv.html(function (){
	var i,s = '';
	for (i = 0;
	i < config.len;
	i += 1){
	s += '<span ' + (i === 0 ? 'class="f"':'') + '></span>';
}
return s;
}
);
	$rBtn.find('img').replaceWith(imgArr[(i === config.len - 1) ? 0:(i + 1)]);
	$lBtn.find('img').length !== 0 ? $lBtn.find('img:eq(0)').replaceWith(imgArr[(i === 0) ? (config.len - 1):(i - 1)]):$lBtn.append(imgArr[(i === 0) ? (config.len - 1):(i - 1)]);
	t = setInterval(autoChange,config.timeo);
	$lmk.mouseenter(function (){
	clearInterval(t);
}
).mouseleave(function (){
	t = setInterval(autoChange,config.timeo);
}
);
	$rlBtn.hover(function (){
	$(this).addClass('btnHover');
}
,function (){
	$(this).removeClass('btnHover');
}
).click(function (){
	i = $foucsDiv.find('span.f').index();
	if ($(this).is('.lBtn')){
	i = (i === 0) ? (config.len - 1):(i - 1);
}
else{
	i = (i === config.len - 1) ? 0:(i + 1);
}
autoChange();
}
);
	$foucsDiv.find('span').click(function (){
	i = $(this).index();
	autoChange();
}
);
}
}
;
	//执行开始 lmk123.com();
}
);

CSS代码(foucsbox.css):

#foucsBox{margin:0 auto;padding:0;width:680px;height:380px;overflow:hidden;zoom:1;position:relative;}
#foucsBox .imgCon{width:680px;height:380px;margin:0;padding:0;position:relative;list-style:none;}
#foucsBox .imgCon li{float:left;width:680px;height:380px;}
#foucsBox .imgCon li img{border:0;}
#foucsBox .imgCon li .imgTitle{width:680px;position:absolute;bottom:35px;text-align:center;z-index:2;}
#foucsBox .imgCon li .imgTitle a{color:#fff;display:block;text-decoration:none;font-family:"Microsoft Yahei","黑体";font-weight:normal;font-size:18px;zoom:1;}
#foucsBox .showPage{width:680px;height:70px;position:absolute;bottom:0;background:#000;opacity:0.7;filter:alpha(opacity=70);z-index:1;}
#foucsBox .foucs{width:680px;height:22px;position:absolute;bottom:3px;text-align:center;z-index:3;}
#foucsBox .foucs span{display:inline-block;width:7px;height:7px;margin:0 5px;line-height:0;font-size:0;background:url(../images/bg.png) -160px -90px no-repeat;cursor:pointer;overflow:hidden;}
#foucsBox .foucs span.f{background:url(../images/bg.png) -170px -90px no-repeat;}
#foucsBox .foucsButton{width:40px;height:56px;padding:7px;margin-top:-70px;position:relative;z-index:4;}
#foucsBox .foucsButton span{display:inline;width:23px;height:45px;margin:7px 5px 0;cursor:pointer;overflow:hidden;background:url(../images/bg.png) 0 0 no-repeat;}
#foucsBox .foucsButton img{display:none;cursor:pointer;border-width:0px;vertical-align:middle;width:100px;height:56px;}
#foucsBox .lBtn{float:left;}
#foucsBox .lBtn span{float:left;background-position:0 -90px;}
#foucsBox .rBtn{float:right;}
#foucsBox .rBtn span{float:right;background-position:-30px -90px;}
#foucsBox .btnHover{width:146px;background:#408ED6;overflow:hidden;}
#foucsBox .btnHover img{display:inline;}

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