Home > Article > Web Front-end > js single picture pan switching effect example sharing

js single picture pan switching effect example sharing

小云云Original: 2018-01-24 16:01:342128browse

This article mainly introduces the js implementation of single picture pan switching effect in detail. After a picture is moved to the left, it is moved from the bottom back to the right and waits for the next cycle. It has certain reference value for those who are interested. You can refer to it, I hope it can help everyone.

This article refers to JQuery to implement image switching (automatic switching + manual switching)

Since I personally do not need the manual switching function, I deleted that part of the content, mainly It adds the effect of seamless switching.

The principle is also very simple. After moving a picture to the left, it moves back to the right from the bottom and waits for the next cycle.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="js/jquery-1.10.1.min.js"></script>
</head>
<body> 
 <p class="wrapper"> 
  <h1>jquer实现图片切换</h1> 
  <p id="focus"> 
   <ul> 
    <!-- 这里有三个z-index的设置 -->
     <li><p class="switch_pic" style="z-index: 3;background: url(&#39;imgs/01.jpg&#39;) center center;background-size: cover;"></p></li> 
     <li><p class="switch_pic" style="z-index: 2;background: url(&#39;imgs/02.jpg&#39;) center center;background-size: cover;"></p></li> 
     <li><p class="switch_pic" style="z-index: 1;background: url(&#39;imgs/03.jpg&#39;) center center;background-size: cover;"></p></li> 
     <li><p class="switch_pic" style="background: url(&#39;imgs/04.jpg&#39;) center center;background-size: cover;"></p></li>
     <li><p class="switch_pic" style="background: url(&#39;imgs/meiko2.jpg&#39;) center center;background-size: cover;"></p></li>
     <li><p class="switch_pic" style="background: url(&#39;imgs/meiko7.jpg&#39;) center center;background-size: cover;"></p></li>
   </ul> 
   </p> 
  </p> 
  <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(&#39;.switch_pic&#39;);//获取所有图片

   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 p{position:absolute;overflow:hidden;width: 450px;height: 350px;} 
</style>
</body>

Related recommendations:

JavaScript implementation of mouse wheel control page image switching function example

Detailed example of jQuery automatic or manual image switching effect

Sample code using JavaScript to implement mouse wheel control page image switching

Made using JavaScript Introduction to the method of image switching

Simple implementation of JavaScript image switching effect

The above is the detailed content of js single picture pan switching effect example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：ionic3 and Angular4 implement interface requests and local json file readingNext article：ionic3 and Angular4 implement interface requests and local json file reading

See more

js single picture pan switching effect example sharing

Related articles