javascript效果：手风琴、轮播图、图片滑动【转载】（有同文了，主要是写给自己看的）

最新推荐文章于 2024-08-26 10:46:55 发布

37 degrees Celsius

最新推荐文章于 2024-08-26 10:46:55 发布

阅读量727

点赞数 1

文章标签： javascript

原文链接：https://www.cnblogs.com/zhangzhicheng/p/5870311.html

版权

本文介绍了如何使用CSS和JavaScript实现手风琴效果，包括纯CSS实现、CSS3利用radio单选特性的实现以及JavaScript的实现方式。此外，还详细讲解了轮播图的制作，包括自动轮播、手动切换和索引点的交互，以及两种不同的轮播图实现方式。文章最后展示了图片滑动效果的实现，通过动态改变图片位置实现平滑过渡。

摘要由CSDN通过智能技术生成

手风琴：

纯css：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴css</title>
    <style>
    .showBox{
        width: 660px;
        overflow: hidden;
    }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            width: 30000px;
        }
        
        ul li{
            float: left;
            position: relative;
            height: 254px;
            width: 110px;
            overflow: hidden;
            transition: all 0.3s;
        }
        /* 这是css手风琴的核心，就是hover的使用
        **首先是ul:hover li这个触发了经过ul但没有经过li的变化
        **然后是ul li:hover这里是被经过li的变化，匹配css3动画效果，
        和css3的一些对页面美化的效果，就可以做出一个很好看的手风琴，
        如果使用纯js实现可能很麻烦。
         */
        ul:hover li{
            width:22px;
        }
        ul li:hover{
            width: 460px;
        }

        ul li img{
            width: 550px;
            height: 254px;
        }
        ul li span{
            width: 22px;
            position: absolute;
            top: 0;
            right: 0;
            height: 204px;
            padding-top: 50px;
            color: #fff;
        }
        ul li span.bg1{
            background: #333;
        }
        ul li span.bg2{
            background: #0f0;
        }
        ul li span.bg3{
            background: #ff7500;
        }
        ul li span.bg4{
            background: #0ff;
        }
        ul li span.bg5{
            background: #00f;
        }
    </style>
    <script type="text/javascript">
        
    </script>
</head>
<body>
    <div class="showBox">
        <ul>
            <li><span class="bg1">这是第一个</span><img src="1.jpg" alt=""></li>
            <li><span class="bg2">这是第二个</span><img src="2.jpeg" alt=""></li>
            <li><span class="bg3">这是第三个</span><img src="3.jpg" alt=""></li>
            <li><span class="bg4">这是第四个</span><img src="4.jpg" alt=""></li>
            <li><span class="bg5">这是第五个</span><img src="5.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

css3手风琴：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3-checked:</title>
    <style>
    /* 使用了radio的单选特性，实现手风琴效果 */
        ul{
            display: none;
        }
         input{display: none;} 
         label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;} 
         .list > ul{display: none; -webkit-transition:all .5s linear; -moz-transition:all .5s linear; -ms-transition:all .5s linear; -o-transition:all .5s linear; transition:all .5s linear;} 
         #list1:checked + ul{display: block;} 
         #list2:checked + ul{display: block;} 
         #list3:checked + ul{display: block;} 
         #list4:checked + ul{display: block;}
    </style>
</head>
<body>
    <div> <label for="list1">我的同学</label> <input type="radio" name="list" id="list1" checked="chekced"/> 
    <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list2">我的同学</label> 
    <input type="radio" name="list" id="list2"/> 
    <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list3">我的同学</label> <input type="radio" name="list" id="list3"/> <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list4">我的同学</label> <input type="radio" name="list" id="list4"/> <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> </div>
</body>
</html>

