求一个JS图片展示效果，有演示，要求一模一样的

点击图片，可以变换到下一张，不点击图片，也可以自动变换到下一张图片。楼上的你可以看下http://www.hsgeco.com 首页图片效果，谢谢了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML dir=ltr lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>HSGECO | Manufacturer and Supplier of Oxygen Plants, PSA Plants, Pure Nitrogen Plants, Cryogenic Tanks and Cylinders</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<META name=copyright content="© 2009, HSGECO. All Rights Reserved."><SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/drupal.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/jquery.cycle.all.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/ddblock.js"></SCRIPT><SCRIPT type=text/javascript>
<![CDATA[//><!]]>
</SCRIPT><BODY>
<DIV style="VISIBILITY: hidden" id=ddblock-1 class="ddblock-contents clear-block">
<DIV class="ddblock-content clear-block">
<DIV class=ddblock-container>
<IMG alt="" src="img/1.jpg" width=55 height=55>
<IMG alt="" src="img/2.jpg" width=55 height=55>
<IMG alt="" src="img/3.jpg" width=55 height=55>
<IMG alt="" src="img/4.jpg" width=55 height=55>
<IMG alt="" src="img/5.jpg" width=55 height=55>
</DIV>
</DIV>
</DIV></BODY></HTML>代码并没有加密，只是用了jquery框架，所以一定要保留
<SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/drupal.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/jquery.cycle.all.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/ddblock.js"></SCRIPT>
这几个JS

代码没有加密，将必要的JS引入就可以了
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script type="text/javascript" src="http://www.hsgeco.com/misc/jquery.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/misc/drupal.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/sites/all/modules/ddblock/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/sites/all/modules/ddblock/js/jquery.easing.1.1.1.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/sites/all/modules/ddblock/js/json2.pack.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/sites/all/modules/ddblock/js/ddblock.js"></script>
<script type="text/javascript">
jQuery.extend(Drupal.settings, { "basePath": "/", "jstools": { "cleanurls": true, "basePath": "/" }, "collapsiblock": { "blocks": { "block-menu-secondary-links": "1", "block-menu-primary-links": "1", "block-ddblock-1": "1", "block-ddblock-2": "1", "block-block-1": "1", "block-block-4": "1", "block-block-5": "1", "block-block-6": "1", "block-ddblock-4": "1", "block-block-8": "1", "block-block-10": "1", "block-block-11": "1", "block-block-12": "1", "block-menu-menu-test": "1", "block-block-14": "1", "block-block-15": "1", "block-block-17": "1", "block-block-7": "1", "block-block-2": "1", "block-block-3": "1", "block-user-1": "1" }, "default_state": 1, "slide_type": 1, "slide_speed": 200 }, "googleanalytics": { "trackOutgoing": 1, "trackMailto": 1, "trackDownload": 1, "trackDownloadExtensions": "7z|aac|avi|csv|doc|exe|flv|gif|gz|jpe?g|js|mp(3|4|e?g)|mov|pdf|phps|png|ppt|rar|sit|tar|torrent|txt|wma|wmv|xls|xml|zip" }, "lightbox2": { "rtl": 0, "file_path": "/(\\w\\w/)sites/default/files", "default_image": "/sites/all/modules/lightbox2/images/brokenimage.jpg", "border_size": "10", "font_color": "000", "box_color": "fff", "top_position": "", "overlay_opacity": "0.8", "overlay_color": "000", "disable_close_click": 1, "resize_sequence": "0", "resize_speed": 400, "fade_in_speed": 400, "slide_down_speed": 600, "use_alt_layout": 0, "disable_resize": 0, "disable_zoom": 0, "force_show_nav": 0, "loop_items": 0, "node_link_text": "", "node_link_target": 0, "image_count": "Image !current of !total", "video_count": "Video !current of !total", "page_count": "Page !current of !total", "lite_press_x_close": "press \x3ca href=\"#\" onclick=\"hideLightbox(); return FALSE;\"\x3e\x3ckbd\x3ex\x3c/kbd\x3e\x3c/a\x3e to close", "download_link_text": "", "enable_login": false, "enable_contact": false, "keys_close": "c x 27", "keys_previous": "p 37", "keys_next": "n 39", "keys_zoom": "z", "keys_play_pause": "32", "display_image_size": "", "image_node_sizes": "(\\.thumbnail)", "trigger_lightbox_classes": "", "trigger_lightbox_group_classes": "img.thumbnail, img.image-thumbnail", "trigger_slideshow_classes": "", "trigger_lightframe_classes": "", "trigger_lightframe_group_classes": "", "custom_class_handler": 0, "custom_trigger_classes": "", "disable_for_gallery_lists": 1, "disable_for_acidfree_gallery_lists": true, "enable_acidfree_videos": true, "slideshow_interval": 5000, "slideshow_automatic_start": true, "slideshow_automatic_exit": true, "show_play_pause": true, "pause_on_next_click": false, "pause_on_previous_click": true, "loop_slides": false, "iframe_width": 600, "iframe_height": 400, "iframe_border": 1, "enable_video": 0 }, "tabs": { "slide": false, "fade": false, "speed": "slow", "auto_height": false, "next_text": "next", "previous_text": "previous" }, "ddblockImageContainer": { "1": { "block": "1", "contentContainer": "img", "imageContainerHeight": 392, "imageContainerWidth": 832, "setDimensions": "none" } }, "ddblockImages": { "1": { "block": "1", "contentContainer": "img", "imageHeight": 380, "imageWidth": 820, "setDimensions": "none" } }, "ddblockContent": { "1": { "block": "1", "contentContainer": "img", "custom": "", "fx": "fade", "height": 390, "next": 1, "overflow": "hidden", "pager": "none", "pagerEvent": "click", "pagerContainer": "pager-item", "pause": 0, "setDimensions": "none", "slideTextPosition": "bottom", "slideTextContainer": "div.slide-text", "slideTextEffectBefore": "fadeOut", "slideTextEffectBeforeSpeed": 250, "slideTextEffectAfter": "fadeIn", "slideTextEffectAfterSpeed": 1000, "speed": 3000, "timeOut": 10000, "width": 830 } } });
</script>
</head><body>

<div id="ddblock-1" class="ddblock-contents clear-block" style="visibility:hidden">
<div class="ddblock-content clear-block">
<div class="ddblock-container">
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/1.jpg" alt="" width="55px" height="55px" />
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/2.jpg" alt="" width="55px" height="55px" />
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/3.jpg" alt="" width="55px" height="55px" />
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/4.jpg" alt="" width="55px" height="55px" />
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/5.jpg" alt="" width="55px" height="55px" />
</div>
</div>
</div>
</body>
</html>

100分求一段能卖几百元的程序代码,看来CSDN上的分比人民币还值钱

<!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>
    <title></title>    <script src="App_Script/Jquery.js" type="text/javascript"></script>    <script type="text/javascript">
        $(function()
        {
            var count = 0;
            var imgs = new Array("http://img2.zol.com.cn/product/15/688/cezde7z95ESBk.jpg",
                            "http://img2.zol.com.cn/product/15/514/ceqa88b8xyhM.jpg",
                            "http://img2.zol.com.cn/product/15/704/ceMhEWKBY9xmI.jpg",
                            "http://img2.zol.com.cn/product/15/720/cea7p4gQDoiXI.jpg",
                            "http://img2.zol.com.cn/product/15/736/ceWKmD7I6E52U.jpg");
            function Next()
            {
                count++;
                if (count >= imgs.length)
                {
                    count = 0;
                }
                $("#photo").attr("src", imgs[count]);
            }            function Show()
            {
                $("#photo").attr("src", imgs[0])[0].Next = Next;                window.setInterval("$('#photo').click()", 3000);
            }
            Show();
            $("#photo").click(function()
            {
                this.Next();
            });
        });


    </script></head>
<body>
    <img id="photo" width="300px" height="300px" />
</body>
</html>
我不觉得这种效果的代码能价值几百块。

这个比较方便。你可以直接另保存试下。我测试了。100%可以。<!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>
    <title></title>    <script type="text/javascript">
        window.onload = function()
        {
            var count = 0;
            var imgs = new Array("http://img2.zol.com.cn/product/15/688/cezde7z95ESBk.jpg",
                            "http://img2.zol.com.cn/product/15/514/ceqa88b8xyhM.jpg",
                            "http://img2.zol.com.cn/product/15/704/ceMhEWKBY9xmI.jpg",
                            "http://img2.zol.com.cn/product/15/720/cea7p4gQDoiXI.jpg",
                            "http://img2.zol.com.cn/product/15/736/ceWKmD7I6E52U.jpg");            var thePhoto = document.getElementById("photo");            function Next()
            {
                count++;
                if (count >= imgs.length)
                {
                    count = 0;
                }
                thePhoto.setAttribute("src", imgs[count]);
            }            function Show()
            {
                thePhoto.setAttribute("src", imgs[0]);
                thePhoto.Next = Next;                window.setInterval("document.getElementById('photo').Next()", 3000);
            }
            Show();
            thePhoto.onclick = function()
            {
                this.Next();
            };
        };


    </script></head>
<body>
    <img id="photo" width="300px" height="300px" />
</body>
</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=gb2312" />
<title>图片切换效果</title>
</head>
<body>
<style type="text/css">
.container{width:290px;height:180px;border:1px solid #eee;position:relative;}
#idPicText{background:#eee;line-height:25px;text-align:center;font-weight:bold;width:292px;white-space:nowrap;overflow:hidden;font-size:12px;}
#idPicText a{text-decoration:none;color:#333;display:block;}
#idNum{position:absolute; right:5px; bottom:5px;}
#idNum li{float: left;list-style:none;color: #fff;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;margin: 1px;border: 1px solid #707070;background-color: #060a0b;}
#idNum li.on{line-height: 18px;width: 18px;height: 18px;font-size: 14px;border: 0;background-color: #ce0609;font-weight: bold;}
</style> <div id="idPicShow" class="container">
<ul id="idNum">

</ul>
</div>
<div id="idPicText"></div> <script src="pagead.js" type="text/javascript"></script>
<script type="text/javascript">
var rvt = new RevealTrans("idPicShow");
//添加变换对象
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');

var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];
var oNum = $("idNum"), arrNum = [];
//设置图片列表
Each(rvt.List, function(list, i){
var li = document.createElement("li");
li.innerHTML = i + 1;
arrNum[i] = li;
oNum.appendChild(li);
li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
});
//设置图片列表样式文本显示区域
rvt.onShow = function(){
var i = this.Index, list = this.List[i];
Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;
}
oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };
oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
rvt.Start();
</script>
</body>
</html>

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script type="text/javascript" src="http://www.hsgeco.com/misc/jquery.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/misc/drupal.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/sites/all/modules/ddblock/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/sites/all/modules/ddblock/js/jquery.easing.1.1.1.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/sites/all/modules/ddblock/js/json2.pack.js"></script>
<script type="text/javascript" src="http://www.hsgeco.com/sites/all/modules/ddblock/js/ddblock.js"></script>
<script type="text/javascript">
jQuery.extend(Drupal.settings, { "basePath": "/", "jstools": { "cleanurls": true, "basePath": "/" }, "collapsiblock": { "blocks": { "block-menu-secondary-links": "1", "block-menu-primary-links": "1", "block-ddblock-1": "1", "block-ddblock-2": "1", "block-block-1": "1", "block-block-4": "1", "block-block-5": "1", "block-block-6": "1", "block-ddblock-4": "1", "block-block-8": "1", "block-block-10": "1", "block-block-11": "1", "block-block-12": "1", "block-menu-menu-test": "1", "block-block-14": "1", "block-block-15": "1", "block-block-17": "1", "block-block-7": "1", "block-block-2": "1", "block-block-3": "1", "block-user-1": "1" }, "default_state": 1, "slide_type": 1, "slide_speed": 200 }, "googleanalytics": { "trackOutgoing": 1, "trackMailto": 1, "trackDownload": 1, "trackDownloadExtensions": "7z|aac|avi|csv|doc|exe|flv|gif|gz|jpe?g|js|mp(3|4|e?g)|mov|pdf|phps|png|ppt|rar|sit|tar|torrent|txt|wma|wmv|xls|xml|zip" }, "lightbox2": { "rtl": 0, "file_path": "/(\\w\\w/)sites/default/files", "default_image": "/sites/all/modules/lightbox2/images/brokenimage.jpg", "border_size": "10", "font_color": "000", "box_color": "fff", "top_position": "", "overlay_opacity": "0.8", "overlay_color": "000", "disable_close_click": 1, "resize_sequence": "0", "resize_speed": 400, "fade_in_speed": 400, "slide_down_speed": 600, "use_alt_layout": 0, "disable_resize": 0, "disable_zoom": 0, "force_show_nav": 0, "loop_items": 0, "node_link_text": "", "node_link_target": 0, "image_count": "Image !current of !total", "video_count": "Video !current of !total", "page_count": "Page !current of !total", "lite_press_x_close": "press \x3ca href=\"#\" onclick=\"hideLightbox(); return FALSE;\"\x3e\x3ckbd\x3ex\x3c/kbd\x3e\x3c/a\x3e to close", "download_link_text": "", "enable_login": false, "enable_contact": false, "keys_close": "c x 27", "keys_previous": "p 37", "keys_next": "n 39", "keys_zoom": "z", "keys_play_pause": "32", "display_image_size": "", "image_node_sizes": "(\\.thumbnail)", "trigger_lightbox_classes": "", "trigger_lightbox_group_classes": "img.thumbnail, img.image-thumbnail", "trigger_slideshow_classes": "", "trigger_lightframe_classes": "", "trigger_lightframe_group_classes": "", "custom_class_handler": 0, "custom_trigger_classes": "", "disable_for_gallery_lists": 1, "disable_for_acidfree_gallery_lists": true, "enable_acidfree_videos": true, "slideshow_interval": 5000, "slideshow_automatic_start": true, "slideshow_automatic_exit": true, "show_play_pause": true, "pause_on_next_click": false, "pause_on_previous_click": true, "loop_slides": false, "iframe_width": 600, "iframe_height": 400, "iframe_border": 1, "enable_video": 0 }, "tabs": { "slide": false, "fade": false, "speed": "slow", "auto_height": false, "next_text": "next", "previous_text": "previous" }, "ddblockImageContainer": { "1": { "block": "1", "contentContainer": "img", "imageContainerHeight": 392, "imageContainerWidth": 832, "setDimensions": "none" } }, "ddblockImages": { "1": { "block": "1", "contentContainer": "img", "imageHeight": 380, "imageWidth": 820, "setDimensions": "none" } }, "ddblockContent": { "1": { "block": "1", "contentContainer": "img", "custom": "", "fx": "fade", "height": 390, "next": 1, "overflow": "hidden", "pager": "none", "pagerEvent": "click", "pagerContainer": "pager-item", "pause": 0, "setDimensions": "none", "slideTextPosition": "bottom", "slideTextContainer": "div.slide-text", "slideTextEffectBefore": "fadeOut", "slideTextEffectBeforeSpeed": 250, "slideTextEffectAfter": "fadeIn", "slideTextEffectAfterSpeed": 1000, "speed": 3000, "timeOut": 10000, "width": 830 } } });
</script>
</head><body>

<div id="ddblock-1" class="ddblock-contents clear-block" style="visibility:hidden">
<div class="ddblock-content clear-block">
<div class="ddblock-container">
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/1.jpg" alt="" width="55px" height="55px" />
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/2.jpg" alt="" width="55px" height="55px" />
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/3.jpg" alt="" width="55px" height="55px" />
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/4.jpg" alt="" width="55px" height="55px" />
    <img src="http://www.hsgeco.com/sites/default/files/images/ddblock/homepage/5.jpg" alt="" width="55px" height="55px" />
</div>
</div>
</div>
</body>
</html>

调试易

求一个JS图片展示效果，有演示，要求一模一样的

解决方案 »