以下是 带数字索引按钮jQuery焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>带数字索引按钮jQuery焦点图</title>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<link href="css/zzsc.css" type=text/css rel=stylesheet>
<script src="js/jquery-1.4.2.min.js" type=text/javascript></script>
<script src="js/zzsc.js" type=text/javascript></script>
</head>
<body>
<div class="box-zzsc">
<div class="ctrl-panel">
<a class=m-page href="javascript:;" rel=js_btn_list>1</a>
<a class=m-page href="javascript:;" rel=js_btn_list>2</a>
<a class=m-page href="javascript:;" rel=js_btn_list>3</a>
<a class=m-page href="javascript:;" rel=js_btn_list>4</a> </div>
<div class=scroll-wrap>
<div class=scroll_box_content rel="scroll_box_content">
<div class=content_list>
<img onclick="location.href='#'" src="images/img01.jpg" />
</div>
<div class=content_list>
<img onclick="location.href='#'" src="images/img02.jpg" />
</div>
<div class=content_list>
<img onclick="location.href='#'" src="images/img03.jpg" />
</div>
<div class=content_list>
<img onclick="location.href='#'" src="images/img04.jpg" />
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(zzsc.js):
// JavaScript Document(function($){
$.scrollContent = function(obj){
var posList = [];
var posNum = 0;
var timer = 0;
var direction = 0;
var delay = 5000;
var activeClass = "focus"if(obj.delay){
delay = obj.delay;
}
function showPos(num){
obj.content.animate({
"left":"-" + posList[num] + "px"}
);
if(obj.btn){
obj.btn.removeClass(activeClass);
obj.btn.eq(num).addClass(activeClass);
}
}
function viewNext(){
posNum ++;
if(posNum >= posList.length){
posNum = 0;
}
showPos(posNum);
}
function viewPrev(){
posNum --;
if(posNum < 0){
posNum = posList.length - 1;
}
showPos(posNum);
}
function autoShow(){
timer = setInterval(function(){
if(direction && obj.direct){
viewPrev();
}
else{
viewNext();
}
}
,delay);
}
function resetScroll(){
clearInterval(timer);
autoShow();
}
obj.content.css("width",function(){
var boxWidth = 0;
var child = $(this).children();
for(var i = 0;
i < child.length;
i ++){
boxWidth += child.eq(i).outerWidth();
}
return boxWidth + "px";
}
).children().each(function(i){
posList[i] = $(this).position().left;
}
).bind("mouseover",function(){
clearInterval(timer);
}
).bind("mouseout",function(){
autoShow();
}
);
if(obj.btn){
obj.btn.each(function(i){
$(this).bind("mouseover",function(){
showPos(i);
posNum = i;
resetScroll();
}
);
}
);
}
if(obj.next){
obj.next.bind("mouseover",function(){
direction = 0;
viewNext();
resetScroll();
}
);
}
if(obj.prev){
obj.prev.bind("mouseover",function(){
direction = 1;
viewPrev();
resetScroll();
}
);
}
showPos(0);
autoShow();
}
}
)(jQuery);
(function($){
$.fn.featureList = function(options){
var tabs= $(this);
var output= $(options.output);
new jQuery.featureList(tabs,output,options);
return this;
}
;
$.featureList = function(tabs,output,options){
function slide(nr){
if (typeof nr == "undefined"){
nr = visible_item + 1;
nr = nr >= total_items ? 0:nr;
}
tabs.removeClass('focus').filter(":eq(" + nr + ")").addClass('focus');
output.stop(true,true).filter(":visible").fadeOut();
output.filter(":eq(" + nr + ")").fadeIn(100,function(){
visible_item = nr;
}
);
}
var options= options ||{
}
;
var total_items= tabs.length;
var visible_item= options.start_item || 0;
options.pause_on_hover= options.pause_on_hover|| true;
options.transition_interval= options.transition_interval|| 5000;
output.hide().eq( visible_item ).show();
tabs.eq( visible_item ).addClass('focus');
tabs.mouseover(function(){
if ($(this).hasClass('focus')){
return false;
}
slide(tabs.index(this));
}
);
if (options.transition_interval > 0){
var timer = setInterval(function (){
slide();
}
,options.transition_interval);
if (options.pause_on_hover){
tabs.mouseenter(function(){
clearInterval( timer );
}
).mouseleave(function(){
clearInterval( timer );
timer = setInterval(function (){
slide();
}
,options.transition_interval);
}
);
}
}
}
;
}
)(jQuery);
$(document).ready(function(){
(function(){
var timer1,timer2;
var link_more = $("[rel=js_more_link]"),link_content = $("#js_more_link_content");
link_more.bind("mouseover",function(){
clearTimeout(timer2);
timer1 = setTimeout(function(){
link_content.fadeIn()}
,600);
}
).bind("mouseout",function(){
clearTimeout(timer1);
timer2 = setTimeout(function(){
link_content.fadeOut()}
,900);
}
);
}
)();
$(".col-sub ul li").first().addClass("first-child").end().last().addClass("last-child");
$(".invest-box,.events-list").last().addClass("no-border");
(function(){
setInterval(function(){
$("[rel=js_toggle_img]").children().toggle();
}
,7000)}
)();
$.scrollContent({
content:$("[rel=scroll_box_content]"),btn:$("[rel=js_btn_list]"),prev:$("[rel=js_btn_prev]"),next:$("[rel=js_btn_next]"),delay:7000,direct:true}
);
$.featureList($("[rel=feature_list_btn]"),$("[rel=feature_list]"),{
start_item:0,transition_interval:6000}
);
}
);
CSS代码(zzsc.css):
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
.box-zzsc{width:990px;position:relative;margin:20px auto}
.ctrl-panel{position:absolute;right:20px;top:350px;z-index:1000;}
.m-page{display:block;width:32px;height:32px;text-align:center;background:#963;float:left;display:inline;margin-left:10px;line-height:32px;color:#fff;font-size:13px;}
.m-page:hover{text-decoration:none;color:#fff;}
.focus{background:#000;}
.con{width:100%;}
.scroll-wrap{OVERFLOW:hidden;WIDTH:990px;POSITION:relative;HEIGHT:400px}
.scroll_box_content{POSITION:absolute}
.content_list{FLOAT:left;WIDTH:990px;HEIGHT:400px;cursor:pointer;}
分享到QQ
分享到微博
微信扫一扫
