网页特效

jQuery图片连续循环滚动插件(上下左右都行)

位置:首页 > 网页特效 > 广告特效,2019-08-10 23:28
这是一个jQuery图片连续循环滚动插件(上下左右都行),使用非常简单,插件也不大。同一个页面可以放多个滚动

这是一个jQuery图片连续循环滚动插件(上下左右都行),使用非常简单,插件也不大。同一个页面可以放多个滚动

效果图

jQuery图片连续循环滚动(图0)

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片上下左右无缝连续循环滚动</title>
<meta name="keywords" content="网页特效,js图片滚动,无缝隙滚动,图片循环滚动,jquery图片滚动" />
<meta name="description" content="一款jQuery图片上下左右无缝连续循环滚动网页特效,可同一页面多次调用,可设置滚动速度、图片滚动方向,鼠标滑过停止滚动,支持图片从左向右、从上到下、从右到左、从下到上无缝隙滚动JS代码。">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.imgscroll.min.js"></script>
<script type="text/javascript">
$(function(){

	imgScroll.rolling({
		name:'g1',
		width:'380px',
		height:'180px',
		direction:'top',
		speed:10,
		addcss:true
	});
	
	imgScroll.rolling({
		name:'g2',
		width:'380px',
		height:'180px',
		direction:'left',
		speed:20,
		addcss:true
	});
	
	imgScroll.rolling({
		name:'g3',
		width:'380px',
		height:'180px',
		direction:'bottom',
		speed:30,
		addcss:true
	});
	
	imgScroll.rolling({
		name:'g4',
		width:'380px',
		height:'180px',
		direction:'right',
		speed:40,
		addcss:true
	});

})
</script>
</head>

<div class="mains">


  <div class="g1">
    <ul>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/1.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/2.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/3.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/4.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/5.jpg"></a></li>
    </ul>
  </div>


  <div class="g2">
    <ul>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/1.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/2.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/3.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/4.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/5.jpg"></a></li>
    </ul>
  </div>


  <div class="g3">
    <ul>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/1.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/2.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/3.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/4.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/5.jpg"></a></li>
    </ul>
  </div>

  <div class="g4">
    <ul>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/1.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/2.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/3.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/4.jpg"></a></li>
      <li><a href="https://www.ablanxue.com" target="_blank"><img src="images/5.jpg"></a></li>
    </ul>
  </div>



</div>

</body>
</html>

css代码

@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "宋体"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}

/* 效果CSS开始 */
li { list-style: none; padding: 0; margin: 0 }
.mains { width: 800px; padding-left: 15px; margin: 0 auto }
.mains .title { font-size: 25px; text-align: center; padding: 10px 5px }
.g1, .g2, .g3, .g4 { width: 380px; height: 180px; float: left; margin: 0 5px 5px 0;overflow:hidden}
/* 效果CSS结束 */
以上就是jQuery图片连续循环滚动的使用方法。


TAGS:jQuery图片连续循环滚动

猜你喜欢

NewHot