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

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

拥有以下功能：

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

1.html代码如下：

    
    


    

            

                

                

                

                

            
            



            
            
<
            
>
    
    
    

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


            });