图片，Ul+li滚动效果 -

kely39

浏览: 49464 次
性别:
来自: 上海

最近访客更多访客>>

cctv08520

gxlwl

lijianjh

xiongge105

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

图片，Ul+li滚动效果

博客分类：

jquery

图片滚动菜单滚动自动滚动效果 jquery

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js图片左右滚动的jquery插件（点击滚动和自动滚动） - 懒人建站 http://www.51xuediannao.com/</title>
<meta name="keywords" content="左右滚动,js左右滚动,图片左右滚动" />
<meta name="description" content="js图片左右滚动的jquery插件可以点击滚动也可以配置成自动滚动，atued的 三藏 法师 原创，懒人建站整理发布" />
<style>
ul{ padding:0; margin:0; list-style:none;}
a{ text-decoration:none; color:#F00}
.lcrbox { margin: 10px 0; overflow: hidden }
.lcr_l, .lcr_r { display: block; position: relative; top: 50%; margin-right: 0; text-align: center }
.lcr_l { float: left }
.lcr_r { float: right }
.lcr_c { height: 100%; overflow: hidden; position: relative }
.lcr_c ul { white-space: nowrap; font-size: 0 }
@media screen and (-webkit-min-device-pixel-ratio:0) {
.lcr_c ul { display: inline-table; vertical-align: top }
}
.lcr_c li { display: inline; font-size: 13px }
.lcr_c li a { display: inline-block }
.lcr_c img { padding: 2px; border: #dadada solid 1px }

.lcrbox01 { height: 110px; position: relative; margin-top: 0 }
.lcrbox01 .lcr_l, .lcrbox01 .lcr_r { width: 17px; height: 36px; line-height:36px;  margin-top: -18px; background-color: #fff; position: absolute; z-index: 100 }
.lcrbox01 .lcr_l { left: 0; border-radius: 0 3px 3px 0; opacity: .5; filter: alpha(opacity=50) }
.lcrbox01 .lcr_l:hover { opacity: .8; filter: alpha(opacity=80) }
.lcrbox01 .lcr_r { right: 0; border-radius: 3px 0 0 3px; opacity: .5; filter: alpha(opacity=50) }
.lcrbox01 .lcr_r:hover { opacity: .8; filter: alpha(opacity=80) }
.lcrbox01 .lcr_c { z-index: 99 }
.lcrbox01 .lcr_c li { padding-left: 10px }
.lcrbox01 .lcr_c .scroll_first { padding-left: 0 }
.lcrbox01 .lcr_c img { width: 182px; height: 102px }
.lcrbox01 .lcr_l .ico, .lcrbox01 .lcr_r .ico { margin-top: 13px }
:root .lcrbox01 .lcr_l, :root .lcrbox01 .lcr_l:hover, :root .lcrbox01 .lcr_r, :root .lcrbox01 .lcr_r:hover { filter: none }
</style>
</head>

<body>
<div style="padding:20px 0; line-height:1.75;">js图片左右滚动的jquery插件可以点击滚动也可以配置成自动滚动，由<a href="http://www.51xuediannao.com/">懒人建站</a>整理发布</div>
<!--DEMO 开始-->
<div id="lcrboxslide" class="lcrbox lcrbox01" style="width:782px;"> 
<a title="prev" class="lcr_l" href="javascript:;"><</a><a title="next" class="lcr_r" href="javascript:;">></a>
  <div class="lcr_c">
    <ul  style="position: absolute;" class="overview">
      <li class="scroll_first">
			 <a title="懒人建站" href="http://www.51xuediannao.com/"><img src="http://www.linklife.cn/Upload/2013/7/2/small_cb30e153c60849918f4d01d99da48bca.png"></a>
	  </li>
      <li>
			<a title="2013郑州爱心送考全城总动员" href="#/CircleParty/Details/48cdea97515b4e1190d49d11d7fb66ef"><img src="http://www.linklife.cn/Upload/2013/6/1/small_e9c3bfa27ebe4f12a484df310fba4647.png"></a></li>
      <li>
			<a title="jquery特效" href="http://www.51xuediannao.com/js/"><img src="http://www.linklife.cn/Upload/2013/7/9/small_94a7b04232d849208ed48073538b7b5f.png"></a></li>
      <li>
			<a title="建站素材" href="http://www.51xuediannao.com/sucai/"><img src="http://www.linklife.cn/Upload/2013/5/4/small_35b351a7a0ec4d97897636634dd9c822.png"></a></li>
      <li>
			<a title="QQ在线客服代码" href="http://www.51xuediannao.com/qqkefu/"><img src="http://www.linklife.cn/Upload/2013/5/4/small_813fd9a53c1f44829c36d5379821f673.png"></a></li>
      <li>
			<a title="atued 关注用户体验" href="http://www.atued.com/"><img src="http://www.linklife.cn/Upload/2013/5/4/small_ce5ceb6a244448a09d27445f7640c375.png"></a></li>
    </ul>
  </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!--如果你的网站还没有使用jquery，请先引用jquery-->
<script>
/*
 * 左右滚动插件 Bate V 0.01 
 * 作者：三藏
 * 作者网站：atued http://www.atued.com/
 * 日期: 2013-07-10
*/
(function($){
    /*左右滚动*/
    var defaults={
        cont:'',
        prev:'.prev',
        next:'.next',
        time:1000,//滚动时间
        distance: null, //滚动距离
        auto: false,
		autoDelay:"3000"
    };

    $.fn.slider=function(options){
        var o= $.extend({},defaults,options||{}),self=this;
        var jqCont=$(o.cont,self);
        var jqContWidth=jqCont.width();
        var dist= 0,maxDist=jqContWidth- o.distance;
		
		var setInt;             //自动滚动定时器变量
        clearInterval(setInt);  //先清理一次
		
        //向前滚动
        $(o.prev,self).bind('click',function(){
            if(dist>=0)return;
            dist+= o.distance;
            if(dist>=0)dist=0;
            jqCont.stop().animate({left:dist}, o.time);
        });
        //向后滚动
        $(o.next,self).bind('click',function(){
            if(Math.abs(dist)>=maxDist)return;
            dist+= -o.distance;
            if(Math.abs(dist)>=jqContWidth)dist=-maxDist;
            jqCont.stop().animate({left:dist}, o.time);
        });
		
		//自动滚动
       /* self.bind({
			'mouseenter': function() {
				clearInterval(setInt);  
			},
			'mouseleave':function(){
				setInt = setInterval(function () {
					$(o.next, self).trigger("click");
				},o.autoDelay);
			}	
		});*/
		if (o.auto) {
		  self.trigger("mouseleave");
        }
		
    };

})(jQuery);

//滚动
$('#lcrboxslide').slider({
	cont: '.overview',
	prev: '.lcr_l',
	next: '.lcr_r',
	distance: 792,
	time: 1500,
	auto: true
});
</script>
<!--DEMO 结束-->
</body>
</html>

分享到：

最新的JS特效资料论坛 | jqyuer获取两个时间差

2013-10-15 10:51
浏览 1734
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

图片，Ul+li滚动效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

图片，Ul+li滚动效果

评论

发表评论

相关推荐

DIV随鼠标拖动效果

jquery汇总

jqyuer获取两个时间差

jquery获取当前时间

jquery动态获取调用控件中指定属性和值

jquery 遍历对象、数组、集合

最近访客更多访客>>