그림, Ul + li 스크롤 효과

6728 단어 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>

소형 트 위 터 의 시스템 원본 + 주석, PHP
일반 표준 라이브러리 모듈

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage