Jquery图片滚动特效

16. January 2017 HTML5 0

———————————–Jquery

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 < 858) {
_this.scrollLeft(l+i);
} else {
_this.scrollLeft(0);
}
},20);
})
}
});

<script type=”text/javascript”>
$(document).ready(function(){
$(‘#content3_pic’).pic_scroll();
})
</script

———————————–Html

<div id=”content3_pic”>
<ul>
{pc:content action=”lists” num=”4″ siteid=”$siteid” catid=”154″ order=”listorder desc”}
{loop $data $r}
<li class=”content3_pic_img”>
<img src=”{thumb($r[thumb],256,0)}” style=”width: 256px;height: 181px”/>
</li>
{/loop}
{/pc}
</ul>
</div>

———————————–Css

#content3_pic{
width: 1190px;
height: 181px;
margin-top: 20px;
overflow: hidden;
}
.content3_pic_img{
width: 256px;
height: 181px;
float: left;
display: block;
margin-left: 30px;
}

 

 


Leave a Reply

Your email address will not be published. Required fields are marked *