360网页上的轮换图代码

最新推荐文章于 2024-08-30 10:26:43 发布

火焰之心

最新推荐文章于 2024-08-30 10:26:43 发布

阅读量821

点赞数

分类专栏： HTML和CSS JS或JQuery

JS或JQuery 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML和CSS

9 篇文章 0 订阅

订阅专栏

CSS

* {margin:0; padding:0; border:0; list-style:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
html,body {height:100%; overflow: hidden;}
body {font:12px/1.5 arial,helvetica,sans-serif; text-align:center; color: #333;
	background:#f9f9f9 url(images/bg_x.jpg) repeat-x 0 0;
	background:-webkit-gradient(linear, 0 0, 0 50%, from(#cccccc), to(#f9f9f9));
}
a{color:#0063c8;text-decoration:none;}
a:hover,a:active,a:focus{color:#0063c8;text-decoration:underline;}
#hd {height:100; position: relative; width: 100%; border:1px solid black;}
#hd h1 { position: absolute; left: 50%; margin-left: -265px; bottom: 0; width: 529px; height: 53px; -webkit-transform:scale(1); transform:scale(1); border:1px solid red;}
#bd {height:558px; position:relative;}
.bt-open {position:absolute; left:682px; top:280px; display:block; width:166px; height:37px; overflow:hidden; text-indent:-999em; background:url(images/bt_open.png) no-repeat -166px 0;}
.bt-open:hover {background-position:0 0;}
.bt-next {display:block; width:78px; height:78px; background:url(images/bt_next.png) no-repeat 0 0; border:1px solid red;}
.bt-share {position:absolute; right:43px; top:0; display:block; width:44px; height:89px; overflow:hidden; text-indent:-999em; background:url(images/bt_share.png) no-repeat 0 0;}
.bt-share:hover {background-position:-45px 0;}
.slide {width:1100px;height:558px; position:absolute; top:0; left:50%; margin-left:-550px; border:1px solid red;}
.slide li {position: absolute; width:1100px; overflow: hidden; height:558px; top:0;left:0; display: none; -webkit-transform:scale(1); transform:scale(1);}
.slide li.selected {display: block;}
.slide .slide-i {height:558px; position:relative; border:1px solid blue;}
.slide .slide-1 {background: url(images/mm01.jpg) no-repeat 0 0;}
.slide .slide-3 {background: url(images/mm02.jpg) no-repeat 0 0;}
.slide .slide-4 {background: url(images/mm03.jpg) no-repeat 0 0;}
.slide .slide-2 {background: url(images/mm04.jpg) no-repeat 0 0;}
.slide .slide-5 {background: url(images/mm05.jpg) no-repeat 0 0;}
.slide .slide-5 .bt-open {left:715px; top:278px;  border:1px solid red;}
.ctrl {width:120px; position:absolute; top:50%; right:60px; margin-top:-55px;}
.ctrl li {width:23px; height:22px; background:url(images/bg_ctrl.png) no-repeat -23px 0; cursor:pointer; float:left;}
.ctrl li.selected {background-position:0 0; cursor:default;}

#ft {text-align:center; height:78px;}
#ft .bt-next {margin:auto;}

HTML

<div id="doc">
	<div id="hd" class="clearfix">
		<h1>欢迎使用极速浏览器7.0版</h1>
		<a target="_blank" href="http://service.weibo.com/share/share.php?url=http://down.360safe.com/cse/360cse_7.0.0.540.exe&title=我正在使用 @360极速浏览器7.0版本，超级给力！可以把浏览器背景设置成性感美女、可爱宠物、动画卡通哦！这么好的浏览器必须推荐给大家啊！下载地址:&pic=http://p2.qhimg.com/d/360browser/20130131/p.jpg" class="bt-share"></a><!--分享到新浪微博，带文字带图片-->
	</div>
	<div id="bd">
		<ul class="slide slide-content">
			<li class="selected">
				<div class="slide-i slide-1">
				</div>

			</li>
			<li>
				<div class="slide-i slide-2">
				</div>
			</li>
			<li>
				<div class="slide-i slide-3">
				</div>

			</li>
			<li>
				<div class="slide-i slide-4">
				</div>

			</li>
			<li>
				<div class="slide-i slide-5">
					<a href="#" class="bt-open">开启全新极速体验</a>
				</div>

			</li>
		</ul>
		<ul class="ctrl slide-nav">
			<li class="selected"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div id="ft">
		<a href="#" class="bt-next slide-pagedown"></a>
	</div>
</div>

jQuery(function($){//可以把jQuery换成$

  if(!window.console || !window.console.log){//清空控制台显示的信息，是测试时用到的
    window.console = {};
    window.console.log = function(){};
  }
  
  
	var len = $('.slide li').length;
	var $slide = $('.slide');
	var $slideLi = $('.slide li');
	var $ctrlLi = $('.ctrl li');
	var timer = null;
	var isanimate=false;
    var autoPlaySpeed = 4000;

//图像滑出和淡出，cb是动画结束后调用的动作函数，本例为无
	function animate_out(target,updown,cb){
	  isanimate = true;
      if(updown=='down'){
        target.stop(true,true).css({display:'block'}).animate({left:+400,opacity:0},500,function(){
          $(this).hide();
          if(cb){
            cb();
          }
        })
      }else{
        target.stop(true,true).css({display:'block'}).animate({left:-400,opacity:0},500,function(){
          $(this).hide();
          if(cb){
            cb();
          }
        });
      }
    }

//图像滑入和淡入
    function animate_in(target,updown,cb){
      isanimate = true;
      if(updown=='down'){
        target.stop(true,true).css({'display':'block',left:'-200px',opacity:0}).animate({'left':0,opacity:1},800,function(){
          if(cb){
            cb();
          }
        });
      }else{
        target.stop(true,true).css({'display':'block',left:'200px',opacity:0}).animate({'left':0,opacity:1},800,function(){
          if(cb){
            cb();
          }
        });
      }
    }

    function switchTo(preIdx, idx, dur){//结合滑出和滑入的综合动作
		animate_out($slideLi.eq(preIdx),dur);
    	animate_in($slideLi.eq(idx),dur, function(){//滑入后，让isanimate为false
		    isanimate=false;
    	});
		$slideLi.removeClass('selected');
	    $slideLi.eq(idx).addClass('selected');
	    $ctrlLi.removeClass('selected');
	    $ctrlLi.eq(idx).addClass('selected');
    }

 	function onmousewheel(delta,isrepeat){//不仅是滚轮动作，自动滑动和键盘操作，都在调用此onmousewheel
    	var preIdx = $('.selected',$slide).index();//动画前的当前li的序号作为preIdx
    	var idx;
    	var dur;

    	if(delta > 0){
    		dur = 'up';
    		idx = (parseInt(preIdx,10) + len - 1)%len;//滚轮向上时，新图序号=当前图序号+全图数量-1，再求余数，这样即使当前图序号为0，结果也是最后一个序号，而不会是-1
    	}else{
    		dur = 'down';
    		idx = (parseInt(preIdx,10) + len + 1)%len;//同理，这样最后图序号+1，也不会超过，而是变成0
    	}

        var isrepeat = isrepeat || 'yes';//默认是循环播放，当isrepeat值是'no'时，到了最后一幅图就不再动了
        console.log(isrepeat);
        if(isrepeat === 'no'){
            if(dur === 'up' && preIdx === 0){//从第一副向上到最后一幅，跳出此滚轮功能
                return;
            }
            if(dur === 'down' &&  preIdx == len - 1 ){//向下到最后一幅图，跳出此滚轮功能
                return;
            }
        }

    	console.log(idx, preIdx, dur);
		
    	switchTo(preIdx, idx , dur);//调用综合动画
    }


    function autoPlay(){
    	window.clearInterval(timer);

    	timer = window.setInterval(function(){
	    	if(!isanimate){
                onmousewheel(-1, 'no');//自动播放时，isrepeat是'no'
                var preIdx = $('.selected',$slide).index();//加上,$slide是为了限制在$slide里的.selected？
                if(preIdx == len - 1 ){//最后一图时停止，和上面功能同，可以不要
                    stopPlay();
                }
            }
	    	console.log('autoPlay');
	    },autoPlaySpeed);
    }

    function stopPlay(){
    	window.clearInterval(timer);
    	console.log('stopPlay');
    }

    autoPlay();

    $slide.mouseenter(function(){//鼠标进入停止，移出后1秒继续。事件动作可以连写
    	stopPlay();
    }).mouseleave(function(){
    	setTimeout(function(){
    		autoPlay();
    	},1000);
    });

    $ctrlLi.on('click',function(e){//小圆点按钮动作
    	stopPlay();
    	var idx = $(this).index();
    	var preIdx = $('.selected',this.parentNode).index();//this.parentNode被点击者的父元素
    	var dur = (preIdx > idx) ? 'up' : 'down';
    	if(!isanimate){//不在滑动的过程中（即isanimate = false），按钮才有效
    		switchTo(preIdx, idx, dur);
    	}
    });

    $('.slide-pagedown').on('click', function(e){//向后按钮动作
    	stopPlay();
    	if(!isanimate){onmousewheel(-1);}
    });

    $(document).mousewheel(function(event, delta) {//鼠标滚轮动作，此处才用到了mousewheel3.06.js
    	if(!isanimate){
    		onmousewheel(delta);
    	}
    	stopPlay();
    });

    $(document).keyup(function(e){
      stopPlay();
      switch(e.which){
        case 38://↑键
        case 37://←键
        	if(!isanimate){//不在滑动的过程中（即isanimate = false），按键才有效
              	onmousewheel(1);//不带第二个参数（isrepeat）时，默认是'yes'，到了最后一幅仍可以动画
          	}
            break;
        case 32://空白键
        case 39://→键
        case 40://↓键
        	if(!isanimate){
             	onmousewheel(-1);
            }
          break;
      }
    });


    $(window).resize(function(){
      var winWidth=$(window).width();
      var winHeight=$(window).height();
      var scaleX = (winWidth > 1280) ? 1 : ((winWidth) / 1280);
      var scaleY = (winHeight > 800) ? 1 : ((winHeight) / 800);
      var scale = (scaleX > scaleY) ? scaleY : scaleX;

      $('.slide-i').css({'-webkit-transform':'scale('+scale+')'});
      $('#hd h1').css({'-webkit-transform':'scale('+scale+')'});
      $('#hd').css({height:100 * scale });
      $('#bd,#bd .slide,#bd .slide li').css({height:558 * scale });

    }).resize();//一进页面立即执行一次

    $(".bt-open").click(function(){
       chrome.tabs.create({"url":"chrome://newtab"});
		window.open('','_self','');
	    window.close();
    });

});