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 相关文章推荐
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
Require.js的基本用法详解
Jul 03 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
详解vue组件之间的通信
Aug 30 Javascript
JS实现鼠标移动拖尾
Dec 27 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网站的几个实用要点
2014/12/30 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
vue实现通讯录功能
2018/07/14 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
演讲主持词
2014/03/18 职场文书
会计系毕业生求职信
2014/05/28 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书