javascript实现的手风琴：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <style>
    .showBox{
        width: 660px;
        overflow: hidden;
    }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            width: 30000px;
        }
        ul li.active{
            width: 550px;
        }
        ul li{
            float: left;
            position: relative;
            height: 254px;
            width: 22px;
            overflow: hidden;
        }
        ul li img{
            width: 660px;
            height: 254px;
        }
        ul li span{
            width: 22px;
            position: absolute;
            top: 0;
            left: 0;
            height: 204px;
            padding-top: 50px;
        }
        ul li span.bg1{
            background: #333;
        }
        ul li span.bg2{
            background: #0f0;
        }
        ul li span.bg3{
            background: #ff7500;
        }
        ul li span.bg4{
            background: #0ff;
        }
        ul li span.bg5{
            background: #00f;
        }
    </style>

    <script type="text/javascript">
        window.onload=function ()
        {
            createAccordion('.showBox');
        };

        function createAccordion(name)
        {
            /*获取元素*/
            var oDiv=document.querySelector(name);
            /*声明最小宽度*/
            var iMinWidth=9999999;
            /*获取元素*/
            var aLi=oDiv.getElementsByTagName('li');
            var aSpan=oDiv.getElementsByTagName('span');
            /*定时器容器默认*/
            oDiv.timer=null;
            /*循环添加事件和自定义属性索引值*/
            for(vari=0;i<aSpan.length;i++)
            {
                aSpan[i].index=i;
                aSpan[i].onmouseover=function ()
                {
                    gotoImg(oDiv, this.index, iMinWidth);
                };
                /*获取最小宽度*/
                iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth);
            }
        };

        function gotoImg(oDiv, iIndex, iMinWidth)
        {
            if(oDiv.timer)
            {    /*清除定时器，避免叠加*/
                clearInterval(oDiv.timer);
            }
            /*开启定时器*/
            oDiv.timer=setInterval
            (
                function ()
                {
                    changeWidthInner(oDiv, iIndex, iMinWidth);
                }, 30
            );
        }
        /*这里是关键，运动*/
        function changeWidthInner(oDiv, iIndex, iMinWidth)
        {
            var aLi=oDiv.getElementsByTagName('li');
            var aSpan=oDiv.getElementsByTagName('span');
            /*获取盒子的大小，这个是总宽度*/
            var iWidth=oDiv.offsetWidth;
            /*缩进去的图片的宽度声明*/
            var w=0;
            /*判断的声明,为了清除定时器声明*/
            var bEnd=true;
            /*循环为了把每个图片都循环一遍，为了获取伸进和缩去的元素*/
            for(var i=0;i<aLi.length;i++)
            {
                /*这为获取伸进的索引*/
                if(i==iIndex)
                {
                    continue;
                }
                /*这里是没有变动的元素，所以都保存最小宽度*/
                if(iMinWidth==aLi[i].offsetWidth)
                {
                    /*总宽度减去这些宽度,因为他们也在总宽度里*/
                    iWidth-=iMinWidth;
                    continue;
                }
                /*走以下的循环里代码的是缩去的元素*/
                /*不清除定时器，还没运动完*/
                bEnd=false;
                /*获取速度,先快后慢*/
                speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10);
                /*缩去剩下的宽度*/
                w=aLi[i].offsetWidth-speed;
                /*为避免缩去元素小于最小宽度*/
                if(w<=iMinWidth)
                {
                    w=iMinWidth;
                }
                /*设置缩去元素的宽度*/
                aLi[i].style.width=w+'px';
                /*减去缩去的宽度，剩下的就是伸进的宽度*/
                iWidth-=w;
            }
            /*伸进元素的宽度*/
            aLi[iIndex].style.width=iWidth+'px';
            
            if(bEnd)
            {
                clearInterval(oDiv.timer);
                oDiv.timer=null;
            }
        }
    </script>
</head>
<body>
    <div class="showBox">
        <ul>
            <li class="active"><span class="bg1">这是第一个</span><img src="1.jpg" alt=""></li>
            <li><span class="bg2">这是第二个</span><img src="2.jpeg" alt=""></li>
            <li><span class="bg3">这是第三个</span><img src="3.jpg" alt=""></li>
            <li><span class="bg4">这是第四个</span><img src="4.jpg" alt=""></li>
            <li><span class="bg5">这是第五个</span><img src="5.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

