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 type="text/css" rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/mainVisual.js"></script>
</head>
<body>
    <!--banner开始-->
    <div id="banner">
        <div id="visual">
            <ul id="visualBanner">
                <li class="vis1" id="scene1">
                    <h2 style="top: -400px;"><a href="#"><img src="img/ban_div2.png" alt="中国医师协会治未病A级健康服务站" /></a>                </h2>
                    <p class="pointer1"><a href="#"><img src="img/div2_1.png" alt="激光治疗仪公益治疗服务" /></a></p>
                    <p class="pointer2"><a href="#"><img src="img/div2_2.png" alt="激光十炙" /></a></p>
                    <p class="pointer3"><a href="#"><img src="img/div2_3.png" alt="服务指南" /></a></p>
                </li>
                <li class="vis2" id="scene2">
                    <h2 style="top: -400px;"><a href="#"><img src="img/ban_div1.png" alt="宁波鄞州大众生活服务部" /></a>                </h2>
                    <p class="pointer1"><a href="#"><img src="img/div1_1.png" alt="住的安全、宾至如归" /></a></p>
                    <p class="pointer2"><a href="#"><img src="img/div1_2.png" alt="地标标志、闹中处静" /></a></p>
                    <p class="pointer3"><a href="#"><img src="img/div1_3.png" alt="一般需求、足不出楼" /></a></p>
                    <p class="pointer4"><a href="#"><img src="img/div1_4.png" alt="交通便捷、四通八达" /></a></p>
                </li>
                <li class="vis3" id="scene3">
                    <h2 style="top: 35px;"><a href="#"><img src="img/ban_div3.png" alt="商务部中国国际电子商务中心富融国际宁波分理处" /></a>                </h2>
                    <p class="pointer1"><a href="#"><img src="img/div3_1.png" alt="实业投资" /></a></p>
                    <p class="pointer2"><a href="#"><img src="img/div3_2.png" alt="大众综合楼房屋租凭" /></a></p>
                    <p class="pointer3"><a href="#"><img src="img/div3_3.png" alt="商务信息咨询" /></a></p>
                    <p class="pointer4"><a href="#"><img src="img/div3_4.png" alt="物业管理服务" /></a></p>
                </li>
            </ul>
        </div>
        <div class="control">
            <ul id="active">
                <li class="active1 on"></li>
                <li class="active2"></li>
                <li class="active3"></li>
            </ul>
            <div id="btnPlay"></div>
        </div>
    </div>
</body>
</html>

JS代码(mainVisual.js):

