图片展示系统是每个网站都有的,这样通用行就十分重要,移植越简单学好,整理我以前开发的所有项目,从中提取一个最简单使用的进行整理,首先看一下这个图片展示的效果。
图一
图二
这款图片展示系统,通用很强只要程序员开发完程序交给美工,美工编写各种CSS样式会展现不同的效果,我们来看看它如何实现实现的。
一、HTML代码
首先我们看看HTML代码,对于美工来说这个代码非常简单他们美化起来也十分方便。
<!--图片展示容器-->
<div class="dtl_focusbox">
<!--图片容器-->
<div class="dtl_crtimg">
<ul>
<li><a href="" target="_blank"><img src="images/1.gif" width="543" height="285" border="0" alt=""/></a></li>
<li><a href="" target="_blank"><img src="images/2.gif" width="543" height="285" border="0" alt=""/></a></li>
<li><a href="" target="_blank"><img src="images/3.gif" width="543" height="285" border="0" alt=""/></a></li>
<li><a href="" target="_blank"><img src="images/4.gif" width="543" height="285" border="0" alt=""/></a></li>
<li><a href="" target="_blank"><img src="images/1.gif" width="543" height="285" border="0" alt=""/></a></li>
</ul>
</div>
<!--标题容器-->
<div class="dtl_focuslist">
<ul>
<li class="bar_crt">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
我们分析一下这段HTML代码,整个的图片展示包含在一个div中,这样方便我们以后拷贝这要拷贝这个DIV就行了,上面是一个包含图片DIV,下面是个包含标题的div这样十分有利于美工进行美化,标题可以根据Css样式显示在不同的位置,想上面的图一、图二所示其实是同一个图片展示系统只是CSS样式不同展示的效果也就不同。
二、CSS样式文件
这部分代码我不想多说,因为这部分代码很灵活,不同的美工根据不同项目的需要可以编写不同的CSS样式,我把我开发的一个项目的CSS代码拷贝如下:
<style>
ul{padding:0px; margin:0px;}
li{margin:0px; padding:0px;}
.dtl_focusbox{ height:285px; width:543px; overflow:hidden; margin:0 auto;}
.dtl_focuslist{ height:30px; position:absolute; z-index:100; top:255px; width:543px;}
.bar_crt{color:#fff; background-color:#F00;}
.dtl_focuslist ul{ height:30px; background:#CCC; margin:0px; padding:0px; line-height:30px;filter:alpha(Opacity=60);-moz-opacity:0.4;opacity: 0.4; z-index:100;}
.dtl_focuslist li{display:inline; float:right; width:20px; height:20px; text-align:center; border:1px #FFF solid; margin:2px; line-height:20px; cursor:pointer;}
</style>
三、JS代码
这段代码也十分简单,不想其它图片展示系统那么复杂,逻辑思维也很清楚,代码中标有详细的注解,具体如下:
<script>
//网页载入后开始执行下面的代码
$(window).load(function(){
big_banner(".dtl_focusbox",".dtl_crtimg",".dtl_focuslist","bar_crt")
})
//图片展示函数
//参数说明:banner_panel 图片展示容器 可以是class,也可以是ID如果是前者用“.”+样式名,如果后者用“#”+样式名
//img_panel 图片容器
//bar_list 标题容器
//bar_crt 当前展示标题样式
var big_banner=function(banner_panel,img_panel,bar_list,bar_crt){
var allNum = 0;
var i, j;
//获取图片总数
var indexNum = $(img_panel).find("li:last-child").index();
//载入第一副图片
$(img_panel).find("li:first-child").fadeIn(1000);
//为标题列表添加鼠标滑动事件
$(bar_list).find("li").mouseover(function(){
var num = $(this).index();
allNum= num;
$(this).addClass(bar_crt).siblings().removeClass(bar_crt);
$(img_panel).find("li").eq(num).fadeIn(800).siblings().hide();
});
//图片切换效果,如果您对js非常熟悉可以添加不同的效果
function imgScroll(){
$(bar_list).find("li").eq(allNum).addClass(bar_crt).siblings().removeClass(bar_crt);
$(img_panel).find("li").eq(allNum).fadeIn(1000).siblings().hide();
allNum += 1;
if(allNum>indexNum) allNum=0;
}
//为图片展示系统添加自动切换效果,这是一个定时器 每3秒滑动一副图片
var anima = setInterval(imgScroll,3000);
$(banner_panel).hover(
function () {
clearInterval(anima);
},
function () {
anima = setInterval(imgScroll,3000);
}
);
}
</script>
这段代码灵活性也是很高的如果您对我的这个图片淡入淡出效果不满意可以随便修改imgScroll()函数做出您想要的各种效果,好了我们的图片展示就讲解完了,最后附上源代码欢迎下载。
分享到:
相关推荐
基于jquery的图片集展示插件,点击小图片或两侧小图标切换图片,在线演示:http://www.cslou.com/opensource/slide_img.html
基于Jquery图片滚动的LightBox展示效果 整合了jquery的文字/图片滚动与lightbox
jquery产品图片展示是一款基于jquery实现的产品图片轮播展示幻灯片。 jquery产品图片展示特效图:
此JQUERY图片展示代码,运行的显示方式是,上面一个大图,下面是一行可含有N个图片的滚动框,自动滚动,可左右滚动,在代码中可配置滚动速度,修改CSS可改变显示样式。使用比较简单,此DEMO中有完整的HTML和JS代码段...
此JQUERY图片展示代码,运行的显示方式是,上面一个大图,下面是一行可含有N个图片的滚动框,自动滚动,可左右滚动,在代码中可配置滚动速度,修改CSS可改变显示样式。使用比较简单,此DEMO中有完整的HTML和JS代码段...
Kwicks 基于jquery的图片展示横向手风琴效果.zip
一个基于jQuery实现的宽屏图片展示效果源码例子
基于jquery的图片效果的图片产品展示jquery相册代码。自动循环滚动,可写入图片标题,图片说明,支持任意HTML标签,可点击左右滚动。适合做产品展示或者jquery图片展示
这是一款基于jQuery的图片展示插件,该图片展示插件将图片交错地叠在一起,当鼠标点击图片时,下一张图片将会浮现上来,效果非常棒。
jQuery旋转风格切换的图片展示,点击控制按钮后,图片以旋转的方式切换至下一张,上一张自然消失,换一换形式,或许会让访客耳目一新。本效果基于jquery的旋转插件jquery.rotate.js实现。
基于jQuery的前后轮番有立体感的图片展示特效.zip
基于jQuery的滚动条展示图片效果代码.zip
基于jQuery实现图片自动轮播切换展示特效源码.zip
NULL 博文链接:https://eric-gao.iteye.com/blog/617905
基于jQuery的预览图展示特效代码 一个图片展示的JQuery代码,效果很炫。
基于jQuery编写的一款图片切换展示特效,每一张图片采取前后轮番的方式切换,有立体感,类似排除的效果,当前显示完的图片都重新排在最后边,而且是依次变小,当前显示的时候变为最大,图片过渡很平滑,不亏是强大的...
imgZoomAndRotate是一款基于jQuery的图片展示插件。该图片展示插件支持图片循环切换,缩放,旋转,拖拽。