使用Jquery实现滚动展示

程序员文章站 2023-12-22 10:11:46

...

效果展示

使用Jquery实现滚动展示

博客分类： JQuery htmljquery滚动滚动展示动画

用户可以通过单击左上角的左右箭头,来实现控制图片展示的左右滚动。如:当单击右箭头时，下面的展示图片会向左滚动隐藏，同时新的图片展示会以滚动方式显示出来。下面看下代码。
HTML代码:

<div class="v_show">
	<div class="v_caption">
    	<!--头部标题,按钮等-->
    	<h2 class="cartoon" title="猫咪">猫咪</h2>
        <div class="highlight_tip">
        	<span class="current">1</span><span>2</span><span>3</span><span>4</span>
        </div>
        <div class="change_btn">
        	<span class="prev">上一页</span>
            <span class="next">下一页</span>
        </div>
        <em><a href="#">更多</a></em>
    </div>
    <div class="v_content">
    	<!--图片内容展示区域-->
        <div class="v_content_list">
        	<ul>
            	<li><a href="images/cat1.jpg"><img src="images/cat1.jpg" width="150" height="120" /></a><h4><a href="images/cat1.jpg">猫咪1</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat2.jpg"><img src="images/cat2.jpg" width="150" height="120" /></a><h4><a href="images/cat2.jpg">猫咪2</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat3.jpg"><img src="images/cat3.jpg" width="150" height="120" /></a><h4><a href="images/cat3.jpg">猫咪3</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat4.jpg"><img src="images/cat4.jpg" width="150" height="120" /></a><h4><a href="images/cat4.jpg">猫咪4</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat5.jpg"><img src="images/cat5.jpg" width="150" height="120" /></a><h4><a href="images/cat5.jpg">猫咪5</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat6.jpg"><img src="images/cat6.jpg" width="150" height="120" /></a><h4><a href="images/cat6.jpg">猫咪6</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat7.jpg"><img src="images/cat7.jpg" width="150" height="120" /></a><h4><a href="images/cat7.jpg">猫咪7</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat8.jpg"><img src="images/cat8.jpg" width="150" height="120" /></a><h4><a href="images/cat8.jpg">猫咪8</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat9.jpg"><img src="images/cat9.jpg" width="150" height="120" /></a><h4><a href="images/cat9.jpg">猫咪9</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat10.jpg"><img src="images/cat10.jpg" width="150" height="120" /></a><h4><a href="images/cat10.jpg">猫咪10</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat11.jpg"><img src="images/cat11.jpg" width="150" height="120" /></a><h4><a href="images/cat11.jpg">猫咪11</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat12.jpg"><img src="images/cat12.jpg" width="150" height="120" /></a><h4><a href="images/cat12.jpg">猫咪12</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat13.jpg"><img src="images/cat13.jpg" width="150" height="120" /></a><h4><a href="images/cat13.jpg">猫咪13</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat14.jpg"><img src="images/cat14.jpg" width="150" height="120" /></a><h4><a href="images/cat14.jpg">猫咪14</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat15.jpg"><img src="images/cat15.jpg" width="150" height="120" /></a><h4><a href="images/cat15.jpg">猫咪15</a></h4><span>查看:<em>12,321</em></span></li>
            	<li><a href="images/cat16.jpg"><img src="images/cat16.jpg" width="150" height="120" /></a><h4><a href="images/cat16.jpg">猫咪16</a></h4><span>查看:<em>12,321</em></span></li>
            </ul>
        </div>
    </div>
</div>

javascript代码:

$().ready(function(){
var page = 1;
var i = 4;//每个版面4张图片
	$("span.next").click(function(){//绑定单击事件
		var $parent = $(this).parents("div.v_show");//根据当前单击的元素获取到父元素
		var $v_show = $parent.find("div.v_content_list");//找到"图片内容展示区域"
		var $v_content = $parent.find("div.v_content");//找到"图片内容展示区域"外围的div
		var v_width = $v_content.width();//获取区域内容的宽度、带单位
		var len = $v_show.find("li").length;//图片总数
		var page_count = Math.ceil(len/i);//只要不是整数,就往大的方向取最小整数
		if( !$v_show.is(":animated") ){    //判断图片内容展示区域"是否正在处于动画
			if(page == page_count){
				$v_show.animate({left:'0px'},1	);//通过改变left值,跳转到第一版面
				page = 1;
			}else{
				$v_show.animate({left:'-='+v_width},"slow");//改变left值,达到每次换一个版面
				page++;
			}
			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
			//给指定span元素添加current样式,然后去掉span元素的同辈元素上的current样式
		}
	});
	$("span.prev").click(function(){//绑定单击事件
		var $parent = $(this).parents("div.v_show");//根据当前单击的元素获取到父元素
		var $v_show = $parent.find("div.v_content_list");//找到"图片内容展示区域"
		var $v_content = $parent.find("div.v_content");//找到"图片内容展示区域"外围的div
		var v_width = $v_content.width();//获取区域内容的宽度、带单位
		var len = $v_show.find("li").length;//图片总数
		var page_count = Math.ceil(len/i);//只要不是整数,就往大的方向取最小整数
		if( !$v_show.is(":animated") ){    //判断图片内容展示区域"是否正在处于动画
			if(page == 1){
				$v_show.animate({left:'-='+v_width*(page_count-1)},1	);//通过改变left值,跳转到第一版面
				page = page_count;
			}else{
				$v_show.animate({left:'+='+v_width},"slow");//改变left值,达到每次换一个版面
				page--;
			}
			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
			//给指定span元素添加current样式,然后去掉span元素的同辈元素上的current样式
		}
	});
});

css样式:

.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; }

相关标签： html jquery 滚动滚动展示动画

使用Jquery实现滚动展示

使用Jquery实现滚动展示

jQuery滚动切换传送插件jCarousel使用简介

聊聊使用jQuery如何实现动画（代码详解）

详解使用jquery.i18n.properties 实现web前端国际化

详解使用jquery.i18n.properties 实现web前端国际化

使用Python的Tornado框架实现一个Web端图书展示页面

jQuery实现滚动条滚动到子元素位置（方便定位）

jQuery实现页面滚动时智能浮动定位

基于jQuery实现一个marquee无缝滚动的插件

jQuery使用EasyUi实现三级联动下拉框效果