$(function(){
	var mainOnNum = 1;
	var timer;
	var topIndex = 1;
	var width = $(window).width();
	function onTimer(){
	if (mainOnNum > 3){
	mainOnNum = 1;
}
else{
	mainOnNum++;
}
$(".control li").eq(mainOnNum-1).trigger("click");
}
function changeSceneSelector($num){
	mainOnNum = $num+1;
	changeScene(mainOnNum);
}
function changeScene($num){
	clearInterval(timer);
	mainOnNum = $num;
	topIndex++;
	switch($num){
	case 1:timer = setInterval(onTimer,7000);
	$("#scene1").css({
	"z-index":topIndex}
);
	motion($num);
	break;
	case 2:timer = setInterval(onTimer,7000);
	$("#scene2").css({
	"z-index":topIndex}
);
	motion($num);
	break;
	case 3:timer = setInterval(onTimer,7000);
	$("#scene3").css({
	"z-index":topIndex}
);
	motion($num);
	break;
}
}
function clearFunctions(){
	$("li").clearQueue();
	$("li").stop();
	$("p").clearQueue();
	$("p").stop();
	$("h2").clearQueue();
	$("h2").stop();
	$("ul").clearQueue();
	$("ul").stop();
}
function motion($mc){
	clearFunctions();
	$("#scene1").stop().css("left",width);
	$("#scene1 h2").stop().css("top","-400px");
	$("#scene1 .link").stop().css("top","-400px");
	$("#scene1 .pointer1").stop().css("top","500px");
	$("#scene1 .pointer2").stop().css("top","500px");
	$("#scene1 .pointer3").stop().css("top","500px");
	$("#scene2").stop().css("left",width);
	$("#scene2 h2").stop().css("top","-400px");
	$("#scene2 .link").stop().css("top","-400px");
	$("#scene2 .pointer1").stop().css("top","430px");
	$("#scene2 .pointer2").stop().css("top","430px");
	$("#scene2 .pointer3").stop().css("top","500px");
	$("#scene2 .pointer4").stop().css("top","-200px");
	$("#scene3").stop().css("left",width);
	$("#scene3 h2").stop().css("top","-400px");
	$("#scene3 .link").stop().css("top","-400px");
	$("#scene3 .pointer1").stop().css("top","550px");
	$("#scene3 .pointer2").stop().css("top","550px");
	$("#scene3 .pointer3").stop().css("top","550px");
	$("#scene3 .pointer4").stop().css("top","550px");
	if($mc == 1){
	$("#scene1").animate({
	"left":"0"}
,{
	duration:700,easing:"easeOutExpo"}
);
	$("#scene1 h2").delay(300).animate({
	"top":"35px"}
,{
	duration:1000,easing:"easeInOutCirc"}
);
	$("#scene1 .link").delay(100).animate({
	"top":"175px"}
,{
	duration:1000,easing:"easeInOutCirc"}
);
	$("#scene1 .pointer1").delay(2000).animate({
	"top":"195px"}
,{
	duration:300,easing:"easeOutBack"}
);
	$("#scene1 .pointer2").delay(2100).animate({
	"top":"225px"}
,{
	duration:300,easing:"easeOutBack"}
);
	$("#scene1 .pointer3").delay(2200).animate({
	"top":"175px"}
,{
	duration:300,easing:"easeOutBack"}
);
}
else if($mc == 2){
	$("#scene2").animate({
	"left":"0"}
,{
	duration:700,easing:"easeOutExpo"}
);
	$("#scene2 h2").delay(300).animate({
	"top":"35px"}
,{
	duration:1000,easing:"easeInOutCirc"}
);
	$("#scene2 .link").delay(100).animate({
	"top":"175px"}
,{
	duration:1000,easing:"easeInOutCirc"}
);
	$("#scene2 .pointer1").delay(2000).animate({
	"top":"146px"}
,{
	duration:300,easing:"easeOutBack"}
);
	$("#scene2 .pointer2").delay(2100).animate({
	"top":"188px"}
,{
	duration:300,easing:"easeOutBack"}
);
	$("#scene2 .pointer3").delay(2200).animate({
	"top":"222px"}
,{
	duration:300,easing:"easeOutBack"}
);
	$("#scene2 .pointer4").delay(2300).animate({
	"top":"36px"}
,{
	duration:300,easing:"easeOutBack"}
);
}
else{
	$("#scene3").animate({
	"left":"0"}
,{
	duration:700,easing:"easeOutExpo"}
);
	$("#scene3 h2").delay(300).animate({
	"top":"35px"}
,{
	duration:1000,easing:"easeInOutCirc"}
);
	$("#scene3 .link").delay(100).animate({
	"top":"175px"}
,{
	duration:1000,easing:"easeInOutCirc"}
);
	$("#scene3 .pointer1").delay(2000).animate({
	"top":"226px"}
,{
	duration:300,easing:"easeOutBack"}
);
	$("#scene3 .pointer2").delay(2100).animate({
	"top":"241px"}
,{
	duration:300,easing:"easeOutBack"}
);
	$("#scene3 .pointer3").delay(2200).animate({
	"top":"223px"}
,{
	duration:300,easing:"easeOutBack"}
);
	$("#scene3 .pointer4").delay(2300).animate({
	"top":"113px"}
,{
	duration:300,easing:"easeOutBack"}
);
}
}
function init(){
	var $btns = $(".control li"),$motionC = $(".control #btnPlay");
	$btns.bind("click",function(){
	clearInterval(timer);
	timer = setInterval(onTimer,7000);
	var $this = $(this),index = $btns.index($this);
	if(window.console){
	console.log("clicked:" + mainOnNum);
}
$btns.removeClass("on");
	$this.addClass("on");
	changeSceneSelector(index);
	return false;
}
);
	$motionC.bind("click",function(){
	var $this = $(this);
	if($this.hasClass("on")){
	$this.text("自动播放");
	$this.attr("title","自动播放");
	$this.removeClass("on");
	clearInterval(timer);
}
else{
	$this.text("自动播放 停止");
	$this.attr("title","自动播放 停止");
	$this.addClass("on");
	clearInterval(timer);
	timer = setInterval(onTimer,3000);
}
return false;
}
);
	changeScene(1);
}
var goInit = setTimeout(function(){
	init();
}
,10);
	$(".scene").css("display","block");
	$(".scene").css("left",width);
}
);

