cxSlide带标题和按钮焦点图轮播滚动切换特效代码

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

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

以下是 cxSlide带标题和按钮焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>cxSlide带标题和按钮焦点图</title>
<style>
*{margin:0;padding:0;list-style:none;border:none;}
/* 焦点图 水平滚动
------------------------------ */
.slide_x{overflow:hidden;position:relative;margin:30px auto;width:600px;height:280px;border:1px solid #777;background:#000;}
.slide_x a{color:#eee;text-decoration:none;}
.slide_x .box{overflow:hidden;position:relative;width:600px;height:280px;}
.slide_x .list{overflow:hidden;width:9999px;}
.slide_x .list li{float:left;position:relative;width:600px;}
.slide_x .list img{vertical-align:top;}
.slide_x .list p{position:absolute;bottom:0;left:0;width:100%;height:24px;color:#eee;font:12px/24px "\5b8b\4f53";text-indent:12px;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');background:rgba(0,0,0,0.6);}
.slide_x .btn{overflow:hidden;position:absolute;bottom:4px;right:6px;}
.slide_x .btn li{float:left;width:16px;height:16px;margin:0 0 0 10px;border-radius:2px;background:#eee;color:#333;font:11px/16px Tahoma;text-align:center;cursor:pointer;}
.slide_x .btn .selected{background:#f30;color:#fff;}
.slide_x .minus,
.slide_x .plus{position:absolute;top:110px;width:40px;height:50px;background-image:url(images/control.png);background-repeat:no-repeat;text-align:center;cursor:pointer;}
.slide_x .minus{left:0;background-position:0 0;}
.slide_x .plus{right:0;background-position:-40px 0;}
.slide_x .minus:hover{background-position:0 -50px;}
.slide_x .plus:hover{background-position:-40px -50px;}
</style>
</head>
<body>
<div id="slide_x" class="slide_x">
<div class="box">
<ul class="list">
<li><a href="#"><img src="images/slide_1.jpg" width="600" height="280"></a><p>标题1</p></li>
<li><a href="#"><img src="images/slide_2.jpg" width="600" height="280"></a><p>标题2</p></li>
<li><a href="#"><img src="images/slide_3.jpg" width="600" height="280"></a><p>标题3</p></li>
<li><a href="#"><img src="images/slide_4.jpg" width="600" height="280"></a><p>标题4</p></li>
<li><a href="#"><img src="images/slide_5.jpg" width="600" height="280"></a><p>标题5</p></li>
</ul>
</div>
<ul class="btn">
<li class="b_1 selected">1</li>
<li class="b_2">2</li>
<li class="b_3">3</li>
<li class="b_4">4</li>
<li class="b_5">5</li>
</ul>
<div class="plus"></div>
<div class="minus"></div>
</div>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.cxslide.min.js"></script>
<script>
$("#slide_x").cxSlide({plus:true,minus:true});
</script>
</body>
</html>

JS代码(jquery.cxslide.min.js):

/*! * cxSlide 1.0 */
(function(e){
	e.fn.cxSlide=function(t){
	if(!this.length)return;
	t=e.extend({
}
,e.cxSlide.defaults,t);
	var n=this,r={
}
;
	r.fn={
}
;
	var i;
	r.box=n.find(".box"),r.list=r.box.find(".list"),r.items=r.list.find("li"),r.itemSum=r.items.length;
	if(r.itemSum<=1)return;
	r.numList=n.find(".btn"),r.numBtns=r.numList.find("li"),r.plusBtn=n.find(".plus"),r.minusBtn=n.find(".minus"),r.boxWidth=r.box.width(),r.boxHeight=r.box.height(),r.s=0;
	if(t.btn&&!r.numList.length){
	i="";
	for(var s=1;
	s<=r.itemSum;
	s++)i+="<li class='b_"+s+"'>"+s+"</li>";
	r.numList=e("<ul></ul>",{
	"class":"btn",html:i}
).appendTo(n),r.numBtns=r.numList.find("li")}
t.plus&&!r.plusBtn.length&&(r.plusBtn=e("<div></div>",{
	"class":"plus"}
).appendTo(n)),t.minus&&!r.minusBtn.length&&(r.minusBtn=e("<div></div>",{
	"class":"minus"}
).appendTo(n)),r.fn.on=function(){
	if(!t.auto)return;
	r.fn.off(),r.run=setTimeout(function(){
	r.fn.goto()}
,t.time)}
,r.fn.off=function(){
	typeof r.run!="undefined"&&clearTimeout(r.run)}
,r.fn.checkBtn=function(e){
	r.numList.length&&r.numBtns.eq(e).addClass("selected").siblings("li").removeClass("selected")}
,r.fn.goto=function(e){
	r.fn.off();
	var n=typeof e=="undefined"?r.s+1:parseInt(e,10),i=r.s,s=r.itemSum-1;
	if(n==r.s){
	r.fn.on();
	return}
n>s?n=0:n<0&&(n=s),r.fn.checkBtn(n);
	var o;
	switch(t.type){
	case"x":o=r.boxWidth*n,n==0&&i==s?(r.items.eq(0).css({
	left:r.boxWidth*r.itemSum}
),o=r.boxWidth*r.itemSum):i==0&&(r.items.eq(0).css({
	left:""}
),r.box.scrollLeft(0)),r.box.stop(!0,!1).animate({
	scrollLeft:o}
,t.speed);
	break;
	case"y":o=r.boxHeight*n,n==0&&i==s?(r.items.eq(0).css({
	top:r.boxHeight*r.itemSum}
),o=r.boxHeight*r.itemSum):i==0&&(r.items.eq(0).css({
	top:""}
),r.box.scrollTop(0)),r.box.stop(!0,!1).animate({
	scrollTop:o}
,t.speed);
	break;
	case"fade":r.items.css({
	display:"none",position:"absolute",top:0,left:0,zIndex:""}
),r.items.eq(i).css({
	display:"",zIndex:1}
),r.items.eq(n).css({
	zIndex:2}
).fadeIn(t.speed);
	break;
	case"toggle":r.items.eq(n).show().siblings("li").hide()}
r.s=n,r.box.queue(function(){
	r.fn.on(),r.box.dequeue()}
)}
,r.box.hover(function(){
	r.fn.off()}
,function(){
	r.fn.on()}
),t.btn&&r.numList.delegate("li",t.events,function(){
	r.fn.goto(r.numBtns.index(e(this)))}
),t.plus&&r.plusBtn.bind(t.events,function(){
	r.fn.goto()}
),t.minus&&r.minusBtn.bind(t.events,function(){
	r.fn.goto(r.s-1)}
),r.fn.checkBtn(t.start),r.fn.goto(t.start)}
,e.cxSlide={
	defaults:{
	events:"click",type:"x",start:0,speed:800,time:5e3,auto:!0,btn:!0,plus:!1,minus:!1}
}
}
)(jQuery);

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