当前位置: 首页 > 编程笔记 >

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

徐奇逸
2023-03-14
本文向大家介绍基于javascript实现图片左右切换效果,包括了基于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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍基于javascript实现图片切换效果,包括了基于javascript实现图片切换效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现图片切换效果,供大家参考,具体内容如下 用js实现点击按钮,图片切换的效果: 结构:用一个固定宽高的div来做最外层的容器,设置overflow为hidden, 然后内层img_box设置宽度为四倍box的宽度,高度相同,也就是

  • 本文向大家介绍jquery实现左右轮播切换效果,包括了jquery实现左右轮播切换效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery实现左右轮播切换效果展示的具体代码,供大家参考,具体内容如下 html: css:  js: php: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍js实现图片从左往右渐变切换效果的方法,包括了js实现图片从左往右渐变切换效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现图片从左往右渐变切换效果的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍jQuery实现左右切换焦点图,包括了jQuery实现左右切换焦点图的使用技巧和注意事项,需要的朋友参考一下 演示图: 代码: 以上所述就是本文的全部内容了,希望大家能够喜欢。

  • 本文向大家介绍Android控件ImageSwitcher实现左右图片切换功能,包括了Android控件ImageSwitcher实现左右图片切换功能的使用技巧和注意事项,需要的朋友参考一下 ImageSwitcher类是ViewSwitcher类的子类,它实现的效果是在完成ImageView的切换并且带有动画效果。要使用这个类需要以下两个步骤: 1)为ImageSwitcher类提供一个View

  • 本文向大家介绍简单实现JavaScript图片切换效果,包括了简单实现JavaScript图片切换效果的使用技巧和注意事项,需要的朋友参考一下 JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval()函数