网页特效

不用jquery,原生js图片连续向左滚动效果(兼容多行)

位置:首页 > 网页特效 > 广告特效,2019-08-04 13:13
网页前端开发中经常用到图片连续向在滚动的效果。这里为大家封装一个不用jquery,原生js图片连续向左滚动效果(兼容多行)

下面就是原生js图片连续向左滚动效果的实现代码,效果支持在线预览。

js图片连续向左滚动,jquery图片连续向左滚动(图0)


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>不用jquery,原生js图片连续向左滚动效果(兼容多行)</title>
  <style>
  *{margin:0px;border:0px;padding:0px;text-align:center;}
  ul,li{list-style:none;}
   h3{margin:20px;text-align:center;}
  .product{width:100%;overflow:hidden;padding:20px 0;background:#333;}
  .width1200{width:1200px;margin:auto;padding:20px 0;background:green;}
.leftdong{overflow:hidden;width:100%; color:#336699;text-align:left; margin-top:10px;  }
.leftdong .leftdongcon ul{ display:block;width:3112px; overflow:hidden;}
.leftdong .leftdongcon ul li{width:369px; height: 327px;margin:15px 10px; float:left}
.leftdong .leftdongcon ul li a div{width:369px;height:277px; overflow:hidden;}
.leftdong .leftdongcon ul li a div img{width:369px;transition:all .5s ease;}
.leftdong .leftdongcon ul li a div:hover img{transform: scaleX(1.1) scaleY(1.1);}
.leftdong .leftdongcon ul li a p{ text-align:center; height:50px; line-height:50px;transition:all .5s ease; background-color: #e7e7e7; color: #2d2d2d;overflow:hidden;}
.leftdong .leftdongcon ul li a:hover p{ background:#fdb328; color:#fff}
#leftdonga{height:714px}
#leftdongb{height:357px}
.leftdong .leftdongtem{visibility:hidden}
.clear{clear:both}

 </style>
 </head>
 <body>
  

<h3>不用jquery,原生js图片连续向左滚动效果(2行,更多行定义leftdong div的高度就行)</h3>
<div class="product">


     <div class="leftdong" id="leftdonga">
	    <div class="leftdongcon">
	    	<ul>
	      <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
		  <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
		  <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
		  <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
		  <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
		  <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
		  <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
           <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
	        </ul>
	    </div>
	    <div class="leftdongtem"></div>
        
  </div>


 <div class="clear"></div>

</div>


<h3>不用jquery,原生js图片连续向左滚动效果(单行)</h3>
<!-- 一行-->
<div class="width1200">


     <div class="leftdong" id="leftdongb">
	    <div class="leftdongcon">
	    	<ul>
	    	
	      <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
		  <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
		  <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
		  <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	      <li><a href=""><div><img src="15162624324986356.jpg"></div><p>标题</p></a></li>
	         <li><a href=""><div><img src="15162624314324979.jpg"></div><p>标题</p></a></li>
	   

	        </ul>
	    </div>
	    <div class="leftdongtem"></div>
        
  </div>


 <div class="clear"></div>

</div>



<script type="text/javascript">

//封装的函数
           function Marqueey(ob){
            if(ob.children[1].offsetWidth-ob.scrollLeft<=0){ 
            ob.scrollLeft-=ob.children[0].offsetWidth;
            }
            else{
            ob.scrollLeft++;
            }
            }
           
           
           function leftdongfun(ob,dongid){
            ob.children[1].innerHTML=ob.children[0].innerHTML;
            dongid=window.setInterval(function(){Marqueey(ob)},15); 
            ob.onmouseover=function() {clearInterval(dongid);}
            ob.onmouseout=function() {dongid=window.setInterval(function(){Marqueey(ob)},15);}
           }
           
 
		   //下面是使用,dongida是一个变量,随意写


            var dongida;
            leftdongfun(document.getElementById("leftdonga"),dongida);

            var dongidb;
            leftdongfun(document.getElementById("leftdongb"),dongidb);
            
</script>
 </body>
</html>


原生js图片连续向左滚动效果,使用起来也方便。

TAGS:js图片连续向左滚动jquery图片连续向左滚动

猜你喜欢

NewHot