实现一个图片切换功能

最新推荐文章于 2019-07-29 18:27:23 发布

Sunflower_long

最新推荐文章于 2019-07-29 18:27:23 发布

阅读量526

点赞数

分类专栏：前端文章标签： js html css

本文链接：https://blog.csdn.net/Sunflower_long/article/details/43236267

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 每点击一次右箭头，图片区域向左滚动出一张图片，反之相同；
2. 当发现图片滚动到末尾时，响应的箭头变成不可点击状态；

3. 鼠标在图片区域内滑动滚轮，图片会随着鼠标滚轮的方向进行响应的滚动；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    body{
        box-sizing: border-box;
    }
    ul{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    li{
        list-style: none;
        box-sizing: border-box;
    }
    a{
        text-decoration: none;
    }
    #wrap{
        width: 1000px;
        height: 150px;
        margin: 0 auto;
    }
    .left{
        float: left;
        width: 40px;
        background-color: burlywood;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
    }
    .right{
        float: right;
        width: 40px;
        background-color: burlywood;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
    }
    .piece{
        font-size: 20px;
        height: 100%;
        line-height: 100%;
        vertical-align: middle;
        padding: 50px 0 ;
        box-sizing: border-box;

    }
    #content{
        margin: 10px 50px;
        box-sizing: border-box;
    }
    ul {
        white-space: nowrap;
        overflow-x: hidden;
        width: 900px;
    }
    li{
        display: inline-block;
        position: relative;
        transition: left 0.7s;
        -moz-animation: left 0.7s;
        -webkit-transition: left 0.7s;
        box-sizing: border-box;
    }
    #imgcontainer img{
        height: 150px;
        width: 150px;
        border: 1px grey solid;
        box-sizing: border-box;
    }
</style>
<body>
<div id="wrap">
    <div class="left piece" id="pre"><a href="#"><--</a></div>
    <div class="right piece" id="next"><a href="#">--></a></div>
    <div id="content">
        <ul id="imgcontainer">
            <li><a href="#"><img src="img/1.jpg"></a></li>
            <li><a href="#"><img src="img/2.jpg"></a></li>
            <li><a href="#"><img src="img/3.jpg"></a></li>
            <li><a href="#"><img src="img/4.jpg"></a></li>
            <li><a href="#"><img src="img/3.jpg"></a></li>
            <li><a href="#"><img src="img/4.jpg"></a></li>
            <li><a href="#"><img src="img/2.jpg"></a></li>
            <li><a href="#"><img src="img/3.jpg"></a></li>
            <li><a href="#"><img src="img/1.jpg"></a></li>
            <li><a href="#"><img src="img/2.jpg"></a></li>
            <li><a href="#"><img src="img/3.jpg"></a></li>
            <li><a href="#"><img src="img/4.jpg"></a></li>
        </ul>
    </div>
</div>
<script>
    var EventUtil={
        addHandler:function(ele,type,handler){
            if(ele.addEventListener){
                ele.addEventListener(type,handler,false);
            }else if(ele.attachEvent){
                ele.attachEvent(type,handler,false)
            }else {
                element["on" + type] = handler;
            }
        },
        removeHandler:function(ele,type,handler){
            if(ele.removeEventListener){
                ele.removeEventListener(type,handler);
            }else if(ele.detachEvent){
                ele.detachEvent(type,handler)
            }else {
                element["on" + type] = null;
            }
        },
        getEvent:function(eve){
           return event!==null?event:window.event;
    }
    }
    var ImageScroll=function(){
        var imgcontainer=document.getElementById('imgcontainer');
        var imgs=imgcontainer.children;
        var pre=document.getElementById('pre');
        var next=document.getElementById('next');
        EventUtil.addHandler(pre,'click',getPre)
        EventUtil.addHandler(next,'click',getNext);
        EventUtil.addHandler(imgcontainer,'mousewheel',imgScroll)
        function imgScroll(event){
            event=EventUtil.getEvent(event);
            if(event.wheelDelta>0){
                getNext();
            }else{
                getPre();
            }
        }
        function getPre(){
            for(var i= 0,len=imgs.length;i<len;i++){
                var left=getWidth(imgs[i].style.left)-150;
                if(left<=-680){
                    left=-680;
                }
                imgs[i].style.left=left+'px';
            }
        }
        function getNext(){
            for(var i= 0,len=imgs.length;i<len;i++){
                var left=getWidth(imgs[i].style.left)+150;
                if(left>=0){
                    left=0;
                }
                imgs[i].style.left=left+'px';
            }
        }
        function getWidth(px){
            if(/px$/.test(px)){
                return parseInt(px);
            }else{
                return 0;
            }
        }
    };
    window.οnlοad=function(){
        ImageScroll();
    };
</script>

</body>
</html>

Sunflower_long

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现一个图片切换功能

1. 每点击一次右箭头，图片区域向左滚动出一张图片，反之相同； 2. 当发现图片滚动到末尾时，响应的箭头变成不可点击状态； 3. 鼠标在图片区域内滑动滚轮，图片会随着鼠标滚轮的方向进行响应的滚动； *{ margin: 0; padding: 0; } body{ box-s
复制链接

扫一扫