您的位置：首页 > Web前端 > JQuery

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

2017-04-12 21:06 1086 查看
学习鼠标滑动监听事件，顺便了复习一些其他相关的事件，记录下来以备下次实现类似功能时参考。

拥有以下功能：

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

1.html代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div class="banner">
            <ul class="img">
                <li><img src="img/0.jpg" alt=""/></li>
                <li><img src="img/0.jpg" alt="" /></li>
                <li><img src="img/1.jpg" alt="" /></li>
                <li><img src="img/2.jpg" alt="" /></li>
            </ul>
            <ul class="num">

            </ul>
            <div class="btn btn_l"><</div>
            <div class="btn btn_r">></div>
    </div>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/index.js"></script>
</body>
</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></li>");
}
//给第一个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();
})

});



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                滑动轮播
                                                左右轮播
                                                自动轮播
                                                悬浮停止
                                                悬浮选择
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航