vivo官网左右全屏动画焦点图轮播滚动切换特效代码

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

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

以下是 vivo官网左右全屏动画焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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>vivo官网左右全屏动画焦点图</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/vivo-common.js"></script>
<script src="js/vivo-high.js"></script>

<link href="css/highlight.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
	<link href="css/iefixed.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body class="home">
<div id="vivo-wrap">
  <div id="vivo-contain">
    <div class="focus-gallery">
      <ul class="cl">
      
        <li class="high-imageSearch3"> 
        <a href="#">
          <div class="high-box">
            <div class="figure">
              <div class="screen"><img src="images/h-imagesearch3-sc1.jpg" width="1310" height="299" /></div>
              <div class="mobile"><img src="images/h-imagesearch3-mob.png" width="700" height="380" /></div>
            </div>
            <div class="high-title">
              <h2><img src="images/h-imagesearch3-logo.png" width="830" height="390" /></h2>
            </div>
          </div>
          </a> 
         </li>
         
        <li class="high-x5">
        <a href="#">
          <div class="high-box">
            <div class="figure"> 
            <b class="mob1"><img src="images/h-x5-f1.png" alt="X5" width="700" height="680" /></b> 
            <b class="mob2"><img src="images/h-x5-f2.png" alt="X5" width="490" height="480" /></b>
            <b class="mob3"><img src="images/h-x5-f3.png" alt="X5" width="510" height="415" /></b> 
            <b class="mob4"><img src="images/h-x5-f4.png" alt="X5" width="710" height="680" /></b> 
          </div>
            <div class="high-title">
              <h2><img src="images/h-x5-t1.png" width="366" height="107" /></h2>
              <h3><img src="images/h-x5-t2.png" width="366" height="69" /></h3>
              <h4><img src="images/h-x5-t3.png" width="366" height="127" /></h4>
            </div>
          </div>
          </a> 
        </li>
        
        <li class="high-x3v"> 
        <a href="#">
          <div class="high-box">
            <div class="figure"><img src="images/h-x3v-figure.png" width="532" height="566" /></div>
            <div class="high-title">
              <h2><img src="images/h-x3v-title1.png" width="459" height="95" /></h2>
              <h3><img src="images/h-x3v-title2.png" width="459" height="95" /></h3>
            </div>
          </div>
          </a>
        </li>
        
        <li class="high-enjoyevent"> 
        <a href="#">
        <div class="high-box">
            <div class="e-circle"> 
            	<em class="e1"></em>
                <em class="e2"></em>
                <em class="e3"></em> 
            </div>
            <div class="high-title"> 
            	<em class="t1"><img src="images/h-enjoy-t1.png" width="338" height="148" /></em> 
                <em class="t2"><img src="images/h-enjoy-t3.png" width="464" height="120" /></em>
                <h2><img src="images/h-enjoy-t4.png" width="756" height="447" /></h2>
                <em class="t3"><img src="images/h-enjoy-t2.png" width="74" height="58" /></em> 
            </div>
            <div class="figure"> 
            	<em class="m1"><img src="images/h-enjoy-c4.png" width="120" height="160" /></em>
                <div class="m2"> 
               		<em class="m2-1"><img src="images/h-enjoy-c2.png" width="180" height="110" /></em>
               		<em class="m2-2"><img src="images/h-enjoy-c1.png" width="240" height="430" /></em> 
                </div>
              	<em class="m3"><img src="images/h-enjoy-c3.png" width="486" height="482" /></em> 
            </div>
          </div>
          </a> 
        </li>
        
        <li class="high-xshotnew"> 
        <a href="#">
          <div class="high-box"> 
          		<em class="mask"><img src="images/h-xshot-mask.png" width="560" height="426" /></em>
           		<div class="high-title">
              		<h2><img src="images/h-xshot-t1.png" width="446" height="146" /></h2>
              		<h3><img src="images/h-xshot-t2.png" width="454" height="95" /></h3>
            	</div>
          </div>
          </a> 
        </li>
        
      </ul>
      <div class="switch-high"></div>
    </div>
  </div>
</div>
</body>
</html>

JS代码(vivo-common.js):

