js 滚轮事件滚轮焦点图（轮播图）

最新推荐文章于 2021-08-19 11:22:55 发布

weixin_30690833

最新推荐文章于 2021-08-19 11:22:55 发布

阅读量190

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/surfaces/p/4546171.html

版权

利用滚轮，切换轮播图。附带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{width:800px; height:450px; overflow:hidden; position:relative; margin:60px auto;}
#focus ul{margin:0; padding:0;width:800px;height:450px; position:absolute;   overflow:hidden;list-style:none;}
#focus ul li{ float:left; display:inline;list-style:none;}
#focus ul li img{width:800px;height:450px;overflow:hidden;}
#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;}
#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:5px; text-align:right;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
#focus .btn span.on {background:#fff;}
#focus .preNext {width: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>

<!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

转载于:https://www.cnblogs.com/surfaces/p/4546171.html

weixin_30690833

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 滚轮事件滚轮焦点图（轮播图）

利用滚轮，切换轮播图。附带mousewheel插件以及原生js写法；<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" />&lt...
复制链接

扫一扫