zoukankan      html  css  js  c++  java
  • js 滚轮事件 滚轮焦点图(轮播图)

    利用滚轮,切换轮播图。附带mousewheel插件以及原生js写法;

     
    
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1"  />
    <meta name="viewport" content="width=1200,user-scalable=yes" />
    <title>滚轮切换图片轮播</title>
    <script src="../js/jquery-1.8.2.min.js"></script>
    <!--<script type="text/javascript" src="https://raw.githubusercontent.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>-->
    <script  src="../js/mousewheel.min.js"></script>
    </head>
    <style>
    #focus{800px; height:450px; overflow:hidden; position:relative; margin:60px auto;}
    #focus ul{margin:0; padding:0;800px;height:450px; position:absolute;   overflow:hidden;list-style:none;}
    #focus ul li{ float:left; display:inline;list-style:none;}
    #focus ul li img{800px;height:450px;overflow:hidden;}
    #focus .btnBg {position:absolute; 800px; height:20px; left:0; bottom:0; background:#000;}
    #focus .btn {position:absolute; 780px; height:10px; padding:5px 10px; right:0; bottom:5px; text-align:right;}
    #focus .btn span {display:inline-block; _display:inline; _zoom:1; 25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
    #focus .btn span.on {background:#fff;}
    #focus .preNext {45px; height:100px; position:absolute; top:170px;  background:url(../images/view/spritesss.png) no-repeat #000;cursor:pointer;}
    #focus .pre {left:0;}
    #focus .next {right:0; background-position:right top;}
     </style>  
    <body style="height:2000px;">
    
     <div id="focus" > 
          <ul > 
          <li><a><img src="../images/love5.jpg"></a></li> 
          <li><a><img src="../images/love3.jpg"></a></li>  
          <li><a><img src="../images/love4.jpg"></a></li>  
          <li><a><img  src="../images/love1.jpg"></a></li> 
          </ul> 
        </div> 
        
    <center><button id="sasas">观察我</button><p>在轮播图滚轮操时候,body禁止滚轮</p></center>
    
    
    
    <script>
    $(document).ready(function(e) {
    	
    	var $myfocus=$("#focus"),
            sWidth=$myfocus.width(),
    		len=$("#focus ul li").length,
    		index=0,
    		picTimer; 
    	
    	// 定义动态按钮 变量
    	var btn="<div class='btnBg'></div><div class='btn'>";
    	for(var i=0;i<len;i++){
    	  btn += "<span></span>";						 
    	  }
    	  btn += "</div> <div class='preNext pre'></div><div class='preNext next'></div>";
    	
    	$myfocus.append(btn);
    	$("#focus .btnBg").css('opacity',0.5);
    	
    	  //上一页、下一页按钮透明
    	$("#focus .preNext").css('opacity',0.2).hover(function(e) {
    	   $(this).stop(false,true).animate({"opacity":"0.5"},'slow');					
    		},function(){
    		$(this).stop().animate({'opacity':0.1},'slow')					
    	});
    
      //为小按钮添加鼠标滑入事件,以显示相应的内容
       $("#focus .btn span").css('opacity',0.5).mouseenter(function(e){
           index=$("#focus .btn span").index(this);
    	    showPics(index);
    	   }).eq(0).trigger("mouseenter");
    	   
    	   
    	 
      //上一页按钮
       var isClick=true,clickTime=null;     //添加开关以及计时器 防止过快点击 运行2
       $myfocus.on("click",".pre",function(e){
    		//console.log(e.target.tagName+"is clicked,促发了冒泡");
    	 if(isClick){  
    		     index-=1;
    	         if(index==-1){index=len-1}
    		     showPics(index);
    		     isClick=false;
    	    }
    	   clearTimeout(clickTime);
    	   clickTime=setTimeout(function(){isClick=true;},300)  	
    	    
    	});
      
       //下一页按钮
       $myfocus.on("click",".next",function(e){
    	   if(isClick){
    	       index+=1;
    		   if(index==len){index=0}
    		   showPics(index);
    		   isClick=false;
    	   }
    		 clearTimeout(clickTime);
    	     clickTime=setTimeout(function(){isClick=true;},300)  	
    	});	
        
    	
    	
        //鼠标滚轮切换图片轮播   利用 mousewheel插件的用法     //绑定在li 上面
    	//var timer=null;
    //    $('#focus').find('li').mousewheel(function(e, delta,deltaX,deltaY) {    //alert('进入了该方法');  //绑定在li 上面
    //	         
    //			 if(timer){
    //				 clearInterval(timer);
    //				 }
    //	         var index=$('#focus').find('li').index(this);	
    //		     if(delta > 0){ //alert('向上上滚动');	   
    //				 index-=1;
    //	             if(index==-1){index=len-1}
    //		       	timer=setTimeout(function(){showPics(index)},30 );;
    //			}else{ //alert('鼠标滚轮向下  下 面滚动');
    //		         index+=1;
    //		         if(index==len){index=0}
    //		       	timer=setTimeout(function(){showPics(index)},30 );;	
    //			 }	
    //			return false; //阻止滚轮事件冒泡   检点图里面滚动操作时候,body的滚动条禁止  特别注意 	 			
    //      }); 
         
    	 //鼠标滚轮切换图片轮播   利用 mousewheel插件的用法     //绑定在 $('#focus')上
    //	 var flags=true, durs=navigator.userAgent.indexOf("Firefox")>0?780:300; //火狐的滚轮间隔时间需要长一点 不然连续两次一起
    //     $('#focus').mousewheel(function(e, delta,deltaX,deltaY) {    //alert('进入了该方法');
    //			 if(flags){
    //				 if(delta > 0){ //alert('向上上滚动');	   
    //					 index-=1;
    //					 if(index==-1){index=len-1}
    //				   showPics(index)
    //				  }else{ //alert('鼠标滚轮向下  下 面滚动');
    //					 index+=1;
    //					 if(index==len){index=0}
    //				   showPics(index)
    //				 }	
    //			 	 $('#sasas').html('当滚到的是第'+index);
    //			    clearTimeout(picTimer);
    //			    flags=false;
    //		        setTimeout(function(){ flags=!flags;},durs); 
    //			
    //	         }	
    //		return false; //阻止滚轮事件冒泡   检点图里面滚动操作时候,body的滚动条禁止  特别注意
    //      }); 
    	  
    	 
    	 //原生js方法
    	 //自定义滚轮的公共方法				
         function wheel(obj, fn ,useCapture){
    	 var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x  
    	 if (obj.attachEvent) //if IE (and Opera depending on user setting)  
        	obj.attachEvent("on"+mousewheelevt, handler, useCapture);  
    	 else if (obj.addEventListener) //WC3 browsers  
        	obj.addEventListener(mousewheelevt, handler, useCapture);
    
    	 function handler(event) {
    		 var delta = 0,	
    		    event = window.event || event ,
    	        delta =  event.detail ?  -event.detail/3 : event.wheelDelta/120;
    		if (event.preventDefault)
    					event.preventDefault();
    		 event.returnValue = false;
    		 return fn.apply(obj, [event, delta]);
    	    }	
          }	
    	 
    
    	var flags=true,tmps=null;
       function rotateimages(delta,e){
    	   var ev=e||window.event;
    	   if(flags){
    		 index=(delta<=-1)? index+1 : index-1 ;
    		 index=(index<0)? len-1 : (index>len-1)? 0 : index;
    		
    		  $('#sasas').html('当滚到的是第'+index);
    		  
    		showPics(index)
    		flags=false;
    	   }
    	   clearTimeout(tmps);
    	   tmps=setTimeout(function(){flags=!flags; },250); 
    	   
    			if (window.event) {//IE
    		     ev.cancelBubble=true;
    	         } else { //FF
    		     ev.stopPropagation();
    	        }
    		return false;	 
    	}
    	
    	//原生js 调用
    	wheel($myfocus[0],function(e,delta){rotateimages(delta,e)},false);  
    	 
    	 
    	 
    	 
    
         //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放
    	$myfocus.hover(function(e) {
    		clearInterval(picTimer);
    	},function() {
    		picTimer = setInterval(function() {
    			showPics(index);
    			index++;
    			if(index == len) {index = 0;}
    		},3500); //此0000代表自动播放的间隔,单位:毫秒
    	}).trigger("mouseleave");
    	  
    	  	
         //先计算出外围的宽度 
         $("#focus ").find('ul').css('width',sWidth*len);	  
    
    	 
        function showPics(index) { //普通切换
    		var nowLeft = -(index*sWidth); //根据index值计算ul元素的left值
    		$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
    		$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
    	   }
    	   
    	  //console.log( $('*').length );  
    	     
    });
    </script>
         
    
    </body>
    </html>

    本文地址:http://www.cnblogs.com/surfaces

    js无缝轮播图备份

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>无缝轮播</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    ul,li{list-style:none;}
    
    .nav{width:500px;height:274px;margin:100px auto;border:5px solid #1111ee;font-size: 50px;position: relative; overflow:hidden;}
    
    .nav .images{width:500px;height:274px; position: absolute;left: 0;top:0}
    .nav .images li.one{width:500px; height:274px;  float:left;}
    
    
    .nav .num{ position: absolute;width: 100%; bottom: 8px;left: 0;text-align: center;font-size: 0px;}
    .nav .num li{display: inline-block;width: 15px;height: 15px;background-color: dimgrey;border-radius: 50%;cursor: pointer;margin-right: 5px; }
    .nav .num li.on{background-color: coral;}
    
    .nav .btn{width: 40px;height: 60px;background: rgba(0,0,0,0.5);position: absolute;top: 50%;margin-top: -30px;cursor: pointer;text-align: center;line-height: 60px;color: white;}
    .nav .btn_l{left:0;}
    .nav .btn_r{right:0;}
    </style>
    
    
    
    </head>
    <body>
    <div class="nav">
        <ul class="images">
            <li class="one" style="background:blue">1</li>
            <li class="one" style="background:red">2</li>
            <li class="one" style="background:green">3</li>
            
        </ul>
        <ul class="num">
            <li class="on"></li>
            <li></li>
            <li></li>
           
        </ul>
        <div class="btn btn_l">&lt;</div>
        <div class="btn btn_r">&gt;</div>
    </div>
    
    
    
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        
     function debounce(fn,timeout) {
        var last = 0;
        return function(){
        var curr = +new Date()
        if (curr - last > timeout){
          fn.apply(this, arguments)
          last = curr; 
        }
      }
    };
        
        
        
        
     $(function () {
         
        var clone=$(".nav .images li").first().clone();
        $(".nav .images").append(clone);
        var i=0;
        var length=$(".nav .images li").length;
        
        console.log(length+'length');
        
        $(".nav .images").width(length*500+'px')
                
    //点击向左轮播
     $(".nav .btn_l").on("click",debounce(function(){
          i--;
          console.log(i+'left');  
          if(i==-1){
            $(".nav .images").css({left:-(length-1)*500});   
            
            i=length-2; 
          }
          
          showImg(i);
          
      },300));
                
                
    //点击向右轮播
       $(".nav .btn_r").on("click",debounce(function(){
      
              i++;
              console.log(i+'rihht');
              if(i==length){
                $(".nav .images").css({left:0});  
                i=1;  
                
              }
          
            showImg(i);
            
       },300));
                
                
      //轮播公用方法    
      function showImg(i){
             
              $(".nav .images").stop().animate({left:-i*500}, 500);
                
              //小圆点操作
              if(i==length-1){//小圆点  第三个
                  $(".nav .num li").eq(0).addClass("on").siblings().removeClass("on");
              }else {
                  $(".nav .num li").eq(i).addClass("on").siblings().removeClass("on");
              }    
        }
                
                
                
    // 鼠标滑过圆点
      $(".nav .num li").hover(function () {
          var index=$(this).index();
          i=index;
          $(".nav .images").stop().animate({left:-i*500}, 500);
          $(this).addClass("on").siblings().removeClass("on");
      });
                
                
    // 定时自动轮播
    
        var t=setInterval(function () {
           showImg(i)
        },1500);
        
        
    //鼠标滑过图片停止自动轮播
      $(".nav").hover(
           function(){
           clearInterval(t);
          },
          function(){
              t=setInterval(function () {
                  
                  i++;
                  if(i==length){
                    $(".nav .images").css({left:0});  
                    i=1;  
                    
                  }
                  
                 showImg(i)
            },1500)
         }).trigger("mouseleave");
         
         
         
         
    })
    </script>
    
    </body>
    </html



  • 相关阅读:
    【C++】资源管理
    【Shell脚本】逐行处理文本文件
    【算法题】rand5()产生rand7()
    【Shell脚本】字符串处理
    Apple iOS产品硬件参数. 不及格的程序员
    与iPhone的差距! 不及格的程序员
    iPhone游戏 Mr.Karoshi"过劳死"通关. 不及格的程序员
    XCode V4 发布了, 苹果的却是个变态. 不及格的程序员
    何时readonly 字段不是 readonly 的?结果出呼你想象!!! 不及格的程序员
    object file format unrecognized, invalid, or unsuitable Command 不及格的程序员
  • 原文地址:https://www.cnblogs.com/surfaces/p/4546171.html
Copyright © 2011-2022 走看看