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=utf-8" />
<title>jQuery带缩略图横向滚动切换代码</title>
<link href="css/wkct.css" rel="stylesheet" />
</head>
<body>
<div class="ct-banner">
    <div class="ct-focusbox">         
        <div class="ct-focusimg ">
            <ul class="ct-fimglist clearfix">
                <li class="ct-banner01"></li>
                <li class="ct-banner02"></li>
                <li class="ct-banner03"></li>
                <li class="ct-banner04"></li>
            </ul>
        </div> 
        <div class="ct-focustool w1000">
            <ul class="ct-ftoollist clearfix">
                <li class="on"><a href="#"><img src="images/ct-banner01_s.jpg"></a></li>
                <li><a href="#"><img src="images/ct-banner02_s.jpg"></a></li>
                <li><a href="#"><img src="images/ct-banner03_s.jpg"></a></li>
                <li><a href="#"><img src="images/ct-banner04_s.jpg"></a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/wkct-js.js"></script>
</body>
</html>

JS代码(wkct-js.js):

/** 焦点图轮播* 禁止更换JQuery运行空间！！！！*/
$(document).ready(function($){
	var windowWidth = $(window).width();
	$(".ct-fimglist").width(windowWidth * 4);
	$(".ct-fimglist li").width(windowWidth);
	$(".ct-ftoollist li").mouseover(function(){
	$(this).siblings().removeClass("on");
	$(this).addClass("on");
	var preNumber=$(this).prevAll().size();
	$(".ct-fimglist li").removeClass("onpre");
	$(".ct-fimglist li:nth-child("+preNumber+")").addClass("onpre");
	var margin = windowWidth;
	margin = margin *preNumber;
	margin = margin * -1;
	$(".ct-fimglist").stop().animate({
	marginLeft:margin + "px"}
,{
	duration:500}
);
}
);
}
);

CSS代码(wkct.css):

@charset "utf-8";/* CSS Document */
body{color:#3c3c3c;background:#fff;font:100 12px/18px "宋体";}
html,body{_margin:0;_height:100%;/*IE6 BUG*/
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,table,th,td,iframe{margin:0;padding:0;font-size:12px;}
h1,h2,h3,h4,h5,h6{font-size:14px;}
ul,ol,li,dl,dt,dd{list-style-type:none}
img,object{border:0;vertical-align:middle;}
img,input{border:medium none;}
a{blr:expression(this.onFocus=this.blur());outline:none;cursor:pointer;color:#666;text-decoration:none;}
/*a:hover{color:#ff6600;text-decoration:none;}
*/
input{vertical-align:middle;}
em{font-style:normal;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.clear{height:0px;line-height:0px;clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
*+html .clearfix{overflow:hidden;}
* html .clearfix{height:1%;}
.f-cb{*zoom:1;}
.wk_show{display:block;}
.wk_hide{display:none;}
.positionR{position:relative !important;zoom:1;}
.positionA{position:absolute;}
.f-lay{font-size:0;letter-spacing:-8px;text-align:left;}
.f-ib{display:inline-block;*display:inline;*zoom:1;vertical-align:top;font-size:12px;letter-spacing:normal;}
/* font */
.w1000{width:1000px !important;margin:0 auto;}
/*main*/
.ct-banner{width:100%;height:426px;margin:0 auto;overflow:hidden;}
.ct-focusbox{height:426px;position:relative;overflow:hidden;}
.ct-focusimg{height:426px;overflow:hidden;}
.ct-fimglist{position:relative;}
.ct-fimglist img{display:block;cursor:pointer;}
.ct-fimglist li{width:100%;height:426px;float:left;}
.ct-banner01{background:url(../images/ct-banner01.png) center;}
.ct-banner02{background:url(../images/ct-banner02.png) center;}
.ct-banner03{background:url(../images/ct-banner03.png) center;}
.ct-banner04{background:url(../images/ct-banner04.png) center;}
.ct-focustool{overflow:hidden;position:relative;top:-97px;height:97px;background:url(../images/bg_touming.png) repeat-x;}
.ct-ftoollist{position:relative;margin-left:220px;}
.ct-ftoollist li{width:121px;height:54px;float:left;cursor:pointer;margin-left:10px;margin-top:21px;}
.ct-ftoollist .on a{width:121px;height:54px;display:block;margin-right:-4px;z-index:100;top:-5px;border:2px solid #FFF;}

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