（原生JS）图片无缝滚动、图片转化、轮播图、折叠效果

最新推荐文章于 2022-09-13 18:03:35 发布

果果ha

最新推荐文章于 2022-09-13 18:03:35 发布

阅读量1.7k

点赞数

分类专栏： js css3 文章标签：轮播图原生JS图片效果

本文链接：https://blog.csdn.net/cuteyDan/article/details/79588453

版权

css3 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

1.图片无缝滚动（原生JS）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        *{box-sizing:border-box;}
        body{margin: 0 auto;}
        ul{margin:0;padding:0;}
        li{list-style: none;
          width: 250px;height: 300px;
          float: left;}
        .clearfix:before,.clearfix:after{display:table;content:"";}
        .clearfix:after{clear:both;}
        .clearfix{*zoom:1}
      .hide{width: 250px;height: 300px;
            overflow: hidden;
            margin: 50px auto;}
        .hide ul{position: relative;}
    </style>
</head>
<body>
<div class="hide">
        <ul class="clearfix">
            <li><img src="img/1.png" width="250" height="300"></li>
            <li><img src="img/2.png" width="250" height="300"></li>
            <li><img src="img/3.png" width="250" height="300"></li>
            <li><img src="img/4.png" width="250" height="300"></li>
        </ul>
</div>
<script src="jquery.min.js"></script>
<script>
    $('li').clone().appendTo('.clearfix');//克隆
    //$('ul').html($('ul').html()+$('ul').html());
    $('ul').css('width',$('li').outerWidth()*$('li').length+'px');
    //alert( $('ul').width());
    var onOff=true;
    var timer = null;
    var nowLeft=0;
    $('.hide').hover(function(){
        onOff=false;
    },function(){
        onOff=true;
    })
    timer=setInterval(function(){
        if(onOff){
            nowLeft+=-5;
            if(nowLeft<=-$('ul').outerWidth()/2){
                nowLeft=0;
            }
            $('ul').css('left',nowLeft+'px');
        }
    },100);
</script>
</body>
</html>

2.图片转化

//图片转化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片转化</title>
    <style type="text/css">
        body{margin: 0;padding: 0;}
        input{background: #FFFFFF;}
    </style>
</head>
<body>
<img src="img/1.png" id="img1" width="390" height="490"><br/>
<input type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<input type="button" value="4"/>
<script>
    var aBtn=document.getElementsByTagName('input');
    var oImg=document.getElementById('img1');
    var timer=null;
    var iNum=0;
  for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].οnclick=function(){
            oImg.src='img/'+(this.index+1)+'.png';
            iNum=this.index;
            fun0();
        }
    }
    function change(){
        if(iNum==aBtn.length-1){
            iNum=0;
        }else{
            iNum++;
        }
        oImg.src='img/'+(iNum+1)+'.png';
        fun0();
    }
    timer=setInterval(change,1000);
    oImg.οnmοuseοver=function(){
        clearInterval(timer);
    };
    oImg.οnmοuseοut=function(){
        timer=setInterval(change,1000);
    };
    function fun0(){
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].style.background='white';
            aBtn[iNum].style.background='red';
        }
    }
</script>
</body>
</html>

3.轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滚动</title>
    <style type="text/css">
        *{box-sizing:border-box;}
        body{margin: 0 auto;}
        ul{margin:0;padding:0;}
        li{list-style: none;
            width: 250px;height: 300px;
            float: left;}
        .clearfix:before,.clearfix:after{display:table;content:"";}
        .clearfix:after{clear:both;}
        .clearfix{*zoom:1}
        .hide{width: 750px;height:300px;
              overflow: hidden;
              margin: 50px auto;
              position: relative;}
        .hide ul{position: relative;}
        .left,.right{width: 30px;height: 50px;
                      background: #FFFFFF;opacity: 0.3;
                      font-size: 40px;
                      cursor: pointer;
                      text-align: center;line-height: 50px;
                      }
        .right,.left:hover{opacity: 0.8;}
        /*绝对定位 脱离文档流*/
        .left{ position: absolute;left: 0;top:125px;}
        .right{ position: absolute;right: 0;top:125px;}
    </style>
</head>
<body>
<div class="hide">
    <ul class="clearfix">
        <li><img src="img/1.png" width="250" height="300"></li>
        <li><img src="img/2.png" width="250" height="300"></li>
        <li><img src="img/3.png" width="250" height="300"></li>
        <li><img src="img/4.png" width="250" height="300"></li>
    </ul>
    <div class="left"> <</div>
    <div class="right"> ></div>
</div>
<script src="jquery.min.js"></script>
<script>
    $('li').clone().appendTo('.clearfix');//克隆
    //$('ul').html($('ul').html()+$('ul').html());
    $('ul').css('width',$('li').outerWidth()*$('li').length+'px');
    //alert( $('ul').width());
    //动画
    var nowNum=0;
    var onOff=true;
    var timer=null;
    timer=setInterval(clickRight,2000);
    $('.hide').hover(function(){
        clearInterval(timer);
    },function(){
        timer=setInterval(clickRight,2000);
    })
    $('.left').on('click',function(){
        if(onOff){clickLeft();}
    });
    $('.right').on('click',function(){
        if(onOff){clickRight();}
    });
    //左
    function clickLeft() {
        onOff = !onOff;
        if(nowNum ==0){
            nowNum = $('ul li').length / 2;//如果在第一张图片 拉到第四张图片开始跑
            $('ul').css('left', -$('ul').outerWidth() / 2 + 'px');
        }
        nowNum--;
        //animate动画
        $('ul').animate({'left': -nowNum * $('ul li').outerWidth() + 'px'}, 400, function () {
            onOff = !onOff;
        });
    }
    //右
    function clickRight(){
        onOff=!onOff;
        if(nowNum==$('ul li').length/2){
            nowNum=0;
            $('ul').css('left',0+'px')
        }
        nowNum++;
        $('ul').animate({'left':-nowNum *$('ul li').outerWidth()+'px'},400,function(){
            onOff=!onOff;
        })
    }
</script>
</body>
</html>

4.折叠效果

 <ul>
    <li>
        <a href="#">这是第一个</a>
        <ol>
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
        </ol>
    </li>
    <li>
        <a href="#">这是第二个</a>
        <ol>
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
        </ol>
    </li>
    <li>
        <a href="#">这是第三个</a>
        <ol>
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
        </ol>
    </li>
</ul>
<script src="jquery.min.js"></script>
<script>
    $('a').click(function(){
        $(this).next().show();//$(this).next().css('display','block');
        $(this).parents('li').siblings() .find('ol').hide();
    })
</script>

果果ha

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
（原生JS）图片无缝滚动、图片转化、轮播图、折叠效果

1.图片无缝滚动（原生JS）&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;无缝滚动&lt;/title&gt; &lt;style type="text/css"&amp
复制链接

扫一扫