利用滚轮，切换轮播图。附带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>



本文地址：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






												


											
js 滚轮事件 滚轮焦点图（轮播图）的更多相关文章
	

    
						
  1. jQuery制作焦点图(轮播图)
		
    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
    
		
    2. 
						
  2. vue.js学习之better-scroll封装的轮播图初始化失败
		
    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
    
		
    3. 
						
  3. Js封装的动画函数实现轮播图
		
    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...
    
		
    4. 
						
  4. 原生JavaScript（js）手把手教你写轮播图插件（banner）
		
    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
    
		
    5. 
						
  5. 原生js用div实现简单的轮播图
		
    文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...
    
		
    6. 
						
  6. 告别组件之教你使用原生js和css写移动端轮播图
		
    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
    
		
    7. 
						
  7. 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
		
    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
    
		
    8. 
						
  8. 原生js轮播图
		
    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. 原生js实现一个简单的轮播图
		
    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
    
		
    10. 
						
  10. React视角下的轮播图
		
    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. SecureCRT学习之道：用SecureCRT来上传和下载数据
			
    今天才知道,原来SecureCRT可以使用linux下的zmodem协议来快速的传送文件,而且还使用非常方便哦,我还傻傻的找其他软件来sftp,笨死了:(你只要设置一下上传和下载的默认目录就行opti ...
    
			
    2. 
						
  2. Akka边学边写（3）-- ByteString介绍
			
    Akka的IO层设计能够參考这篇文档,本文简介一下ByteString的设计. Immutable消息 Actor之间是通过消息沟通的.但为了避免同步问题,消息必须是Immutable. 因此.Akk ...
    
			
    3. 
						
  3. BZOJ 1269 文本编辑器 Splay
			
    题目大意:维护一个文本编辑器,支持下列操作: 1.将光标移动到某一位置 2.在光标后插入一段字符串 3.删除光标后的一段字符 4.翻转光标后的一段字符 5.输出光标后的一个字符 6.光标-- 7.光标 ...
    
			
    4. 
						
  4. Dom4j分解xml
			
    package cn.com.guju.util; import java.io.ByteArrayInputStream; import java.io.UnsupportedEncodingExc ...
    
			
    5. 
						
  5. WinForm 国际化开发一例
			
    1.新建一个WinForm程序(在中文版的Windows下),如下,添加1个Button和1个Label 设置Form1的localizable属性为True(Form1的properties里的De ...
    
			
    6. 
						
  6. Java中动态代理技术生成的类与原始类的区别
			
    用动态代理的时候,对它新生成的类长什么样子感到好奇.有幸通过一些资料消除了心里的疑惑. 平时工作使用的Spring框架里面有一个AOP(面向切面)的机制,只知道它是把类重新生成了一遍,在切面上加上了后 ...
    
			
    7. 
						
  7. Maven学习笔记(三) ：Maven使用入门
			
    编写POM:      Maven项目的核心是pom.xml.POM(Project Object Model,项目对象模型)定义了项目的基本信息,用于描写叙述项目怎样构建,声明项目依赖,等等.    ...
    
			
    8. 
						
  8. 认识Backbone (四)
			
    Backbone.View(视图) 视图的核心是处理数据业务逻辑.绑定DOM元素事件.渲染模型或者集合数据. 添加DOM元素  render view.render() render 默认实现是没有操 ...
    
			
    9. 
						
  9. MongoDB学习笔记-认识MongoDB
			
    学习参考地址 http://www.runoob.com/mongodb NoSql 流行的数据库Oracle,SqlServer,MySql为关系性数据库,相对的,也有非关系性数据库,统称为NoSq ...
    
			
    10. 
						
  10. 【OpenCV新手教程之十八】OpenCV仿射变换 &amp; SURF特征点描写叙述合辑
			
    本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/33320997 作者:毛星云(浅墨)  ...
    
			
    11.