使用Jquery实现滚动展示
效果展示
用户可以通过单击左上角的左右箭头,来实现控制图片展示的左右滚动。如:当单击右箭头时，下面的展示图片会向左滚动隐藏，同时新的图片展示会以滚动方式显示出来。下面看下代码。
HTML代码:
javascript代码:.v_show { width:595px; margin:50px 0 0px 60px;}.v_caption { height:50px; overflow:hidden; background:url(images/btn_cartoon.gif) no-repeat 0px 18px; }.v_caption h2 { float:left; width:60px; height:30px; margin-left:10px; padding:2px 0 0 10px; }.v_caption .variety { background-position:-100px -100px; }.highlight_tip { display:inline; float:left; margin:32px 0 0 10px; }.highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(images/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }.highlight_tip .current { background-position:0 -220px; }.change_btn { float:left; margin:24px 0 0 10px; }.change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(images/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; }.change_btn .prev { background-position:0 -400px; }.change_btn .next { width:31px; background-position:-30px -400px; }.v_caption em { display:inline; float:right; margin:25px 12px 0 0; font-family:simsun; }.v_content { position:relative; width:592px; height:200px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7;}.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }.v_content ul {float:left; padding:0;}.v_content ul li { display:inline; float:left; margin:5px; padding:5px; }.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }.v_content ul li images { width:128px; height:96px; }.v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }.v_content ul li h4 a { display:inline !important; height:auto !important; }.v_content ul li span { color:#666; }.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }
