`
Action-人生
  • 浏览: 104939 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

CSS+JS实现图片集展示(二)

阅读更多

http://blog.csdn.net/gisshixisheng/article/details/42320613
题目与上面的两篇文章有所重复,但是内容与上两篇上有所区别,本文中,实现的图片集展示的效果为:
1、详细图和缩略图的同步展示;
2、图片的自动播放;
3、显示图片的缩影图的焦点显示与别的图片的遮盖显示;
4、鼠标移动至详图显示图片控制控件。


具体效果图如下:




下面将我实现的代码贴出来,以供大家参考。
1、showimg.css
html, body{  
    height: 100%;  
    margin: 0;  
    padding: 0;  
    text-align: center;  
}  
#prev{  
    position: absolute;  
    top: 125px;  
    left: 0px;  
    width: 45px;  
    height: 50px;  
    background: url(../img/prev.png);  
}  
#next{  
    position: absolute;  
    top: 125px;  
    right: 0px;  
    width: 45px;  
    height: 50px;  
    background: url(../img/next.png);  
}  
#prev:hover,#next:hover{  
    cursor: pointer;  
}  
.detail-div{  
    position: relative;  
    display:inline-block;  
    padding:4px;  
    margin:0 0.5rem 1rem 0.5rem 1rem;  
    line-height:0;  
    -webkit-transition:background-color 0.1s ease-out;  
    -moz-transition:background-color 0.1s ease-out;  
    -o-transition:background-color 0.1s ease-out;  
    transition:background-color 0.1s ease-out;  
    -webkit-border-radius:6px;  
    -moz-border-radius:6px;  
    -ms-border-radius:6px;  
    -o-border-radius:6px;  
    border-radius:6px;  
}  
.thumb-div{  
    position: absolute;  
    bottom: -110px;  
    left: 4px;  
    background: #555;  
}  
.thumb{  
    margin-left: 7px;  
    margin-top: 5px;  
    margin-bottom: 5px;  
    float: left;  
    position: relative;  
}  
.thumb-img{  
    -webkit-border-radius:5px;  
    -moz-border-radius:5px;  
    -ms-border-radius:5px;  
    -o-border-radius:5px;  
    border-radius:5px  
}  
.thumb-active{  
    border: 2px solid #fff;  
    -webkit-border-radius:5px;  
    -moz-border-radius:5px;  
    -ms-border-radius:5px;  
    -o-border-radius:5px;  
    border-radius:5px;  
    height: 100px;  
}  
.thumb-modal{  
    background: #141414;  
    opacity: 0.5;  
    filter:alpha(opacity=50);  
    position: absolute;  
    left: 0px;  
    bottom: 2px;  
    -webkit-border-radius:5px;  
    -moz-border-radius:5px;  
    -ms-border-radius:5px;  
    -o-border-radius:5px;  
    border-radius:5px;  
}  
.thumb-modal-hide{  
    display: none;  
}  

2、juqery.showimg.js
(function($){  
    $.fn.showImg = function(options){  
        var defaults = {};  
        var options = $.extend(defaults, options);  
        var container=$(this);  
        var imgUrls = options.imgUrls;  
        var width = options.width,height = options.height,thumbHeight = options.thumbHeight;  
        var autoPlay = options.autoplay;  
  
        container.css("width",width+"px");  
  
        var imgIndex = 1,length = imgUrls.length;  
        var play;  
  
        /** 
         * 图片详情 
         */  
        var detailDiv = $("<div></div>").addClass("detail-div").appendTo(container);  
  
        var ctrlDiv = $("<div></div>").appendTo(detailDiv).hide();  
        var prevA = $("<a></a>").attr("id","prev").appendTo(ctrlDiv).hide(),  
            nextA = $("<a></a>").attr("id","next").appendTo(ctrlDiv);  
  
        $(".detail-div").live("mouseenter",function(){  
            play = clearInterval(play);  
            ctrlDiv.show();  
        });  
        $(".detail-div").live("mouseleave",function(){  
            play = setInterval(playImg,3000);  
            ctrlDiv.hide();  
        });  
  
        var detailImgA = $("<a></a>").appendTo(detailDiv);  
        var detailImg = $("<img />").attr("id","detailImg")  
            .attr("width",width)  
            .attr("height",height)  
            .attr("src","img/demopage/image-"+imgIndex+".jpg")  
            .appendTo(detailImgA);  
  
        /** 
         * 缩影图片 
         */  
        var thumbDiv = $("<div></div>").addClass("thumb-div")  
            .appendTo(container)  
            .css("width",width+"px");  
        addThumbImgs();  
  
        prevA.on("click",function(){  
            imgCtrlFun("prev");  
        });  
        nextA.on("click",function(){  
            imgCtrlFun("next");  
        });  
  
        if(autoPlay){  
            play = setInterval(playImg,3000);  
        }  
        function playImg(){  
            if(imgIndex===length){  
                imgIndex=0;  
            }  
            nextA.click();  
        }  
        /** 
         * 图片控制 
         * @param type 
         */  
        function imgCtrlFun(type){  
            if(type==="prev"){  
                if(imgIndex>1){  
                    imgIndex= imgIndex-1;  
                }  
            }  
            else{  
                if(imgIndex<length){  
                    imgIndex= imgIndex+1;  
                }  
            }  
            $("#detailImg").attr("src","img/demopage/image-"+imgIndex+".jpg");  
            thumbDiv.html("");  
            addThumbImgs();  
            if(imgIndex===length){  
                $("#next").hide();  
            }  
            else{  
                $("#next").show();  
            }  
            if(imgIndex===1){  
                $("#prev").hide();  
            }  
            else{  
                $("#prev").show();  
            }  
        };  
        /** 
         * 添加图片缩影 
         */  
        function addThumbImgs(){  
            var thumbWidth = width/3-10;  
            for(var i=imgIndex-2;i<imgIndex+1;i++){  
                var thumb = $("<div></div>").addClass("thumb").appendTo(thumbDiv);  
                var thumbModalDiv = $("<div></div>").addClass("thumb-modal").appendTo(thumb);  
                thumbModalDiv.css("height",thumbHeight+"px")  
                    .css("width",thumbWidth+"px");  
                var thumbImg = $("<img />").attr("id","thumb"+(i+1))  
                    .attr("width",thumbWidth)  
                    .attr("height",thumbHeight)  
                    .addClass("thumb-img")  
                    .appendTo(thumb);  
                if(!(i<0)){  
                    thumbImg.attr("src",imgUrls[i]);  
                }  
                if(i===imgIndex-1){  
                    thumb.addClass("thumb-active");  
                    thumbModalDiv.addClass("thumb-modal-hide");  
                }  
            }  
        };  
    }  
})(jQuery);  

3、index.html
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Image List</title>  
    <link rel="stylesheet" href="css/showimg.css">  
    <style>  
        .container{  
            position: relative;  
            text-align: center;  
            margin-left: 25%;  
        }  
    </style>  
    <script src="js/jquery-1.8.3.js"></script>  
    <script src="js/jquery.showimg.js"></script>  
    <script>  
        var imgUrls = new Array(  
            "img/demopage/image-1.jpg",  
            "img/demopage/image-2.jpg",  
            "img/demopage/image-3.jpg",  
            "img/demopage/image-4.jpg",  
            "img/demopage/image-5.jpg"  
        );  
        $(document).ready(function (){  
            $('#container').showImg({  
                imgUrls:imgUrls,  
                width:600,  
                height:300,  
                thumbHeight:100,  
                autoplay:true  
            });  
        });  
    </script>  
</head>  
<body>  
<div id="container" class="container"></div>  
</body>  
</html>  
  • 大小: 355.7 KB
  • 大小: 271.1 KB
分享到:
评论
1 楼 海底的潮水 2015-01-09  

相关推荐

    CSS+JS实现图片集展示

    本话题将详细探讨如何利用CSS和JS实现一个功能完备的图片集展示系统,包括图片的展示与翻页以及点击图片放大功能。 首先,我们来关注图片的展示。在HTML中,我们可以使用`&lt;img&gt;`标签来插入图片。为了实现图片集的...

    HTML+css+js网页相册大全

    例如,一种效果可能是通过CSS3的3D变换实现3D翻转效果,另一种可能使用JavaScript动态加载更多图片以实现无限滚动的视觉体验。 在实际操作中,如果你不熟悉这些技术,可以参考每个相册的源代码,了解它们是如何组合...

    Html+Css+Javascript从入门到精通.pdf

    - **图文混排**:实现图片与文本的完美结合。 - **多媒体插入**:在网页中添加音频和视频。 - **背景音乐**:为页面添加背景音效。 **第八章:使用表格展示信息** - **表格结构**:讲解表格的基本组成。 - **数据...

    制作一个简单HTML旅游网站(HTML+CSS+JS)无锡旅游网页设计与实现面.md

    - **轮播图**: 使用JavaScript实现自动轮换展示图片。通常会结合HTML的`&lt;img&gt;`标签和CSS动画实现。 - **音频/视频**: 利用HTML5的`&lt;audio&gt;`和`&lt;video&gt;`标签插入多媒体文件,并通过JavaScript控制播放、暂停等功能。 ...

    多功能电子相册翻书页效果特效HTML+css+js代码

    标题 "多功能电子相册翻书页效果特效HTML+css+js代码" 描述了一种用于网页设计的技术,这种技术能够实现模拟真实书籍翻页效果的动态电子相册。电子相册翻页特效使得用户在浏览网页上的照片集时,能够体验到如同翻阅...

    详细的HTML+CSS+JavaScript网页设计.pdf

    ### 详细的HTML+CSS+JavaScript网页设计:个人作品集 #### 一、项目概述 “个人作品集”网页是一个综合性的展示平台,旨在通过视觉吸引力和功能性来展示作者的设计能力、编程技巧以及项目经验。该网页包含多个部分...

    基于Web的个人网页响应式页面设计与实现 HTML+CSS+JavaScript(web前端网页制作课作业)

    3. **交互功能**: 添加JavaScript特效,如轮播图展示个人作品、下拉菜单实现导航栏功能等。 4. **多媒体元素**: 在页面中加入gif动画、视频或音乐等多媒体元素,使页面更加生动有趣。 综上所述,本项目通过结合...

    基于html+css+JavaScript的个人博客.zip

    综上所述,创建一个基于HTML、CSS和JavaScript的个人博客是一个集内容展示、视觉设计和交互体验于一体的项目。这三个技术的结合使得开发者能够构建出既美观又功能丰富的个人平台,充分展现自己的想法和风格。在实际...

    HTML+JS+CSS期末大作业合集

    在这个"HTML+JS+CSS期末大作业合集"中,我们可以看到学生们如何综合运用这些技术来创建吸引人的网页项目。下面将详细介绍这三个领域的核心概念及其在实际项目中的应用。 **HTML (HyperText Markup Language)** 是...

    用html+css+js实现的一个简单的图片切换特效

    接着,是CSS样式的部分,这是实现图片切换特效视觉效果的关键。首先,CSS代码中通过设置margin和padding为0,统一了页面的盒模型标准。之后,对body元素设置了字体大小、颜色和字体族,并为body指定了一个背景颜色。...

    html+css+js漂亮的个人主页

    【HTML+CSS+JS 漂亮的个人主页】是一个基于Web技术的个人展示平台,它结合了HTML、CSS和JavaScript这三种核心技术,为用户提供了一个功能丰富、视觉效果吸引人的在线空间。HTML(HyperText Markup Language)是网页...

    html+css+js表白翻页相册

    总的来说,"html+css+js表白翻页相册"是一个集HTML结构、CSS美化和JavaScript交互于一体的浪漫应用,它展示了Web前端开发的魅力,同时也提供了一个学习和实践这三项技术的实战案例。无论是对编程感兴趣想要制作类似...

    我的DW个人网站设计——安徽宣城6页HTML+CSS+JavaScript

    ### 三、关键技术知识点...对于想要进一步提升技能的学生而言,可以考虑学习更高级的 CSS 技术(如 Flexbox 和 Grid),以及 JavaScript 框架(如 React 或 Vue.js),这将有助于他们在未来开发更为复杂的网页应用。

    html+css+js的舌尖上的山东网站

    例如,foodpicture.html可能包含一个JavaScript脚本,使得用户可以浏览山东美食的图片集,而js代码负责图片的切换和动画效果。 除了这些主要技术,我们还看到像logo.html、gaodian.html这样的文件,它们可能是专门...

    JavaScript+HTML+CSS实现图片轮播

    总的来说,使用JavaScript、HTML和CSS实现图片轮播是一个典型的前端开发任务,涵盖了网页动态化的基本概念和技术。通过理解这三个技术的协同工作,开发者可以创建出丰富的用户体验,满足各种网页展示需求。

    css+js圆角 分享啦

    本资源"css+js圆角.rar"提供了一种利用CSS和JavaScript实现圆角的方法,适用于那些希望在不支持CSS3圆角的老版本浏览器中也能实现这一效果的开发者。 首先,我们来探讨CSS中的圆角实现。CSS3引入了`border-radius`...

    web2.0设计师个人主页css+xhtml+js全站模板

    这个模板充分利用了CSS(层叠样式表)、XHTML(可扩展超文本标记语言)以及JavaScript技术,以实现交互性和动态效果,提供用户友好的浏览体验。 【描述】Web2.0的设计理念强调互动性、富媒体和社区化,这一模板正是...

    2022年大一期末作业——音乐网页(纯html+css+js实现)

    3. **JavaScript应用**: 通过简单的JavaScript脚本来实现网页上的动态效果,例如图片轮播、表单验证等。 4. **多媒体元素的嵌入**: 如何在网页中嵌入音频、视频等多媒体元素,提高用户体验。 5. **网页编辑器的使用*...

    3D旋转相册(附源码)HTML+CSS+JS

    总结,3D旋转相册是一个集HTML布局、CSS美化和JavaScript交互于一体的项目,它展示了Web技术的创新应用。通过这个项目,开发者不仅可以掌握3D变换的技巧,还能提升对网页动态效果的理解,进一步提升网页设计和开发...

    基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站(5页面)HTML+CSS+JavaScript

    该项目名为“基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站”,旨在通过HTML5、CSS以及JavaScript技术构建一个旅游酒店预订网站,以满足大学生网页设计课程作业的需求。该网站涵盖了多种场景,包括...

Global site tag (gtag.js) - Google Analytics