基于javascript实现图片左右切换效果

前端技术 2023/09/03 JavaScript

本文实例介绍了javascript实现图片左右切换效果的详细代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

<html>
  <head>
    <title>JS图片左右切换效果</title>
    <meta charset=\"utf-8\"/>
    <style type=\"text/css\">
      *{
        margin:0;
        padding:0;       
      }    
         
      .images-scroll{
        border:1px solid #CCC;
        margin:100px auto;
        width:300px;
        height:200px;
        position:relative;
      }  
       
      .images-scroll ul{
        list-style:none;
      }
 
      .images-scroll li{
        float:left; 
        display:none;      
      }
 
      .images-scroll .active{
        display:block;
      }
 
      .images-scroll a{
         
      }
 
      .images-scroll img{
        width:300px;
        height:200px;
        border:none;
      }            
       
      .images-scroll .left-scroll{
        position:absolute;
        top:40%;
        left:-40px;
        opacity:0;
        background:url(\"images/bg_direction_nav.png\");
        background-repeat:no-repeat;
        background-position:0px 0px;
        height:27px;
        width:27px;
        cursor:pointer;
      }
 
      .images-scroll .right-scroll{
        position:absolute;
        top:40%;
        opacity:0;
        right:-40px;
        background:url(\"images/bg_direction_nav.png\");
        background-repeat:no-repeat;
        background-position:-30px 0px;
        height:27px;
        cursor:pointer;
        width:27px;       
      }  
 
      .images-scroll .right-scroll:hover{
        background-color:transparent;
      }
 
    </style>
    <script src=\"jquery-1.8.2.js\"></script>
  </head>
  <body>
     
    <div id=\"images-scroll\" class=\"images-scroll\">
      <ul>
        <li class=\"active\"><a href=\"\"><img src=\"images/1.jpg\" alt=\"\"></a></li>
        <li><a href=\"\"><img src=\"images/2.jpg\" alt=\"\"></a></li>
        <li><a href=\"\"><img src=\"images/3.jpg\" alt=\"\"></a></li>
        <li><a href=\"\"><img src=\"images/4.jpg\" alt=\"\"></a></li>
      </ul>
      <span id=\"left-scroll\" class=\"left-scroll\"></span>
      <span id=\"right-scroll\" class=\"right-scroll\"></span>
    </div>
    <script type=\"text/javascript\">  
 
      $(\"#images-scroll\").mouseover(function(){
        $(\"#left-scroll\").animate({left: \'10px\',opacity:\'1\',},400);
        $(\"#right-scroll\").animate({right: \'10px\',opacity:\'1\',},400);
      })
      $(\"#images-scroll\").mouseleave(function(){
        $(\"#left-scroll\").animate({left: \'-40px\',opacity:\'0\',},400);
        $(\"#right-scroll\").animate({right: \'-40px\',opacity:\'0\',},400);        
      })
 
      imgScroll=setInterval(\"runScroll()\",3000);
      var last_idx=$(\"#images-scroll ul li\").index($(\"#images-scroll ul li:last\"));
      function runScroll(){          
        var idx=$(\"#images-scroll ul li\").index($(\"#images-scroll ul .active\")[0]);
        $(\"#images-scroll li\").eq(idx).removeClass(\"active\").hide();
        idx+=1;
        if(idx%(last_idx+1)==0){
          idx=0;
        }
        $(\"#images-scroll li\").eq(idx).addClass(\"active\").show();
      }
      $(\"#left-scroll\").click(function(){
        var idx=$(\"#images-scroll ul li\").index($(\"#images-scroll ul .active\")[0]);
        $(\"#images-scroll li\").eq(idx).removeClass(\"active\").hide();
        idx-=1;
        if(idx==-1){
          idx=last_idx;
        }
        $(\"#images-scroll li\").eq(idx).addClass(\"active\").show();
      })
      $(\"#right-scroll\").click(function(){
        runScroll();
      })     
    </script>
     
  </body>
</html>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/7089

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案