360网页轮换图代码【提炼版】

最新推荐文章于 2021-10-10 22:10:36 发布

火焰之心

最新推荐文章于 2021-10-10 22:10:36 发布

阅读量796

点赞数

分类专栏： HTML和CSS JS或JQuery

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

17 篇文章 0 订阅

订阅专栏

HTML和CSS

9 篇文章 0 订阅

订阅专栏

HTML

<script src="/css_js/jquery190.js"></script>
<script src="/css_js/mousewheel3.06.js"></script>

<!-------------------------轮换图-------------------------------->
	<div id="turnImg">
		<ul class="slide">
			<li class="selected">
				<div class="slide-i" style="background-image:url(/css_js/imgs/mm01.jpg);">
                <a href="/news/newsdetail.asp?newsID=104" class="bt-open" target="_blank"></a>
				</div>
			</li>
			<li>
				<div class="slide-i" style="background-image:url(/css_js/imgs/mm02.jpg);">
                <a href="/news/newsdetail.asp?newsID=106" class="bt-open" target="_blank"></a>
				</div>
			</li>
			<li>
				<div class="slide-i" style="background-image:url(/css_js/imgs/mm03.jpg);">
                <a href="/news/newsdetail.asp?newsID=105" class="bt-open" target="_blank"></a>
				</div>
			</li>
			<li>
				<div class="slide-i" style="background-image:url(/css_js/imgs/mm04.jpg);">
				</div>
			</li>
			<li>
				<div class="slide-i" style="background-image:url(/css_js/imgs/mm05.jpg);">
				</div>
			</li>
            <li>
				<div class="slide-i" style="background-image:url(/css_js/imgs/mm06.jpg);">
				</div>
			</li>
		</ul>
		<ul class="ctrl">
			<li class="selected"></li> <li></li> <li></li> <li></li> <li></li> <li></li>
		</ul>
        <a class="bt-l"></a><a class="bt-r"></a>
	</div>
<!------------------------轮换图结束------------------------------->

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

  if(!window.console || !window.console.log){//清空控制台显示的信息，是测试时用到的
    window.console = {};
    window.console.log = function(){};
  }
  
  
    var len = $('.slide li').length;
    $(".ctrl").css({"width":(20*len)+"px", "margin-left":"-"+(10*len)+"px"});//小圆点的总宽度及居中位置偏移量
    var $slide = $('.slide');
    var $slideLi = $('.slide li');
    var $ctrlLi = $('.ctrl li');
    var timer = null;
    var isanimate=false;
    var autoPlaySpeed = 6000;

//图像滑出和淡出，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, 'yes');//自动播放时，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);
    	}
    });

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

    $("#turnImg").mousewheel(function(event, delta) {//鼠标滚轮动作，此处才用到了mousewheel3.06.js
    	if(!isanimate){
    		onmousewheel(delta);
    	}
    	stopPlay();
		return false;//去除滚轮的默认的上下移动页面动作
    });

    $(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;
      }
    });

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

});

CSS

@charset "utf-8";

ul, li{margin:0; padding:0; border:0; list-style:none;}
a{color:#0063c8;text-decoration:none;}
a:hover,a:active,a:focus{color:#0063c8;text-decoration:underline;}
#turnImg {height:340px; position:relative;}

.slide {width:978px;height:310px; position:absolute; top:0; left:1px;}
.slide li {position: absolute; width:978px; overflow: hidden; height:310px; top:0;left:0; display: none;}
.slide li.selected {display: block;}
.slide .slide-i {height:310px; position:relative; background-position:0 0; background-repeat:no-repeat;}
.ctrl {width:120px; position:absolute; bottom:4px; left:50%; margin-left:-60px;}
.ctrl li {width:20px; height:20px; background:url(/css_js/imgs/bg_ctrl.png) no-repeat -20px 0; cursor:pointer; float:left;}
.ctrl li.selected {background-position:0 0; cursor:default;}

.bt-l { background:url(/css_js/imgs/bg_l.png) no-repeat -30px 0; bottom:0px; left:0px;}
.bt-r { background:url(/css_js/imgs/bg_r.png) no-repeat -30px 0; bottom:0px; right:0px;}
.bt-l, .bt-r { position:absolute; cursor:pointer; display:block; width:30px; height:29px;}
.bt-l:hover, .bt-r:hover {background-position:0 0;}

.bt-open {position:absolute;display:block; width:140px; height:40px; left:752px; top:188px;}

用到的图片

bg_ctrl.png

bg_l.png

bg_r.png