纵向索引按钮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 rel="stylesheet" type="text/css" href="css/zzsc.css" />
<!-- The JavaScript -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
	$(function() {
	Slideshow.initialize('#slideshow', [
	{
		image: "images/1.jpg",
		desc: "内容",
		title: "内容",
		url: "#",
		id: "473947"
	},
	{
		image: "images/2.jpg",
		desc: "内容",
		title: "内容",
		url: "#",
		id: "431948"
	},
	{
		image: "images/3.jpg",
		desc: "内容",
		title: "内容",
		url: "#",
		id: "494593"
	},
	{
		image: "images/4.jpg",
		desc: "内容",
		title: "内容",
		url: "#",
		id: "473946"
	}
	]);
	
	});
//]]>
</script>
</head>
<body>
    <div id="slideshow">
    <div class="container">
            <div class="slide" id="slide-0" style="background-image: url(images/4.jpg); display: block;"></div>
            <div class="slide" id="slide-1" style="background-image: url(images/2.jpg); display: none;"></div>
            <div class="slide" id="slide-2" style="background-image: url(images/3.jpg); display: none;"></div>
            <div class="slide" id="slide-3" style="background-image: url(images/1.jpg); display: none;"></div>
    </div> 
    <div class="paging">
            <a href="javascript:;" id="paging-0" onclick="Slideshow.jump(0, this);" onmouseover="Slideshow.preview(0);" class="current">
            </a>
            <a href="javascript:;" id="paging-1" onclick="Slideshow.jump(1, this);" onmouseover="Slideshow.preview(1);" class="">
            </a>
            <a href="javascript:;" id="paging-2" onclick="Slideshow.jump(2, this);" onmouseover="Slideshow.preview(2);" class="">
            </a>
            <a href="javascript:;" id="paging-3" onclick="Slideshow.jump(3, this);" onmouseover="Slideshow.preview(3);" class="last-slide">
            </a>
    </div>
    <div class="caption"><h3><a href="#" class="link">内容</a></h3>内容</div>
    <div class="preview"></div>
    <div class="mask"></div>
    </div>
</body>
</html>

JS代码(slideshow.js):

var Slideshow ={
	/** * The slide containing element. */
 object:null,/** * The rotation timer. */
 timer:null,/** * Current index. */
 index:0,/** * Array of slide data. */
data:[],/** * A collection of the slide DOM objects. */
 slides:[],/** * Is rotation currently playing. */
 playing:false,/** * The last slide index. */
lastSlide:null,initialize:function(object,data){
	Slideshow.object = $(object);
	Slideshow.data = data;
	Slideshow.slides = Slideshow.object.find('.slide');
	// Apply eventsSlideshow.object.find('.mask').hover(function(){
	Slideshow.pause();
}
,function(){
	Slideshow.play();
}
);
	Slideshow.object.find('.paging a').mouseleave(function(){
	Slideshow.object.find('.preview').empty().hide();
}
);
	if (Slideshow.slides.length <= 1)Slideshow.object.find('.controls,.paging').hide();
	Slideshow.link(0);
	Slideshow.play();
}
,/** * Fade out the slides and fade in selected. * * @param index */
fade:function(index){
	Slideshow.slides.stop(true,true).fadeOut('normal');
	Slideshow.slides.eq(index).fadeIn(1500);
	Slideshow.link(index);
	var caption = Slideshow.object.find('.caption');
	caption.stop(true,true).fadeOut('fast',function(){
	if (Slideshow.data[index]){
	caption.html("").append('<h3><a href="'+ Slideshow.data[index].url +'" class="link">'+ Slideshow.data[index].title +'</a></h3>').append(Slideshow.data[index].desc).fadeIn(1500);
}
}
);
	Slideshow.lastSlide = index;
}
,/** * Manually jump to a specific slide. Pauses rotation. * * @param index * @param control */
 jump:function(index,control){
	if ((Slideshow.lastSlide == index) || (Slideshow.slides.length <= 1))return;
	Slideshow.pause();
	Slideshow.fade(index);
	Slideshow.index = index;
	Slideshow.object.find('.paging a').removeClass('current');
	$(control).addClass('current');
}
,/** * Link the mask overlay and track the event. * * @param index */
link:function(index){
	if (Slideshow.data[index]){
	Slideshow.object.find('.mask').unbind('click.slideshow').bind('click.slideshow',function(){
	if (typeof _gaq != 'undefined'){
	var pushEvent = ['_trackEvent',Core.project +' Banners','Banner Click-Throughs','Banner-'+ Slideshow.data[index].id +'-'+ encodeURIComponent(Slideshow.data[index].title.replace(' ','_')) +'-'+ Core.locale];
	_gaq.push(pushEvent);
}
Core.goTo(Slideshow.data[index].url);
}
).end().find('.link').attr('href',Slideshow.data[index].url).end();
}
}
,/** * Play the rotation. */
 play:function(){
	if (Slideshow.slides.length <= 1)return;
	if (!Slideshow.playing){
	Slideshow.playing = true;
	Slideshow.timer = window.setInterval(Slideshow.rotate,3000);
}
}
,/** * Pause the automatic rotation. */
 pause:function(){
	if (Slideshow.slides.length <= 1)return;
	window.clearInterval(Slideshow.timer);
	Slideshow.playing = false;
}
,/** * Display a tooltip preview. * * @param index */
 preview:function(index){
	if (Slideshow.data[index]){
	var tooltip = Slideshow.object.find('.preview'),top = (index * 15) + 15;
	if (Slideshow.data[index].image){
	$('<img/>',{
	src:Slideshow.data[index].image,width:100,height:47,alt:''}
).appendTo(tooltip);
}
tooltip.append('<span>'+ Slideshow.data[index].title +'</span>').css('top',top);
	tooltip.show();
}
}
,/** * Automatically cycle through all the slides. */
 rotate:function(){
	var slideIndex = Slideshow.index + 1;
	if (slideIndex > (Slideshow.slides.length - 1)) slideIndex = 0;
	if (Slideshow.lastSlide == slideIndex)return;
	Slideshow.fade(slideIndex);
	Slideshow.index = slideIndex;
	// Set control to current Slideshow.object.find('.paging a').removeClass('current').end().find('.paging a:eq('+ slideIndex +')').addClass('current');
}
,/** * Toggle between play and pause. */
 toggle:function(){
	if (Slideshow.playing) Slideshow.pause();
	else Slideshow.play();
}
}
;
	var TakeOver ={
	/** * Open the take over ad and hide the slideshow. */
open:function(){
	var cookie = Cookie.read('sc2.takeOver');
	if (cookie && cookie == 1)return;
	$('.sidebar-promo').hide();
}
,/** * Play the media video. */
play:function(){
	$("#takeover-play").hide();
	$("#takeover-video").show();
}
}
;

