基于jquery的图片展示

图片展示系统是每个网站都有的，这样通用行就十分重要，移植越简单学好，整理我以前开发的所有项目，从中提取一个最简单使用的进行整理，首先看一下这个图片展示的效果。

基于jquery的图片展示

图一

基于jquery的图片展示

图二

这款图片展示系统，通用很强只要程序员开发完程序交给美工，美工编写各种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的图片展示

相关文章