基于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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
对node.js中render和send的用法详解
May 14 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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框架Phpbean说明
2008/01/10 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
PHP文件操作方法汇总
2015/07/01 PHP
php三元运算符知识汇总
2015/07/02 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
原生JavaScript实现todolist功能
2018/03/02 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
村庄环境整治方案
2014/05/15 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
内勤岗位职责范本
2015/04/13 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
python manim实现排序算法动画示例
2022/08/14 Python