var VIVO_UIMIX ={
	i:0,init:function(c){
	var c = c ? c:VIVO_UIMIX;
	for (var i in c){
	if (c[i] && c[i].init){
	c[i].init();
}
}
}
,html5:function(){
	var thisBody = document.body || document.documentElement,thisStyle = thisBody.style,support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
	if(support!==undefined){
	return true}
else{
	return false}
}
,scroll:function(n,speed){
	$("body,html").stop().animate({
	scrollTop:n}
,speed);
}
,browser:function(n){
	var e = window.navigator.userAgent,b="",ie=0;
	if (e.indexOf("MSIE") >= 0){
	b="ie";
	if(e.indexOf("MSIE 6.0")>0) ie=6;
	if(e.indexOf("MSIE 7.0")>0) ie=7;
	if(e.indexOf("MSIE 8.0")>0) ie=8;
	if(e.indexOf("MSIE 9.0")>0) ie=9;
	if(e.indexOf("MSIE 10.0")>0) ie=10;
	if(e.indexOf("MSIE 11.0")>0) ie=11;
	if(e.indexOf("MSIE 12.0")>0) ie=12;
}
else if (e.indexOf("Firefox") >= 0){
	b="firefox"}
else if(e.indexOf("Chrome") >= 0){
	b="chrome"}
else if(e.indexOf("Opera") >= 0){
	b="opera"}
else if(e.indexOf("Safari") >= 0){
	b="safari"}
if(n){
	if(b=="ie"){
	return ie}
else{
	return b}
}
else{
	return b}
}
,iepng:function(){
	if(VIVO_UIMIX.browser(1)==6){
	for(var j=0;
	j<document.images.length;
	j++){
	var img = document.images[j];
	var imgName = img.src.toUpperCase();
	if (imgName.substring(imgName.length-3,imgName.length) == "PNG"){
	var imgID = (img.id) ? "id='" + img.id + "' ":"";
	var imgClass = (img.className) ? "class='" + img.className + "' ":"";
	var imgTitle = (img.title) ? "title='" + img.title + "' ":"title='" + img.alt + "' ";
	var imgAlt = (img.alt) ? "alt='" + img.alt + "' ":"alt='" + img.title + "' ";
	var imgStyle = "display:inline-block;
	" + img.style.cssText;
	if (img.align == "left") imgStyle = "float:left;
	" + imgStyle;
	if (img.align == "right") imgStyle = "float:right;
	" + imgStyle;
	if (img.parentElement.href) imgStyle = "cursor:hand;
	" + imgStyle;
	var strNewHTML = "<i " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px;
	height:" + img.height + "px;
	" + imgStyle + ";
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'" + img.src + "\',sizingMethod='scale');
	\"></i>";
	img.outerHTML = strNewHTML;
	j = j-1;
}
}
}
}
}
;
	// PC official websiteVIVO_UIMIX.main ={
	init:function(){
	VIVO_UIMIX.init(VIVO_UIMIX.main);
	// VIVO_UIMIX.main.fixcontain();
	VIVO_UIMIX.iepng();
	if(VIVO_UIMIX.browser(1)==6){
	setTimeout(function(){
	$("[href]").focus(function(){
	this.blur()}
)}
,1000)}
jQuery.easing.def="easeOutCubic";
	$("img").mousedown(function(e){
	return false}
);
}
,fixcontain:function(){
	if($("#vivo-contain").size()<=0) return;
	$(window).resize(function(){
	var wh=$(this).height(),vw=$("#vivo-wrap"),ct=$("#vivo-contain"),hd=$("#vivo-head"),fd=$("#vivo-foot");
	if(wh<vw.height()) return;
	ct.css({
	height:wh-hd.height()-fd.height()}
);
}
).resize();
}
}
;
	$(document).ready(function(){
	VIVO_UIMIX.init()}
);

JS代码(vivo-high.js):

VIVO_UIMIX.main.high ={
	data:{
	stages:[],current:-1,next:-1,delay_timeout:800,delay_hander:false,auto_play_handler:false,auto_play_timeout:9000}
,next:function(){
	VIVO_UIMIX.main.high.data.delay_hander = false;
	if (VIVO_UIMIX.main.high.data.current == VIVO_UIMIX.main.high.data.next){
	return;
}
if (VIVO_UIMIX.main.high.data.current >= 0){
	VIVO_UIMIX.main.high.data.stages[VIVO_UIMIX.main.high.data.current].outStage(VIVO_UIMIX.main.high.data.stages[VIVO_UIMIX.main.high.data.next].inStage);
}
else{
	VIVO_UIMIX.main.high.data.stages[VIVO_UIMIX.main.high.data.next].inStage();
}
VIVO_UIMIX.main.high.data.current = VIVO_UIMIX.main.high.data.next;
}
,autoplay:function(enable){
	if (VIVO_UIMIX.main.high.data.auto_play_handler){
	clearInterval(VIVO_UIMIX.main.high.data.auto_play_handler);
	VIVO_UIMIX.main.high.data.auto_play_handler = false;
}
if (enable){
	VIVO_UIMIX.main.high.data.auto_play_handler = setInterval(function(){
	var ls = $("#vivo-contain .focus-gallery .switch-high a");
	var index = $("#vivo-contain .focus-gallery .switch-high a.current").index();
	ls.eq(index).removeClass('current');
	var next = (index + 1) % ls.size();
	ls.eq(next).addClass('current');
	VIVO_UIMIX.main.high.switchTo(next,true);
}
,VIVO_UIMIX.main.high.data.auto_play_timeout);
}
}
,switchTo:function(index,force){
	if (VIVO_UIMIX.main.high.data.delay_hander){
	clearTimeout(VIVO_UIMIX.main.high.data.delay_hander);
}
VIVO_UIMIX.main.high.data.next = index;
	if (force){
	VIVO_UIMIX.main.high.next();
}
else{
	VIVO_UIMIX.main.high.data.delay_hander = setTimeout(VIVO_UIMIX.main.high.next,VIVO_UIMIX.main.high.data.delay_timeout);
}
}
,init:function(){
	var highBox=$("#vivo-contain .focus-gallery"),sildeBox=highBox.find("ul li"),totalHigh=sildeBox.size(),switchHigh=highBox.find(".switch-high"),curHigh=oldHigh=0,delay=8000,t=null,isPlay=false;
	if(!$("body").hasClass("home")) return;
	var html = '';
	for(var i=0;
	i<totalHigh;
	i++){
	html+="<a><b></b></a>";
}
switchHigh.append(html);
	sildeBox.each(function(i,j){
	$(j).css({
	opacity:0,zIndex:1,display:"none"}
);
}
);
	VIVO_UIMIX.main.high.data.stages = [VIVO_UIMIX.main.high.x5,VIVO_UIMIX.main.high.enjoyevent,VIVO_UIMIX.main.high.xshotnew,VIVO_UIMIX.main.high.imageSearch3,VIVO_UIMIX.main.high.x3v];
	for (var i in VIVO_UIMIX.main.high.data.stages){
	VIVO_UIMIX.main.high.data.stages[i].init();
}
switchHigh.on({
	mouseenter:function(){
	VIVO_UIMIX.main.high.autoplay(false);
}
,mouseleave:function(){
	VIVO_UIMIX.main.high.autoplay(true);
}
,click:function(){
	if($(this).hasClass("current")) return;
	$(this).addClass("current").siblings('.current').removeClass("current");
	VIVO_UIMIX.main.high.switchTo($(this).index());
	return false;
}
}
,"a").find("a").first().addClass("current");
	VIVO_UIMIX.main.high.switchTo(0,true);
	VIVO_UIMIX.main.high.autoplay(true);
}
,x5:{
	timehandle:false,stop:function(){
	if(VIVO_UIMIX.main.high.x5.timehandle){
	clearTimeout(VIVO_UIMIX.main.high.x5.timehandle);
	VIVO_UIMIX.main.high.x5.timehandle=false;
}
}
,init:function(){
	var ebox=$(".high-x5");
	ebox.removeClass("instage").addClass("outstage");
}
,inStage:function(){
	VIVO_UIMIX.main.high.x5.stop();
	var ebox=$(".high-x5");
	ebox.css({
	zIndex:10,display:"block"}
).animate({
	opacity:1}
,800,function(){
	ebox.siblings().css({
	zIndex:1}
);
	ebox.removeClass("outstage").addClass("instage");
}
);
}
,outStage:function(cb){
	VIVO_UIMIX.main.high.x5.stop();
	var ebox=$(".high-x5");
	setTimeout(function(){
	ebox.animate({
	opacity:0}
,800);
	ebox.removeClass("instage").addClass("outstage");
	if (cb) cb();
}
,1);
}
}
,imageSearch3:{
	timehandle:false,stop:function(){
	if(VIVO_UIMIX.main.high.imageSearch3.timehandle){
	clearTimeout(VIVO_UIMIX.main.high.imageSearch3.timehandle);
	VIVO_UIMIX.main.high.imageSearch3.timehandle=false;
}
}
,init:function(){
	var ebox=$(".high-imageSearch3");
	ebox.removeClass("instage").addClass("outstage");
}
,inStage:function(){
	VIVO_UIMIX.main.high.imageSearch3.stop();
	var ebox=$(".high-imageSearch3");
	ebox.css({
	zIndex:10,display:"block"}
).animate({
	opacity:1}
,800,function(){
	ebox.siblings().css({
	zIndex:1}
);
	ebox.removeClass("outstage").addClass("instage");
}
);
}
,outStage:function(cb){
	VIVO_UIMIX.main.high.imageSearch3.stop();
	var ebox=$(".high-imageSearch3");
	setTimeout(function(){
	ebox.animate({
	opacity:0}
,800);
	ebox.removeClass("instage").addClass("outstage");
	if (cb) cb();
}
,1);
}
}
,x3v:{
	timehandle:false,stop:function(){
	if(VIVO_UIMIX.main.high.x3v.timehandle){
	clearTimeout(VIVO_UIMIX.main.high.x3v.timehandle);
	VIVO_UIMIX.main.high.x3v.timehandle=false;
}
}
,init:function(){
	var ebox=$(".high-x3v");
	ebox.removeClass("instage").addClass("outstage");
}
,inStage:function(){
	VIVO_UIMIX.main.high.x3v.stop();
	var ebox=$(".high-x3v");
	ebox.css({
	zIndex:10,display:"block"}
).animate({
	opacity:1}
,800,function(){
	ebox.siblings().css({
	zIndex:1}
);
	ebox.removeClass("outstage").addClass("instage");
}
);
}
,outStage:function(cb){
	VIVO_UIMIX.main.high.x3v.stop();
	var ebox=$(".high-x3v");
	setTimeout(function(){
	ebox.animate({
	opacity:0}
,800);
	ebox.removeClass("instage").addClass("outstage");
	if (cb) cb();
}
,1);
}
}
,enjoyevent:{
	timehandle:false,stop:function(){
	if(VIVO_UIMIX.main.high.enjoyevent.timehandle){
	clearTimeout(VIVO_UIMIX.main.high.enjoyevent.timehandle);
	VIVO_UIMIX.main.high.enjoyevent.timehandle=false;
}
}
,init:function(){
	var ebox=$(".high-enjoyevent");
	ebox.removeClass("instage").addClass("outstage");
}
,inStage:function(){
	VIVO_UIMIX.main.high.enjoyevent.stop();
	var ebox=$(".high-enjoyevent");
	ebox.css({
	zIndex:10,display:"block"}
).animate({
	opacity:1}
,800,function(){
	ebox.siblings().css({
	zIndex:1}
);
	ebox.removeClass("outstage").addClass("instage");
}
);
}
,outStage:function(cb){
	VIVO_UIMIX.main.high.enjoyevent.stop();
	var ebox=$(".high-enjoyevent");
	setTimeout(function(){
	ebox.animate({
	opacity:0}
,800);
	ebox.removeClass("instage").addClass("outstage");
	if (cb) cb();
}
,1);
}
}
,xshotnew:{
	timehandle:false,stop:function(){
	if(VIVO_UIMIX.main.high.xshotnew.timehandle){
	clearTimeout(VIVO_UIMIX.main.high.xshotnew.timehandle);
	VIVO_UIMIX.main.high.xshotnew.timehandle=false;
}
}
,init:function(){
	var ebox=$(".high-xshotnew");
	ebox.removeClass("instage").addClass("outstage");
}
,inStage:function(){
	VIVO_UIMIX.main.high.xshotnew.stop();
	var ebox=$(".high-xshotnew");
	ebox.css({
	zIndex:10,display:"block"}
).animate({
	opacity:1}
,800,function(){
	ebox.siblings().css({
	zIndex:1}
);
	ebox.removeClass("outstage").addClass("instage");
}
);
}
,outStage:function(cb){
	VIVO_UIMIX.main.high.xshotnew.stop();
	var ebox=$(".high-xshotnew");
	setTimeout(function(){
	ebox.animate({
	opacity:0}
,800);
	ebox.removeClass("instage").addClass("outstage");
	if (cb) cb();
}
,1);
}
}
,y18l:{
	timehandle:false,stop:function(){
	if(VIVO_UIMIX.main.high.y18l.timehandle){
	clearTimeout(VIVO_UIMIX.main.high.y18l.timehandle);
	VIVO_UIMIX.main.high.y18l.timehandle=false;
}
}
,init:function(){
	var ebox=$(".high-y18l");
	ebox.removeClass("instage").addClass("outstage");
}
,inStage:function(){
	VIVO_UIMIX.main.high.y18l.stop();
	var ebox=$(".high-y18l");
	ebox.css({
	zIndex:10,display:"block"}
).animate({
	opacity:1}
,800,function(){
	ebox.siblings().css({
	zIndex:1}
);
	ebox.removeClass("outstage").addClass("instage");
}
);
}
,outStage:function(cb){
	VIVO_UIMIX.main.high.y18l.stop();
	var ebox=$(".high-y18l");
	setTimeout(function(){
	ebox.animate({
	opacity:0}
,800);
	ebox.removeClass("instage").addClass("outstage");
	if (cb) cb();
}
,1);
}
}
,imgsearch_event:{
	timehandle:false,stop:function(){
	if(VIVO_UIMIX.main.high.imgsearch_event.timehandle){
	clearTimeout(VIVO_UIMIX.main.high.imgsearch_event.timehandle);
	VIVO_UIMIX.main.high.imgsearch_event.timehandle=false;
}
}
,init:function(){
	var ebox=$(".high-imgsearch_event");
	ebox.removeClass("instage").addClass("outstage");
}
,inStage:function(){
	VIVO_UIMIX.main.high.imgsearch_event.stop();
	var ebox=$(".high-imgsearch_event");
	ebox.css({
	zIndex:10,display:"block"}
).animate({
	opacity:1}
,800,function(){
	ebox.siblings().css({
	zIndex:1}
);
	ebox.removeClass("outstage").addClass("instage");
}
);
}
,outStage:function(cb){
	VIVO_UIMIX.main.high.imgsearch_event.stop();
	var ebox=$(".high-imgsearch_event");
	setTimeout(function(){
	ebox.animate({
	opacity:0}
,800);
	ebox.removeClass("instage").addClass("outstage");
	if (cb) cb();
}
,1);
}
}
,xshot:{
	timehandle:false,stop:function(){
	if(VIVO_UIMIX.main.high.xshot.timehandle){
	clearTimeout(VIVO_UIMIX.main.high.xshot.timehandle);
	VIVO_UIMIX.main.high.xshot.timehandle=false;
}
}
,init:function(){
	var ebox=$(".high-xshot");
	ebox.removeClass("instage").addClass("outstage");
}
,inStage:function(){
	VIVO_UIMIX.main.high.xshot.stop();
	var ebox=$(".high-xshot");
	ebox.css({
	zIndex:10,display:"block"}
).animate({
	opacity:1}
,800,function(){
	ebox.siblings().css({
	zIndex:1}
);
	ebox.removeClass("outstage").addClass("instage");
}
);
}
,outStage:function(cb){
	VIVO_UIMIX.main.high.xshot.stop();
	var ebox=$(".high-xshot");
	setTimeout(function(){
	ebox.animate({
	opacity:0}
,800);
	ebox.removeClass("instage").addClass("outstage");
	if (cb) cb();
}
,1);
}
}
}
;

CSS代码(iefixed.css):

/* service */
.download-box .dl-wall a.funos span img.focus{display:none;}
.download-box .dl-wall a.funos:hover span img.focus{display:block;}
.download-box .dl-wall a.video span img.focus{display:none;}
.download-box .dl-wall a.video:hover span img.focus{display:block;}
.dl-mobile-slide a.prev,.dl-mobile-slide a.next{display:none;}
.dl-mobile-slide a.prev.start,.dl-mobile-slide a.next.start{display:block;}
.dl-service .dl-service ul li{float:left;width:19%;}
/* choose mobile */
.choose-mb-nav ul li{*border-top-style:expression(this.previousSibling==null?'none':'solid');}

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