CSS代码(index.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";background:#d6d6d6;}
/* banner */
#banner{background:url(../img/bannerbg.jpg) repeat-x;height:436px;position:relative;overflow:hidden;}
/* visual */
#visual{position:relative;height:430px;overflow:hidden;z-index:1;}
#visual #visualBanner{position:absolute;left:0;top:0;width:100%;}
#visual #visualBanner li{position:absolute;width:100%;height:430px;z-index:-1;}
#visual #visualBanner li p{position:absolute;}
#visual h2{position:absolute;top:-400px;left:50%;margin-left:-400px;height:auto;}
#visual .scene{display:none;}
#visual .vis1{left:100%;background:url(../img/banner2.jpg) no-repeat center top;}
#visual .vis1 .pointer1{top:500px;left:50%;margin-left:-302px;}
#visual .vis1 .pointer2{top:500px;left:50%;margin-left:-54px;}
#visual .vis1 .pointer3{top:500px;left:50%;margin-left:231px;}
#visual .vis2{left:100%;background:url(../img/banner1.jpg) no-repeat center top;}
#visual .vis2 .pointer1{top:550px;left:50%;margin-left:-230px;}
#visual .vis2 .pointer2{top:530px;left:50%;margin-left:282px;}
#visual .vis2 .pointer3{top:500px;left:50%;margin-left:76px;}
#visual .vis2 .pointer4{top:-200px;left:50%;margin-left:280px;}
#visual .vis3{left:100%;background:url(../img/banner3.jpg) no-repeat center top;}
#visual .vis3 .pointer1{top:550px;left:50%;margin-left:-221px;}
#visual .vis3 .pointer2{top:550px;left:50%;margin-left:-11px;}
#visual .vis3 .pointer3{top:550px;left:50%;margin-left:210px;}
#visual .vis3 .pointer4{top:500px;left:50%;margin-left:220px;}
/* control */
.control{position:absolute;top:380px;left:50%;width:157px;margin-left:-80px;height:23px;background:url(../img/quan_bg.png) no-repeat 0 50%;z-index:9999;}
.control #btnPlay{position:absolute;top:5px;left:0;width:14px;height:14px;text-indent:-9999em;overflow:hidden;background:url('../img/stop-play.png') no-repeat;cursor:pointer;}
.control #btnPlay.on{background:url('../img/stop-play.png') no-repeat -30px 0;}
.control ul{position:absolute;top:5px;}
.control li{margin:1px 0 0 8px;display:inline;float:left;display:block;width:12px;height:12px;cursor:pointer;background:url(../img/quan2.png) no-repeat;overflow:hidden;}
#active{margin-left:45px;}
.control li.on{background:url(../img/quan1.png) no-repeat;}

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