接下来的都是会使用到动画效果，既然这样就把封装好运动：

/*使用调用，obj对象，attr属性，speed速度，iTarget想达到的值，fn回调函数*/
/*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了，
    其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线
*/
        function doMove(obj,attr,speed,iTarget,fn){
            if(attr=="opacity"){
                obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
            }else{
                obj.len=iTarget-parseFloat(getStyle(obj,attr));
            }
            /*这里判断方向，在初始点后的为负数，在初始点前为正数*/
            speed=obj.len>0?speed:-speed;

            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                if(!obj.num){
                    obj.num=0;
                }
                if(attr=="opacity"){
                    obj.num=parseFloat(getStyle(obj,attr))*100+speed;
                }else{
                    obj.num=parseInt(getStyle(obj,attr))+speed;
                }
                /*这里是判断到了目标点没有，到了就停止定时器*/
                if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
                    obj.num=iTarget;
                    clearInterval(obj.timer);
                }
                if(attr=="opacity"){
                    obj.style[attr]=obj.num/100;
                }else{
                    obj.style[attr]=obj.num+"px";
                }
                /*因为放在上面无法实现到回调函数的完整作用，出现一些BUG*/
                if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
                    fn && fn();
                }
            },30);

        }
        /*获取css属性值的，会获取表现出现的值*/
        function getStyle(obj,attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        }

轮播图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <!-- 这是引用封装好运动函数 -->
    <script type="text/javascript" src="doMove.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            /*调用实现轮播*/
            carousel("carousel")
        }
        
        function carousel(name){
            var oScl=document.getElementById(name);
            var oUl=oScl.querySelector("ul");
            var aLi=oUl.querySelectorAll("li");
            var next=document.getElementById("next");
            var pre=document.getElementById("pre");
            var aIndex=oScl.querySelectorAll(".index span");
            var num=0;
            var index=0;
            /*给第一个图片最高级层级*/
            aLi[0].style.zIndex=5;
            /*判断定时器存不存在*/
            if(!oScl.timer){
                oScl.timer=null;
            }

            /*这是自动轮播开启*/
            oScl.timer=setInterval(function(){
                num++;
                num%=aLi.length;
                play();
            },2000);
            /*上下页显示、隐藏*/
            oScl.onmouseover=function(){
                /*移入停止定时器*/
                clearInterval(oScl.timer);
                next.style.display="block";
                pre.style.display="block";
            }
            oScl.onmouseout=function(){
                next.style.display="none";
                pre.style.display="none";
                /*移出开启定时器*/
                    oScl.timer=setInterval(function(){
                        num++;
                        num%=aLi.length;
                        play();
                },2000);
            }
            /*点击上下页*/
            next.onclick=function(){
                num++;
                num%=aLi.length;
                play();
            }
            pre.onclick=function(){
                if(!aLi[index]){
                    index=num;
                }
                num--;
                if(num<0){
                    num=aLi.length-1;
                }
                play();
            }

            /*索引点*/
            for(var i=0;i<aIndex.length;i++){
                aIndex[i].index=i;
                aIndex[i].onmouseover=function(){
                    num=this.index;
                    play();
                }
            }
            /*动画执行函数*/
            function play(){
                /*判断是否是相同触发点，如索引点的两次移入都是相同的，
                    如果是不执行,避免连续重复执行
                */
                if(index!=num){
                    for(var i=0;i<aLi.length;i++){
                        /*设置全部层级为1*/
                        aLi[i].style.zIndex=1;
                    }
                    /*设置上次轮播过的图的层级为2*/
                        aLi[index].style.zIndex=2;
                        aIndex[index].className="";    
                        aIndex[num].className="active";
                        index=num;
                        /*设置这次轮播的图透明度为0*/
                    aLi[num].style.opacity=0;
                    /*设置这是轮播的图的层级为5*/
                    aLi[num].style.zIndex=5;
                    /*运动函数封装，淡出这次的图*/
                    doMove(aLi[num],"opacity",10,100);
                }
            }
        }


    </script>
    <style>
        a{
            text-decoration: none;
            color: #555;
        }
        #carousel{
            font-family: "微软雅黑";
            position: relative;
            width: 800px;
            height: 400px;
            margin:  0 auto;
        }
        #carousel ul{
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
        }
        #carousel ul li{
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }
        .imgBox img{
            width: 800px;
            height: 400px;
        }
        .btn{
            position: absolute;
            z-index: 10;
            top: 50%;
            width: 45px;
            height: 62px;
            margin-top: -31px;
            text-align: center;
            line-height: 62px;
            font-size: 40px;
            background: rgba(0,0,0,0.4);
            opacity: alpha(opacity=50);
            display: none;
        }
        #pre{
            left: 0;
        }
        #next{
            right: 0;
        }
        #carousel .index{
            position: absolute;
            bottom: 10px;
            left: 50%;
            z-index: 10;
        }
        #carousel .index span{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #87CEFA;
            display: inline-block;
            box-shadow:1px 1px 6px #4169E1; 
        }
        #carousel .index span.active{
            background: #4169E1;
            box-shadow:1px 1px 6px #87CEFA inset; 
        }
    </style>
