jQ索引按钮+缩略图双重切换轮播滚动特效代码

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

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

以下是 jQ索引按钮+缩略图双重切换轮播滚动特效代码的示例演示效果:

当前平台(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 rel="stylesheet" type="text/css" href="css/zzsc.css" />
</head>
<body>
<div class="contentall">
	<div class="IndexContentBox" id="IndexContentBox">
		<div class="IndexContent" id="IndexContent">
			<div class="IndexContentMain" style="width:1008px; overflow:hidden;">
				<p class="M_lifevc_1"></p>
				<div class="I_Colorpiece_nr">
					<div class="indexBanner">
						<div id="indexBannerdatouwang" class="datouwang">
							<ul class="imgList">
								<li>
								<a target="_blank" href="#">
								<img src="images/1.jpg" width="1000" height="490" />
								</a></li>
								<li>
								<a target="_blank" href="#">
								<img src="images/2.jpg" src="images/loadPic.gif" width="1000" height="490" />
								</a></li>
								<li>
								<a target="_blank" href="#">
								<img loadsrc="images/3.jpg" src="images/loadPic.gif" width="1000" height="490" />
								</a></li>
								<li>
								<a target="_blank" href="#">
								<img loadsrc="images/4.jpg" src="images/loadPic.gif" width="1000" height="490" />
								</a></li>
								<li>
								<a target="_blank" href="#">
								<img loadsrc="images/5.jpg" src="images/loadPic.gif" width="1000" height="490" />
								</a></li>
								<li>
								<a target="_blank" href="#">
								<img loadsrc="images/6.jpg" src="images/loadPic.gif" width="1000" height="490" />
								</a></li>
								<li>
								<a target="_blank" href="#">
								<img loadsrc="images/7.jpg" src="images/loadPic.gif" width="1000" height="490" />
								</a></li>
							</ul>
							<div class="btnList" id="btnList">
								<div class="BtnimgList">
									<a href="javascript:void(0);">
									<img loadsrc="images/1_1.jpg" src="images/loadPic.gif" width="100" height="51" /></a>
									<a href="javascript:void(0);">
									<img loadsrc="images/2_2.jpg" src="images/loadPic.gif" width="100" height="51" /></a>
									<a href="javascript:void(0);">
									<img loadsrc="images/3_3.jpg" src="images/loadPic.gif" width="100" height="51" /></a>
									<a href="javascript:void(0);">
									<img loadsrc="images/4_4.jpg" src="images/loadPic.gif" width="100" height="51" /></a>
									<a href="javascript:void(0);">
									<img loadsrc="images/5_5.jpg" src="images/loadPic.gif" width="100" height="51" /></a>
									<a href="javascript:void(0);">
									<img loadsrc="images/6_6.jpg" src="images/loadPic.gif" width="100" height="51" /></a>
									<a href="javascript:void(0);">
									<img loadsrc="images/7_7.jpg" src="images/loadPic.gif" width="100" height="51" /></a>
								</div>
							</div>
							<div class="numList" id="numList">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
<script type="text/javascript">


(function() {
    var maxShowedBanner = 1, currentBanner = 1,
        maxBannerNum = 7, datouwang = $(".indexBanner"),
        bsObj, bannerShelf, replaceStart = false, replaced = false;

    Common.AjaxCombiner.addCall({ type: "GET", url: "GetFirstShelf",
        success: function(result){
            bannerShelf = result ? result : "hot";
            Common.PubSub.publish("UserStat/Shelf", { shelf: bannerShelf });
            datouwang.trigger("cust:replace");
        }
    });

    $(function () {
        datouwang.bannerSlider({
            arrow:true,
            bannerHover:function () {
                maxShowedBanner = maxBannerNum;
            },
            beforeSlideTo : function (bannerIndex) {
                currentBanner = bannerIndex;
                maxShowedBanner = currentBanner > maxShowedBanner ? currentBanner : maxShowedBanner;
                if (replaceStart || maxShowedBanner >= maxBannerNum || bannerShelf !== "hot") {
                    return;
                }
                datouwang.trigger("cust:replace");
            }
        });
        bsObj = datouwang.data("bannerSlider");
    });
 }());

    $(function () {
        var sideBar = $("#sideBarContainer"),
            cartNote = sideBar.find('#shoppingCart_sidebar .pubCartNote');
        sideBar.sideBar({
            startTop:270
        });
        if (cartDialog) {
            cartDialog.init("#shoppingCart_sidebar");
        }
        Common.PubSub.subscribe("shoppingCart/ItemNumUpdate", function (data) {
            cartNote.removeClass("hide").html(data.cartItemNumStr);
        });
    });

</script>
</body>
</html>

JS代码(zzsc.js):

window.Common=window.Common||{
}
;
	(function(a,e,f,i,h){
	e.TriggerOn={
	onReady:"ready",onLoad:"load",onAdd:"add"}
;
	var b={
	type:"GET",dataType:"json",url:"/svc/q",beforeSend:h,error:h,success:h}
;
	var c={
	url:"url",data:"args"}
;
	var d=["success","error","complete"];
	e.init=function(j){
	var k=this;
	k.settings=a.extend(true,{
}
,b,j);
	k.inited=true;
	a(function(){
	k.invoke(e.TriggerOn.onReady)}
);
	a(i).load(function(){
	k.invoke(e.TriggerOn.onLoad)}
)}
;
	e.addCall=function(j,l){
	var k=this;
	if(!k.inited){
	k.init()}
if(!l){
	l=e.TriggerOn.onReady}
if(!k.ajaxQueue){
	k.ajaxQueue={
}
}
if(l===e.TriggerOn.onAdd){
	k.ajaxQueue[l]=j;
	k.invoke(e.TriggerOn.onAdd);
	k.ajaxQueue[l]={
}
;
	return}
if(!k.ajaxQueue[l]){
	k.ajaxQueue[l]=j}
else{
	if(a.isArray(k.ajaxQueue[l])){
	k.ajaxQueue[l].push(j)}
else{
	k.ajaxQueue[l]=[k.ajaxQueue[l],j]}
}
}
;
	function g(o){
	var n={
	reqParam:[],resFunc:[]}
;
	if(o){
	var k=0,m=o.length?o.length:1,j=a.isArray(o)?o[k]:o;
	do{
	var p={
}
,q={
}
;
	a.each(c,function(r,s){
	if(!j[r]){
	return true}
if(r==="data"){
	var l=[];
	if(typeof j[r]==="string"){
	j[r].replace(/[?&]*([^=&]+)=([^&]*)/gi,function(v,t,u){
	l.push(u)}
)}
else{
	if(typeof j[r]==="object"){
	a.each(j[r],function(t,u){
	l.push(u)}
)}
}
p[s]=l}
else{
	p[s]=j[r]}
}
);
	p.index=k;
	n.reqParam.push(p);
	a.each(d,function(l,r){
	if(j[r]){
	q[r]=j[r]}
}
);
	q.index=k;
	n.resFunc.push(q);
	k=k+1;
	j=o[k]}
while(j&&k<m)}
return n}
e.invoke=function(m){
	var k=this,l=k.settings;
	if(k.exists(m)){
	var j=g(k.ajaxQueue[m]);
	return a.ajax({
	url:l.url,dataType:l.dataType,type:l.type,data:"args="+f.stringify(j.reqParam)+"&r="+Math.round(Math.random()*10000),beforeSend:function(){
	if(a.isFunction(l.beforeSend)){
	l.beforeSend.apply(k,arguments)}
}
,error:function(p,o,n){
	if(a.isFunction(l.error)){
	l.error.apply(k,arguments)}
}
,success:function(n,o,p){
	if(a.isFunction(l.success)){
	l.success.apply(k,arguments)}
a.each(n,function(r,s){
	var q=j.resFunc[s.index];
	if(q&&s.status===1){
	a.isFunction(q.success)&&q.success.apply(k,[s.data])}
}
)}
}
).done(function(){
	k.remove(m)}
)}
}
;
	e.exists=function(k){
	var j=this;
	if(j.ajaxQueue&&j.ajaxQueue[k]){
	return true}
else{
	return false}
}
;
	e.remove=function(k){
	var j=this;
	if(j.exists(k)){
	j.ajaxQueue[k]=h}
}
;
	a.ajaxEnqueue=function(j){
	e.addCall(j)}
}
)(jQuery,Common.AjaxCombiner=Common.AjaxCombiner||{
}
,JSON,window);
	window.Plugin=window.Plugin||{
}
;
	(function(a,c,l,k){
	var b={
	imgListClass:"ul.imgList",btnListClass:".btnList",imgBtnWrapClass:".BtnimgList",imgBtnWidth:100,imgBtnHeight:51,numBtnCLass:".numList",arrow:false,firstBannerLazyLoad:false,autoPlay:true,autoPlayInterval:5000,bannerHover:k,imgBtnHover:k,beforeSlideTo:k}
;
	var h=function(m){
	var n=a();
	for(var o=1;
	o<=m.bannerNum;
	o++){
	n=n.add("<a href='javascript:void(0);
	'>"+o+"</a>")}
m.numBtnContainer.append(a('<div class="BtnNumWrap"></div>').append(n.eq(m.currentBanner-1).addClass("cur").end()));
	m.numBtnWrap=m.numBtnContainer.find(".BtnNumWrap");
	m.numBtnWrap.animate({
	bottom:(1-(m.bannerContainer.height()-100))+"px"}
);
	m.numBtns=m.numBtnContainer.find("a")}
;
	var g=function(m){
	var o=a(),n=m.bannerContainer.outerHeight()/2-52;
	o=o.add('<div class="pagingArrowWrap prev" style="left:-70px;
	top:'+n+'px"><a class="arrow" data-dir="prev"></a></div>');
	o=o.add('<div class="pagingArrowWrap next" style="right:-70px;
	top:'+n+'px"><a class="arrow" data-dir="next"></a></div>');
	m.bannerContainer.append(o).find("a.arrow").on("click",function(p){
	var q=a(this);
	if(q.data().dir==="prev"){
	m.prevBanner()}
else{
	m.nextBanner()}
}
).hover(function(){
	m.startPlay(false)}
,function(){
	m.startPlay(true)}
);
	m.arrowPrev=m.bannerContainer.find("div.pagingArrowWrap.prev");
	m.arrowNext=m.bannerContainer.find("div.pagingArrowWrap.next")}
;
	var d=function(m){
	m.bannerContainer.hover(function(n){
	if(a(n.target).hasClass("arrow")){
	return false}
m.imgBtnWrap.stop().animate({
	bottom:(1-(m.bannerContainer.height()-78))+"px"}
);
	m.imgBtnWrap.find("img[loadsrc]").each(function(){
	var o=a(this);
	o.attr("src",o.attr("loadsrc")).removeAttr("loadsrc")}
);
	m.numBtnWrap.stop().animate({
	bottom:(1-(m.bannerContainer.height()+78))+"px"}
);
	if(typeof m.settings.bannerHover==="function"){
	m.settings.bannerHover.apply(m,arguments)}
}
,function(){
	m.imgBtnWrap.stop().animate({
	bottom:(1-(m.bannerContainer.height()+100))+"px"}
);
	m.numBtnWrap.stop().animate({
	bottom:(1-(m.bannerContainer.height()-100))+"px"}
)}
)}
;
	var e=function(m){
	m.imgBtns.hover(function(){
	var n=a(this),o;
	if(n.siblings("img").length>0){
	o=n.index()+1}
else{
	o=n.parent().index()+1}
m.slideTo(o);
	if(typeof m.settings.imgBtnHover==="function"){
	m.settings.imgBtnHover.apply(m,arguments)}
}
);
	m.imtBtnContainer.hover(function(){
	m.startPlay(false)}
,function(){
	m.startPlay(true)}
)}
;
	var f=function(m){
	m.bannerContainer.on("scrollin",{
	full:true}
,function(){
	if(m.settings.autoPlay){
	m.startPlay(true)}
}
).on("scrollout",{
	full:true}
,function(){
	if(m.settings.autoPlay){
	m.startPlay(false)}
}
)}
;
	var j=function(m){
	m.autoPlayTimer=setInterval(function(){
	if(m.currentBanner===m.bannerNum){
	m.currentBanner=0;
	m.slideTo(m.currentBanner+1,true)}
else{
	m.slideTo(m.currentBanner+1)}
}
,m.settings.autoPlayInterval)}
;
	var i=function(m,o,n){
	m.banners.slice(o,n).each(function(){
	var p=a(this);
	if(p.attr("loadsrc")){
	p.attr("src",p.attr("loadsrc")).removeAttr("loadsrc")}
}
)}
;
	c.startPlay=function(n){
	var m=this;
	if(n){
	if(!m.autoPlayTimer){
	if(m.settings.autoPlay){
	j(m)}
}
}
else{
	if(m.autoPlayTimer){
	clearInterval(m.autoPlayTimer);
	m.autoPlayTimer=null}
}
}
;
	c.slideTo=function(m,n){
	var p=this,o=p.bannerWidth*(m-1);
	p.imgContainer.stop();
	if(a.isFunction(p.settings.beforeSlideTo)){
	p.settings.beforeSlideTo.apply(p,arguments)}
p.currentBanner=m;
	i(p,p.currentBanner-1,p.currentBanner+1);
	p.imgBtns.removeClass("cur").eq(p.currentBanner-1).addClass("cur");
	p.numBtns.removeClass("cur").eq(p.currentBanner-1).addClass("cur");
	if(n){
	p.imgContainer.animate({
	left:-o}
,10)}
else{
	p.imgContainer.animate({
	left:-o}
)}
}
;
	c.nextBanner=function(){
	var m=this;
	if(m.currentBanner>=m.bannerNum){
	m.slideTo(1,true)}
else{
	m.slideTo(m.currentBanner+1)}
}
;
	c.prevBanner=function(){
	var m=this;
	if(m.currentBanner<=1){
	m.slideTo(m.bannerNum,true)}
else{
	m.slideTo(m.currentBanner-1)}
}
;
	c.init=function(o,m){
	var p=this;
	p.elem=m;
	p.$elem=a(m);
	p.bannerContainer=p.$elem;
	p.settings=a.extend(true,{
}
,b,o);
	p.imgContainer=p.bannerContainer.find(p.settings.imgListClass);
	p.imgBtnWrap=p.bannerContainer.find(p.settings.imgBtnWrapClass);
	p.imtBtnContainer=p.imgBtnWrap.closest(p.settings.btnListClass);
	p.imgBtns=p.imgBtnWrap.find("img");
	p.numBtnContainer=p.bannerContainer.find(p.settings.numBtnCLass).removeClass().addClass("BtnNumList");
	var n=p.imgContainer.find("li");
	p.bannerNum=n.length;
	p.imgBtns.each(function(){
	var q=a(this);
	q.width(p.settings.imgBtnWidth).height(p.settings.imgBtnHeight)}
);
	p.bannerWidth=n.outerWidth(true);
	p.banners=n.find("img");
	p.currentBanner=1;
	if(p.bannerNum<=1){
	return false}
p.bannerContainer.on("scrollin",function(){
	p.bannerContainer.off("scrollin");
	f(p);
	i(p,0,1);
	setTimeout(function(){
	i(p,1,2)}
,p.settings.autoPlayInterval/2)}
);
	p.imgContainer.width(p.bannerNum*p.bannerWidth);
	h(p);
	if(p.settings.arrow&&p.bannerNum>1){
	g(p)}
d(p);
	e(p)}
;
	c.refresh=function(){
	var m=this;
	m.imgBtns=m.imgBtnWrap.find("img");
	m.bannerNum=m.imgBtns.length;
	if(m.currentBanner>m.bannerNum){
	m.currentBanner=m.bannerNum}
m.banners=m.imgContainer.find("li img");
	m.imgContainer.width(m.bannerNum*m.bannerWidth);
	m.numBtnContainer.html("");
	h(m);
	g(m);
	d(m);
	e(m)}
;
	a.fn.bannerSlider=function(m){
	return this.each(function(){
	var n=Object.create(c);
	n.init(a.extend(true,{
}
,a.fn.bannerSlider.defaults,m),this);
	a.data(this,"bannerSlider",n)}
)}
;
	a.fn.bannerSlider.defaults=a.extend(true,{
}
,b)}
)(jQuery,Plugin.BannerSlider=Plugin.BannerSlider||{
}
,window);

CSS代码(zzsc.css):

*{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 \5B8B\4F53,tahoma,arial}
h1,h2,h3,h4,h5,h6{font-size:100%}
ul,ol{list-style:none outside none}
form,img,input{border:none 0}
em,var,address,cite,dfn{font-style:normal}
a:link{color:#333;text-decoration:none;outline:0 none}
a:visited{color:#333;text-decoration:none;outline:0 none}
a:hover{color:#83b842;text-decoration:underline;outline:0 none}
a:active{color:#83b842;text-decoration:none;outline:0 none}
body{background:#fff}
.contentall{width:100%;position:relative}
.IndexContentBox{width:100%;min-height:600px;_height:900px;height:auto!important}
.IndexContent{width:1008px;position:relative;margin:0 auto}
.IndexContentMain{width:1000px;margin-left:auto;margin-right:auto}
.datouwang ul.imgList{position:absolute}
.datouwang ul.imgList li{float:left;width:1000px}
.datouwang ul.imgList li a{text-decoration:none;outline:0;cursor:pointer}
.datouwang div.btnList{width:1000px;height:70px;text-align:center}
.datouwang div.btnList a{padding:2px;position:relative}
.datouwang div.btnList a .ScrollArr{visibility:hidden}
.datouwang div.btnList a.curr{border:2px solid #83b842;padding:0}
.datouwang div.btnList a.curr .ScrollArr{visibility:visible;top:-6px;left:48px}
.IndexProduct{float:left}
.datouwang{position:relative;height:490px;overflow:hidden;float:left}
.datouwang .btnList .cur{border:2px solid #83b842;zoom:1}
.datouwang .btnList img{display:inline}
.datouwang .imgList{text-align:center;width:100%}
.datouwang .numList{position:absolute;right:8px;bottom:10px;z-index:3}
.datouwang .numList a,.datouwang .BtnNumList a{width:20px;height:20px;background:#ccc;text-align:center;display:block;float:left;_display:inline;*zoom:1;margin-right:2px;line-height:20px}
.datouwang .numList a.cur,.datouwang .BtnNumList a.cur{background:#83B842;text-decoration:none;color:#fff}
.datouwang .BtnimgList{display:inline-block;*display:inline;margin-left:auto;margin-right:auto;bottom:-590px;height:60px;position:relative;background:#000;background:url(BtnimgListBj130607.png) repeat-x left center;padding:5px 15px;zoom:1}
.BtnimgList a *{position:relative}
.datouwang .BtnNumList{width:1000px;height:20px;text-align:center}
.datouwang .BtnNumWrap{position:relative;display:inline-block;*display:inline;text-align:center;z-index:3;margin-left:auto;margin-right:auto;bottom:-390px;zoom:1}
.indexBanner{height:490px;width:1000px;overflow:hidden;background-color:#fff}
.pagesliderWrap{clear:both;position:relative}
.pagingArrowWrap{width:22px;height:65px;position:absolute;text-align:center}
.pagingArrowWrap.prev{left:0}
.pagingArrowWrap.next{right:0}
.pagingArrowWrap .arrow{height:45px;display:block;cursor:pointer}
.pagingArrowWrap.prev .arrow{background:url(btnPrevbg.gif) no-repeat}
.pagingArrowWrap.next .arrow{background:url(btnNextbg.gif) no-repeat}
.pagingArrowWrap .pagingCount{height:18px;line-height:16px;text-align:center;width:22px}
.indexBanner .pagingArrowWrap{width:55px;height:73px}
.indexBanner .pagingArrowWrap .arrow,.indexBanner .pagingArrowWrap .arrow:hover{height:73px;background:url(icon_hmBannerArrow130607.png) no-repeat}
.indexBanner .pagingArrowWrap.prev .arrow{background-position:0 -120px}
.indexBanner .pagingArrowWrap.prev .arrow:hover{background-position:-65px -120px;background-color:#83b842}
.indexBanner .pagingArrowWrap.next .arrow{background-position:0 -220px}
.indexBanner .pagingArrowWrap.next .arrow:hover{background-position:-65px -220px;background-color:#83b842}
.indexBanner .datouwang .BtnNumList a{color:#fff;background:#83B842}
.indexBanner .datouwang .BtnNumList a.cur{color:#333;background:#ccc}
.hmCategoryBx{width:1000px;overflow:hidden;margin:0 auto;text-align:left;margin-bottom:50px;margin-top:35px;*margin-bottom:20px}
.hmCategoryBx .hmCategoryTitle{width:1000px;height:32px;overflow:hidden;text-align:left;border-bottom:3px solid #009d42}
.hmCategoryBx .hmCategoryTitle h2{width:425px;height:26px;overflow:hidden;display:block;background-position:0 0;margin:0;padding:0}
.hmCategoryBx .hmCategoryTitle h2 span{display:block;overflow:hidden;text-indent:-99999px;white-space:nowrap}
.hmCategoryBx ul{width:1032px;overflow:hidden;text-align:left}
.hmCategoryBx ul li{width:516px;height:84px;overflow:hidden;float:left;text-align:left;margin-top:16px;position:relative;z-index:10}
.hmCategoryBx ul li h3{width:86px;height:84px;overflow:hidden;display:block;float:left;text-align:left;background-color:#FFF;border-bottom:2px solid #fff;position:relative;z-index:9;margin:0;padding:0}
.hmCategoryBx ul li h3 a:hover img{margin-top:-84px}
.hmCategoryBx ul li.curt h3 a img,.hmCategoryBx ul li.curt h3 a:hover img{margin-top:-84px}
.hmCategoryBx table{width:395px;height:84px;overflow:hidden;float:left;text-align:left;vertical-align:middle;position:relative;z-index:1;margin:0 0 0 -3px;padding:0}
.hmCategoryBx table td{width:395px;height:84px;overflow:hidden;text-align:left;vertical-align:middle;word-wrap:break-word;word-break:break-all;margin:0;padding:0}
.hmCategoryBx table p{width:auto;height:21px;overflow:hidden;display:inline;text-align:left;font-size:12px;color:#666;line-height:21px;white-space:nowrap;margin:0;padding:0;float:left;*float:none}
.hmCategoryBx table p a,.hmCategoryBx table p a:hover{display:inline-block;text-align:left;font-size:12px;line-height:21px;text-decoration:none;margin:0;padding:0 8px}
.hmCategoryBx table p a{color:#666;background-position:-449px 5px}
.hmCategoryBx table p a:hover{color:#fff!important;background:none #009d42}
.hmCategoryBx table p span{overflow:hidden;text-align:left;color:#ccc;margin:0;padding:0}
.hmCategoryBx table p a span{margin:0;padding:0 0 0 4px}
.hmCategoryBx table p a:hover span{color:#fff!important}
.hmCategoryBx table p.noSplit a{background:0}

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