web|html+css+jQuery实现多种图片简单切换功能大综合

学习鼠标滑动监听事件,顺便了复习一些其他相关的事件,记录下来以备下次实现类似功能时参考。


拥有以下功能:
1.向左向右无缝滑动
2.自动轮播
3.鼠标左右滑动,img移动
4.鼠标悬浮img,img停止轮播功能
5.鼠标移动到底部原点,显示哪张图片


1.html代码如下:

- 锐客网
  • web|html+css+jQuery实现多种图片简单切换功能大综合
    文章图片
  • web|html+css+jQuery实现多种图片简单切换功能大综合
    文章图片
  • web|html+css+jQuery实现多种图片简单切换功能大综合
    文章图片
  • web|html+css+jQuery实现多种图片简单切换功能大综合
    文章图片
    < >



    2.css代码如下:

    *{ padding:0px; margin:0px; list-style:none; } .banner { width:500px; height:300px; margin:100px auto; border:1px solid #808080; position:relative; overflow:hidden; } .banner .img{width:5000px; position:absolute; left:0px; top:0px; } .banner .img img{width:500px; height:300px; } .banner .img li{float:left; } .banner .num { position:absolute; width:100%; bottom:10px; left:0px; text-align:center; font-size:0px; } .banner .num li { width:10px; height:10px; background-color:#888; border-radius:50%; display:inline-block; margin:0px 3px; cursor:pointer; } .banner .num li.on {background-color: #ff6a00; } .banner .btn { width: 30px; height: 50px; background-color: #808080; opacity: 0.5; filter:alpha(opacity:0.5); position:absolute; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; font-size:40px; color:#fff; font-family:"宋体"; display:none; } .banner .btn_l { left:0px; } .banner .btn_r { right:0px; } .banner:hover .btn { display:block; }


    3.js 代码以及相应解释如下

    $(document).ready(function () {var i = 0; var clone = $(".banner .img li").first().clone(); //克隆第一张图片 $(".banner .img").append(clone); //复制到列表最后 var size = $(".banner .img li").size(); console.log(size); //计算li的数量//添加四个li,就是添加圆点 for (var j = 0; j < size-1; j++) { $(".banner .num").append("
  • "); } //给第一个li添加class on $(".banner .num li").first().addClass("on"); /*移动事件*/ function move() { if (i == size) { $(".banner .img").css({ left: 0 }); i = 1; } if (i == -1) { $(".banner .img").css({ left: -(size - 1) * 500 }); i = size - 2; } $(".banner .img").stop().animate({ left: -i * 500 }, 500); if (i == size - 1) { //eq(index)选择器选取带有指定 index 值的元素 //siblings()遍历所有同胞元素 $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on"); } else { $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on"); } }//var t = setInterval(function () { i++; move(); },2000); //$(selector).hover(inFunction,outFunction) /*自动轮播*/ /*鼠标悬停事件*/ /*$(".banner").hover(function () { clearInterval(t); //鼠标悬停时清除定时器 }, function () { t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时重置定时器 }); *//*鼠标滚动监听事件*/ var scrollFunc=function(e){ ee=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta>0){ console.log(e.wheelDelta); i++; console.log(i); move(); }else{ i--; console.log(e.wheelDelta); console.log(i); move(); } }else if(e.detail){//Firefox if(e.detail>0){move(); }else{move(); } } } /*注册事件*/ if(document.addEventListener){ //addEventListener(event,function,useCapture) //useCapture为boolean值,false(默认)z在冒泡阶段执行,ture在捕获阶段执行 document.addEventListener('DOMMouseScroll',scrollFunc,false); } //window.onmousewheel=document.onmousewheel=scrollFunc; document.onmousewheel=scrollFunc; //鼠标滚动一格触发一次监听事件,chrome支持,火狐不支持 //window.onmousewheel=scrollFunc; //也只触发一次事件,火狐浏览器不支持,chrome支持/*鼠标滑入原点事件*/$(".banner .num li").hover(function () {var index = $(this).index(); //获取当前索引值 i = index; $(".banner .img").stop().animate({ left: -index * 500 }, 500); $(this).addClass("on").siblings().removeClass("on"); }); /*向左按钮*/ $(".banner .btn_l").click(function () { i++; move(); })/*向右按钮*/ $(".banner .btn_r").click(function () { i--; move(); })});



    【web|html+css+jQuery实现多种图片简单切换功能大综合】


      推荐阅读