快捷導(dǎo)航

jquery實(shí)現(xiàn)圖片無縫滾動(dòng) 蒙版遮蔽效果

更新時(shí)間：2020年01月11日 10:47:35 作者：商嘉航

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片無縫滾動(dòng)，蒙版遮蔽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)圖片無縫滾動(dòng)、蒙版效果的具體代碼，供大家參考，具體內(nèi)容如下

1、無縫連接：通過對(duì)li設(shè)置屬性float：left；消除標(biāo)簽之間的間隔
2、通過對(duì)ul整體進(jìn)行偏移設(shè)置，使圖片整體滾動(dòng)，
3、設(shè)置圖片切換時(shí)機(jī)，
4、蒙版遮罩移入時(shí)機(jī)的選擇

代碼片.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
 <style>
  *{
  margin: 0;
  padding: 0;
  }
  .div1{
  width: 400px;
  height: 150px;  
  overflow: hidden;
  border: 1px solid #A9A9A9;
  margin: 30px auto;
  }
  .ul1{
  position: relative;
  left: 0px;
  width: 1200px;
  }
  .ul1>li{
  position: relative;  
  list-style: none;
  float: left;  
  width: 200px;
  height: 150px;
  background: #3388FF;
  }
  .ul1>li>div{
  position: absolute;
  left: 0;
  top: 0;
  background: #A9A9A9;
  width: 200px;
  height: 150px;
  opacity: 0;
  }
 </style>
 </head>
 <body>
 <div class="div1">
  <ul class="ul1">
  <li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall3.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall4.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
  </ul>
 </div>
 <script>
  $(function(){
  var $time = '';
  var mi = 0;
  gundong();
  function gundong(){
   $time = setInterval(function(){
   mi += -10;
   if (mi<-800) {
    mi = 0
   }
   $('.ul1').css({    
    marginLeft: mi+'px'   
   });
   },100);
  }
  $('li').mouseover(function(){
   window.clearTimeout($time);
   $('li').not($(this)).contents('div').css({
   opacity:0.6
   });
  });
  $('li').mouseout(function(){
   gundong();
   $('li').not($(this)).contents('div').css({
   opacity:0
   });
  });
  });
 </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: