首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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实现图片左右切换效果

- Author -

马富天

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
纯javascript制作日历控件
Jul 17 Javascript
jQuery实用技巧必备（下）
Nov 03 Javascript
js实现登录验证码
Dec 22 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
vuejs如何配置less
Apr 25 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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
蓝牙(1) 鸿蒙3.0(1) 华为(1) HarmonyOS(1) 鸿蒙(2) Debian(1) 蓝牙耳机(1) RustDesk(1) xhunter1.sys(1) 虚拟键盘(1)
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
vue如何判断dom的class
2018/04/26 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
jQuery选择器选中最后一个元素，倒数第二个元素操作示例
2018/12/10 jQuery
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python3中sys.argv的实例用法
2020/04/24 Python
药学专业大专生的自我评价
2013/12/12 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
七年级作文之游记
2019/12/11 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL