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


Posted in Javascript onJanuary 25, 2016

本文实例介绍了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之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
微信小程序 video组件详解
Oct 25 Javascript
JavaScript严格模式详解
Jan 16 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 #Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 #Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 #Javascript
jQuery中inArray方法注意事项分析
Jan 25 #Javascript
jquery ui dialog替代confirm实例分析
Jan 25 #Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 #Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 #Javascript
You might like
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP可变函数的使用详解
2013/06/14 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
实现PHP搜索加分页
2016/10/12 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
layui使用label标签的方法
2019/09/14 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
详解python中的json和字典dict
2018/06/22 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
Python Process多进程实现过程
2019/10/22 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
Java中实现多态的机制
2015/08/09 面试题
优秀大学生求职自荐信范文
2014/04/19 职场文书
五四青年节的活动方案
2014/08/20 职场文书
上课不认真检讨书
2014/09/17 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
师德师风个人总结
2015/02/06 职场文书
城管年度个人总结
2015/02/28 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
vue实现移动端div拖动效果
2022/03/03 Vue.js
分享Python异步爬取知乎热榜
2022/04/12 Python