jquery slide图片滚动展示js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery slide图片滚动展示js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery slide图片滚动展示代码</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div class="pic_con">
	<div class="btn_change left_btn">上一页</div>
	<div class="btn_change right_btn">下一页</div>
	<div class="pic_content">
		<div class="pic_lists">
			<ul>
				<li><a href="#"><img src="images/theme_thumb5(9).png"/></a><p>唯美画面一</p></li>
				<li><a href="#"><img src="images/theme_thumb5(12).png"/></a><p>唯美画面二</p></li>
				<li><a href="#"><img src="images/theme_thumb5(22).png"/></a><p>唯美画面三</p></li>
				<li><a href="#"><img src="images/theme_thumb5(25).png"/></a><p>唯美画面四</p></li>
				<li><a href="#"><img src="images/theme_thumb5(4).png"/></a><p>唯美画面一</p></li>
				<li><a href="#"><img src="images/theme_thumb5(8).png"/></a><p>唯美画面一</p></li>
				<li><a href="#"><img src="images/theme_thumb5(15).png"/></a><p>唯美画面一</p></li>
				<li><a href="#"><img src="images/theme_thumb5(20).png"/></a><p>唯美画面一</p></li>
			</ul>
		</div>
	</div><!--content end--> 
	<div class="highlight_tip">
		<span class="current">1</span><span>2</span><span>3</span>
	</div>
</div>

<!--
  slidebar 产品展示图jquery 原理:
    显示区域：定义显示去的宽高，设置多余的元素隐藏、overflow:hidde;
    图片存储区：是显示去的子元素，它的宽度可以存下所有的图片信息；设置它的绝对位置；
    通过jquery动态控制图片存储区的left属性；
-->
<script type="text/javascript">
$(function(){ 

	var page=1;
	var i=3;
	var $p_Div=$(".pic_content");
	var $picDiv=$(".pic_lists");
	var picNum=$picDiv.children("ul").children("li").length;
	var page_count=Math.ceil(picNum/3);
	var $pDiv_w=$p_Div.width()+12;

	$(".right_btn").click(function(){
		if(page_count>page){
			$picDiv.animate({left:'-'+page*$pDiv_w+"px"},"normal");
			page++;
			$(".left_btn").css({'background':'url(images/leftstart.jpg) no-repeat'});
			if(page>=page_count){
				$(this).css({'background':'url(images/rightstop.jpg) no-repeat'});
			}else{
				$(this).css({'background':'url(images/rightstart.jpg) no-repeat'});
			}
		} 
		$(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); 	
	});
	
	$(".left_btn").click(function(){
		if(page>1){
			$picDiv.animate({left:"+="+$pDiv_w+'px'},"normal");
			page--;
			$(".right_btn").css({'background':'url(images/rightstart.jpg) no-repeat'});
			if(page<=1){
				$(this).css({'background':'url(images/leftstop.jpg) no-repeat'});	 
			}else{
				$(this).css({'background':'url(images/leftstart.jpg) no-repeat'});
			}
		}
		$(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); 	
	});
	
	$(".pic_lists>ul>li").hover(function(){
		$(this).children("p").show();
	},function(){
		$(this).children("p").hide();
	});
	
})
</script>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
.pic_con{width:580px;padding:10px;margin:50px auto 0px;position:relative}
.pic_lists{float:left;width:8888px;height:106px;overflow:hidden;position:absolute;top:0px;left:0px}
.btn_change{width:40px;height:60px;position:absolute;text-indent:-9999px;cursor:pointer}
.left_btn{background:url(../images/leftstop.jpg) no-repeat;top:85px;left:8px}
.right_btn{background:url(../images/rightstart.jpg) no-repeat;top:85px;right:0px}
.pic_content{overflow:hidden;height:120px;loat:left;width:486px;padding:10px;position:relative;margin:50px auto 0px}
.pic_content ul li{float:left;width:150px;height:100px;padding:3px;background:#9CC;text-align:center;margin:0 0 0 10px;position:relative}
.pic_content ul li p{height:24px;background:#333;line-height:24px;color:#fff;width:151px;position:absolute;bottom:2px;left:2px;text-align:center;display:none}
.pic_content ul li a img{width:150px;height:100px}
.highlight_tip{width:50%;position:relative;margin:0 auto;top:-15px;left:20%;}
.highlight_tip span{height:24px;padding:5px;line-height:24px;float:left;margin:0 2px;cursor:pointer}
.highlight_tip span.current{height:18px;width:18px;line-height:18px;background:#9CC;text-align:center}

附件:下载该文件资源,减少时间成本(增值服务)