</head>
<body>
    <div id="carousel">
        <ul class="imgBox">
            <li><a href="#"><img src="1.jpg" alt=""></a></li>
            <li><a href="#"><img src="2.jpg" alt=""></a></li>
            <li><a href="#"><img src="3.jpg" alt=""></a></li>
            <li><a href="#"><img src="4.jpg" alt=""></a></li>
            <li><a href="#"><img src="5.jpg" alt=""></a></li>
        </ul>
        <a href="javascript:;" class="btn" id="next">></a>
        <a href="javascript:;" class="btn" id="pre"><</a>
        <div class="index">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>

这个是使用插件做的：responsiveslides.js

基于jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入插件js和jquery -->
    <script src="jquery-2.0.3.js"></script>
    <script src="responsiveslides.js"></script>
    <style>
        #banner{
            position: relative;
            width: 800px;
        }
        /* 插件的默认css属性 */
        .rslides {
          position: relative;
          list-style: none;
          overflow: hidden;
          width: 100%;
          padding: 0;
          margin: 0;
          }

        .rslides li {
          -webkit-backface-visibility: hidden;
          position: absolute;
          display: none;
          width: 100%;
          left: 0;
          top: 0;
          }

        .rslides li:first-child {
          position: relative;
          display: block;
          float: left;
          }

        .rslides img {
          display: block;
          height: auto;
          float: left;
          width: 100%;
          border: 0;
          }
          /* ，被修改过的，修改成圆点按钮 */
         ul.rslides_tabs.rslides1_tabs {
            position: absolute;
            bottom: 10px;
            left: 45%;
            list-style: none;
            z-index: 10;
        }
        ul.rslides_tabs.rslides1_tabs li{
            float: left;
            
        }
        ul.rslides_tabs.rslides1_tabs li a{
            display: block;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            margin-right: 10px;
            background: #fff;
        }
        /* .rslides_here 这个相当于active */
        ul.rslides_tabs.rslides1_tabs li.rslides_here a{
            background: #004F88;
        }
        /* 左右按钮的class名 */
        .rslides_nav.rslides1_nav{
            position: absolute;
            top: 50%;
            color: #eee;
            font-size: 40px;
            text-decoration: none;
            z-index: 4;
        }
        .rslides_nav.rslides1_nav.pre{
            left: 10px;
        }
        .rslides_nav.rslides1_nav.next{
            right: 10px;
        }

        .rslides img{
            height: 400px;
        }
    </style>
    <script>
  $(function() {
    $(".rslides").responsiveSlides({
          pager: true,          
           // 默认为false,需要展示时（true）展示索引点，默认为数字12345，去js库里修改就可以了
          nav: true,             // 展示上一张和下一张的导航
          pause: false,           // 鼠标移入移出是否停止
          pauseControls: true,    // Boolean: Pause when hovering controls, true or false
          prevText: "<",   // 修改左右按钮的符号
          nextText: ">",       // String: Text for the "next" button
          "maxwidth":"800px"
    });
    $(".rslides1_nav").css("display","none");   
    $("#banner").mouseover(function(){
        $(".rslides1_nav").css("display","block");
    })
     $("#banner").mouseout(function(){
        $(".rslides1_nav").css("display","none");
    })
    
  });
