<!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>
相关推荐
可以设置<li>的内容上下滚动,很好的东西哦
li ,div 自动切换,可用按钮切换,图片滚动,效果真的一级棒,是目前我找到的最棒的一个,需要的亲赶紧下手。 适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul。如下图: (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden;) 2. 样式方面:由于要滚动,所以必须2个ul的高度 > ...
通过CSS+Javascript实现类似表格的动态滚动效果,用ul和li标签模拟表格,文件包括实现源码。
结构:box包含ul,ul包含4个li;ul绝对定位。 复制li-1、li-2到第li-4后面,为了区分于li-1、li-2,内容改为li-5、li-6,颜色不变。此时ul包含6个li。 需要注意的是,移动的是ul这个大盒子而不是li。 原理:当ul ...
本文实例为大家分享了vue实现广告栏上下滚动效果的具体代码,供大家参考,具体内容如下 html部分 <div class="roll"> <img src="xxx.jpg" alt /> <ul :class="{marquee_top:animate}"> <li v-for="(item, ...
html是简单的一个div ul li 格式 使用方法简单: 1、在网页head中引入lanrenzhijia.css样式 2、将html复制到你需要的地方并修改,直至符合你的需求 3、将lanrenzhijia.js引入到网页底部即可
css动画的一个应用,与此前的css走马灯同样的内容。... <li class=cell>序号</li> <li class=cell>姓名</li> <li class=cell>年龄</li> <li class=cell>性别</li> <li class=cell>专业</li> </ul>
本文实例为大家分享了js实现文字滚动的具体代码,供大家参考,具体内容如下 首先先看一下大致效果图,因为是动态的,在页面无法显示出来。 具体的实现代码如下: 1.首先是css代码: <style type="text/css">...
代码如下:<!...<head> <meta charset=”utf-8″> <...jquery 图片自动无缝滚动</title> [removed][removed] <style type=”text/css”> ul,li { list-style: none;
蛮优秀的一段效果代码,可以上下左右滚动,收藏了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <... <head>...滚动测试<...
1、单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} ...
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构 <body> <ul id=noticeList> <li>我是公告1</li> <li>我是公告2</li> <li>我是公告3</li> <li>我是公告4</li...
今儿分享一个jquery实现多行滚动效果。 我看一些论坛网站上面,公告处用的较多。 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0)....
今天要介绍的也是一款层叠式切换插件,不过它是一款jQuery焦点图应用,除了当前的图片,我们可以看到所有图片的一部分,切换后显示下一张图片,切换动画是层叠式的效果。 下面我们一起来看看实现这款jQuery层叠式...
本文实例为大家分享了js公告栏上下滚动效果的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>公告栏上下滚动</title> ...
今天在网上找到一款回旋滚动效果,拿出来和大家一起分享。先上效果图: html 代码: 代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title>jquery-...
$('.dian ul li').eq(nowpage).addClass('da').siblings().removeClass('da'); $('.nav ul li').eq(nowpage).addClass('bg').siblings().removeClass('bg'); } $(document).mousewheel(function (event,delta...
今儿分享一个jquery实现多行滚动效果。 我看一些论坛网站上面,公告处用的较多。 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0)....