js实现单张图片平移切换效果


Posted in Javascript onOctober 11, 2017

本文参考了JQuery实现图片切换(自动切换+手动切换)

由于个人不需要手动切换功能,因此把那部分的内容删了,主要是增加了无缝切换的效果。

原理也很简单,大概是一张图移动到左边以后,从底部移回最右,等待下一次循环。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="js/jquery-1.10.1.min.js"></script>
</head>
<body> 
 <div class="wrapper"> 
  <h1>jquer实现图片切换</h1> 
  <div id="focus"> 
   <ul> 
    <!-- 这里有三个z-index的设置 -->
     <li><div class="switch_pic" style="z-index: 3;background: url('imgs/01.jpg') center center;background-size: cover;"></div></li> 
     <li><div class="switch_pic" style="z-index: 2;background: url('imgs/02.jpg') center center;background-size: cover;"></div></li> 
     <li><div class="switch_pic" style="z-index: 1;background: url('imgs/03.jpg') center center;background-size: cover;"></div></li> 
     <li><div class="switch_pic" style="background: url('imgs/04.jpg') center center;background-size: cover;"></div></li>
     <li><div class="switch_pic" style="background: url('imgs/meiko2.jpg') center center;background-size: cover;"></div></li>
     <li><div class="switch_pic" style="background: url('imgs/meiko7.jpg') center center;background-size: cover;"></div></li>
   </ul> 
   </div> 
  </div> 
  <script type="text/javascript">
  $(function() { 
  var sWidth = $("#focus").width(); 
  var len = $("#focus ul li").length; 
  var index = 0; 
  var picTimer; 
  var $pics = $("#focus ul li").find('.switch_pic');//获取所有图片

   showPics(index); //网页打开立即执行一次动画
   picTimer = setInterval(function() { 
    index++; 
    if(index == len) {index = 0;} 
    showPics(index); 
   },3000);//3000毫秒的间隔

  //显示图片函数,根据接收的index值显示相应的内容 
  function showPics(index) { //普通切换 
   var nowLeft = -sWidth; //每次移动固定量

   var $pic = $pics.eq(index);//获取当前要移出的图片
   var $nexPic = $pics.eq((index+1)%len);//当前要移入的图片
   var $nexnexPic = $pics.eq((index+2)%len);//下一个要移入的图片
   $nexPic.css("left",sWidth);//下一个图片移动到最右

   //当前要移出的图片开始左移,模式设为平滑"linear",速度和间隔一样
   $pic.animate({"left":nowLeft},3000,"linear",function(){
    // 当前图片完全移出后,重新设置z-index
    $pic.css("z-index",1);
    $nexPic.css("z-index",3);
    $nexnexPic.css("z-index",2);
   });
   //当前要移入的图片同时左移
   $nexPic.animate({"left":0},3000,"linear");
  } 
 }); 
</script>
<style type="text/css">
 *{margin:0;padding:0;} 
 body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} 
 .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} 
 .clearfix{zoom:1;} 
 ul,li{list-style:none;} 
 img{border:0;} 
 .wrapper{width:800px;margin:0 auto;padding-bottom:50px;} 
 h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 

 #focus{width:450px;height:350px;overflow:hidden;position:relative;} 
 #focus ul{height:380px;position:absolute;} 
 #focus ul li{float:left;width:450px;height:350px;overflow:hidden;position:absolute;background:#000;} 
 #focus ul li div{position:absolute;overflow:hidden;width: 450px;height: 350px;} 
</style>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
javascript相关事件的几个概念
May 21 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
Weex开发之地图篇的具体使用
Oct 16 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
jQuery自动或手动图片切换效果
Oct 11 #jQuery
简单实现vue验证码60秒倒计时功能
Oct 11 #Javascript
mui框架移动开发初体验详解
Oct 11 #Javascript
Scala解析Json字符串的实例详解
Oct 11 #Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
详解vue mint-ui源码解析之loadmore组件
Oct 11 #Javascript
JS随机排序数组实现方法分析
Oct 11 #Javascript
You might like
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
thinkphp分页集成实例
2017/07/24 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
Python 通过pip安装Django详细介绍
2017/04/28 Python
Python实现的矩阵类实例
2017/08/22 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python实现C4.5决策树算法
2018/08/29 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
家长会演讲稿范文
2014/01/10 职场文书
车辆安全检查制度
2014/01/12 职场文书
招商专员岗位职责
2014/02/08 职场文书
教师考核材料
2014/05/21 职场文书
员工工作能力评语
2014/12/31 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
志愿者工作心得体会
2016/01/15 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
Nginx动静分离配置实现与说明
2022/04/07 Servers