CSS代码(zzsc.css):

*{margin:0;padding:0;}
body{background:#222;font-size:12px;color:#fff;font-family:"Verdana","lucida sans",Sans-serif;}
h2.title_name{font-family:normal Georgia,'Times New Roman',Times,serif;font-weight:normal;font-size:4em;margin:0;padding:50px 0 20px 0;text-align:center;}
h2.title_name span{font-family:normal Georgia,'Times New Roman',Times,serif;color:#f9f66d;font-size:0.9em;}
h2.title_name small{color:#AAAAAA;display:block;font-family:normal Verdana,Arial,Helvetica,sans-serif;font-size:0.2em;letter-spacing:1.0em;text-transform:uppercase;}
p.copy_right{width:750px;margin:30px auto 0 auto;clear:both;font-size:1.1em;letter-spacing:1px;text-align:center;overflow:hidden;}
p.copy_right a{color:#1D68AF;}
p.copy_right a:hover{text-decoration:none;}
/* Content Begin */
#slideshow{width:640px;height:300px;overflow:hidden;position:relative;margin:0 auto;}
#slideshow .container{width:640px;height:300px;position:relative;z-index:10;}
#slideshow .mask{width:640px;cursor:pointer;height:300px;left:0;position:absolute;top:0;z-index:30;}
#slideshow .caption{width:580px;bottom:30px;left:30px;position:absolute;z-index:35;}
#slideshow .caption h3{color:#FFFFFF;font-size:28px;font-weight:normal;}
#slideshow .caption h3 a{color:#FFF8D6;padding-bottom:5px;display:block;}
#slideshow .caption h3 a:hover{color:#FFF;text-decoration:none;}
#slideshow .paging{width:15px;position:absolute;right:15px;top:15px;z-index:35;}
#slideshow .paging a{-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background-color:#FFFFFF;display:block;height:10px;margin-bottom:5px;opacity:0.5;filter:alpha(opacity=50);}
#slideshow .paging a:hover,#slideshow .paging a.current{opacity:1;filter:alpha(opacity=100);}
#slideshow .preview{-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;width:100px;background:#FFFFFF;color:#000000;display:none;padding:5px;position:absolute;right:35px;text-align:center;top:15px;z-index:35;font-size:82%;}
#slideshow .preview span{display:block;padding-top:3px;}
#slideshow .slide{width:640px;height:300px;background-position:0 0;background-repeat:no-repeat;height:300px;left:0;position:absolute;top:0;z-index:15;}
#slideshow .slide .click-area{width:640px;height:300px;bottom:0;left:0;position:absolute;z-index:20;}
#slideshow .slide .click-area embed{z-index:25;}

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