jquery图片循环无缝滚动 鼠标移上将会暂停|图片滚动代码
文章目录

jquery图片循环无缝滚动 鼠标移上将会暂停

最近公司网站增加了一个员工风采栏目,放上了许多员工的照片。

老板要求将这些照片放到网站页面底部滚动显示,小编首先想到的就是jquery图片循环无缝滚动,鼠标移上将会暂停的效果。

用js要写好多代码,所以就用的jquery的,下面来看看相关代码。

html代码<div class="teamwrap">
    <div id="slide"> 
        <ul>
            <li>
            <img src="images/uploadfiles/avatar/20160809114038121.jpg" />
            <p><span>VIP旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809114051117.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809114111770.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809114231233.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809114024329.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809114201315.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809114216673.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809122647643.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809122733693.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809114249758.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160322150444709.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809113917696.jpg" />
            <p><span>海岛旅游顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809114503751.jpg" />
            <p><span>海岛旅游顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160322150444709.jpg" />
            <p><span>签证专员:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809115347559.jpg" />
            <p><span>签证专员:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809115232500.jpg" />
            <p><span>签证专员:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809115518566.jpg" />
            <p><span>签证专员:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809115753853.jpg" />
            <p><span>签证专员:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160322150444709.jpg" />
            <p><span>旅行顾问:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809115647381.jpg" />
            <p><span>签证专员:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809120429606.jpg" />
            <p><span>签证专员:**</span><a href="" rel="nofollow"></a></p>
            </li>
            
            <li>
            <img src="images/uploadfiles/avatar/20160809114143786.jpg" />
            <p><span>大客户经理:田霞</span><a href="tencent://message/?Menu=yes&uin=3525944&Service=300" rel="nofollow"></a></p>
            </li>
		</ul> 
    </div> 
</div>
css代码.teamwrap{background:#fff; margin:10px 0;}
.teamwrap img{width:141px; height:172px; border-radius:4px;}
.teamwrap #slide{overflow:hidden;width:1188px; padding:4px 4px;margin:2px auto; border:1px #ccc solid;}
.teamwrap ul>li{list-style:none;width:12999px;}
.teamwrap li>li >ul{float:left; margin:0 8px 0 0;}
.teamwrap li p{width:133px;display:block; margin:0 auto; text-align:center;}
.teamwrap span{width:133px; height:22px; display:inline-block;}
.teamwrap a{width:77px; height:22px; display:inline-block; background:url(../images/public/line_list_qq.png) no-repeat;}
javascript代码function AutoScroll(){
	var _scroll = $("#slide>ul");
	//ul往左边移动300px
	_scroll.animate({marginLeft:"-149px"},1000,function(){
		//把第一个li丢最后面去
		_scroll.css({marginLeft:0}).find("li:first").appendTo(_scroll);
	});
}
$(function(){
	//两秒后调用
	var _scrolling=setInterval("AutoScroll()",2000);
	$("#slide>ul").hover(function(){
		//鼠标移动DIV上停止
		clearInterval(_scrolling);
	},function(){
		//离开继续调用
		_scrolling=setInterval("AutoScroll()",2000);
	});
});

上面的代码,请根据自己的需要修改。如果修改了样式“#slide”宽度,那么js的“marginLeft”要相应的修改为合适的值,请自行计算。

本文网址:http://www.santii.com/article/1.html


数据更新时间:2018-06-25