jquery实现图片滚动效果的简单实例_Javascript教程-查字典教程网
jquery实现图片滚动效果的简单实例
jquery实现图片滚动效果的简单实例
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:jquery图片自动无缝滚动ul,li{list-style:none;margin:0;padding:0;}li{fl...

复制代码 代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery 图片自动无缝滚动</title>

<script src="jquery.min.js" type="text/javascript"></script>

<style type="text/css">

ul,li { list-style: none;margin: 0; padding: 0;}

li { float: left;}

img { width: 100px; height: 100px; padding:0 2px}

.a { width: 400px; height:100px;margin: 0 auto; overflow: hidden; border: 1px solid red;}

.aa { width: 200px; height:100px;margin: 50px auto 0 auto; overflow: hidden; border: 1px solid red;}

</style>

</head>

<body>

<div>

<ul>

<li>

<a href="#"><img alt="" src=" images/1.jpg"/>

</a>

</li>

<li >

<a href="#"><img alt="" src="images/2.png">

</a>

</li>

<li>

<a href="#"><img alt="" src="images/3.jpg">

</a>

</li>

<li>

<a href=""><img alt="" src="images/4.jpg">

</a>

</li>

<li>

<a href="#"><img alt="" src="images/5.jpg">

</a>

</li>

</ul>

</div>

<div>

<ul>

<li>

<a href="#"><img alt="" src=" images/1.jpg"/>

</a>

</li>

<li >

<a href="#"><img alt="" src="images/2.png">

</a>

</li>

<li>

<a href="#"><img alt="" src="images/3.jpg">

</a>

</li>

<li>

<a href=""><img alt="" src="images/4.jpg">

</a>

</li>

<li>

<a href="#"><img alt="" src="images/5.jpg">

</a>

</li>

</ul>

</div>

<script type="text/javascript">

jQuery.fn.extend({

pic_scroll:function (){

$(this).each(function(){

var _this=$(this);//存储对象

var ul=_this.find("ul");//获取ul对象

var li=ul.find("li");//获取所有图片所有的li

var w=li.size()*li.width();//统计图片的长度

li.clone().prependTo(ul);//克隆图片一份放入ul里

ul.width(2*w);//设置ul的长度,使所有图片排成一排

var i=1,l;

_this.hover(function(){i=0},function(){i=1});//鼠标经过时设置i=0达到鼠标经过停止效果

setInterval(function(){

//定时滚动函数

l = _this.scrollLeft();

if (l < w) {

_this.scrollLeft(l+i);

} else {

_this.scrollLeft(0);

}

},20);

})

}

});

$(document).ready(function(){

$(".a,.aa").pic_scroll();//多个地方使用

})

</script>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类