</script>
    </script>
</head>
<body>
<!-- 使用一个div包住它，而那些js添加的标签会直接加载到ul标签后面 -->
<div id="banner">
    <ul class="rslides" id="rslides">
      <li><img src="111.jpg" alt=""></li>
      <li><img src="222.jpg" alt=""></li>
      <li><img src="333.jpg" alt=""></li>
      <li><img src="444.jpg" alt=""></li>
      <li><img src="555.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

图片滑动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滑动</title>
    <style>
        .container{
            position: relative;
            width: 630px;
            border: 2px solid #888;
            padding: 5px;
        }
        .c-wrap{
            width: 630px;
            overflow: hidden;
        }
        .container img{
            width: 200px;
            height: 90px;
        }

        .container ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .container ul li{
            float: left;
            margin-right: 10px;
        }
        .container .imgBigBox{
            width: 33000px;
            margin-left: 0px;
        }
        .imgBigBox:after{
            content: " ";
            display: block;
            clear: both;
        }
        .btnGroup{
            border: 1px solid #888;
            width: 65px;
        }
        .btnGroup a{
            text-align: center;
            line-height: 20px;
            text-decoration: none;
            color: #888;
            font-size: 20px;
            display: inline-block;
            width: 30px;
        }
        .btn1{
            margin-right: 4px;
            border-right: 1px solid #888;
        }
    </style>
    <!-- 引用运动函数 -->
    <script type="text/javascript" src="doMove.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            /*调用函数实现滑动*/
            slide(".container");
        }

        function slide(name){
            var oContainer=document.querySelector(name);
            var oImgBigBox=oContainer.querySelector(".imgBigBox");
            var aBtn=oContainer.querySelectorAll(".btnGroup a");
            var oC_wrap=oContainer.querySelector(".c-wrap");
            /*获取滑动宽度*/
            var w=oC_wrap.offsetWidth;
            /*点击左边按钮*/
            aBtn[0].onclick=function(){
                doMove(oImgBigBox,"marginLeft",10,-w,function(){
                var child=oImgBigBox.children[0].cloneNode(true);
                    oImgBigBox.appendChild(child);
                    oImgBigBox.removeChild(oImgBigBox.children[0]);
                    oImgBigBox.style.marginLeft="0px";
                })
            }
            /*点击右边按钮*/
            aBtn[1].onclick=function(){
                    oImgBigBox.insertBefore(oImgBigBox.children[1],oImgBigBox.children[0]);
                    oImgBigBox.style.marginLeft=-w+"px";
                doMove(oImgBigBox,"marginLeft",10,0)
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="c-wrap">
            <div class="imgBigBox">
                <ul class="imgBox">
                    <li><img src="1.jpg" alt=""></li>
                    <li><img src="2.jpg" alt=""></li>
                    <li><img src="3.jpg" alt=""></li>
                </ul>
                <ul class="imgBox">
                    <li><img src="4.jpg" alt=""></li>
                    <li><img src="5.jpg" alt=""></li>
                    <li><img src="6.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <div class="btnGroup">
            <a href="javascript:;" class="btn1"><</a><a href="javascript:;" class="btn2">></a>    
        </div>
    </div>
</body>
</html>

到此为止

转载于:https://www.cnblogs.com/zhangzhicheng/p/5870311.html