Single picture pan switching implementation code-JS Tutorial-php.cn

Single picture pan switching implementation code

小云云

Release： 2018-01-30 09:18:18

Original

1811 people have browsed it

This article mainly introduces the js implementation of single picture translation 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. Then let's study this article.

Since I don’t need the manual switching function, I deleted that part of the content, mainly to increase the seamless switching effect.

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>

Copy after login

Related recommendations:

JavaScript implements mouse wheel control page image switching

##js and Tutorial on implementing the css tag content switching function

Sharing of jQuery automatic or manual image switching implementation methods

The above is the detailed content of Single picture pan switching implementation code. For more information, please follow other related articles on the PHP Chinese website!