Question

我想在我的网站链接上添加6个更多链接：http://daplonline.in/

注意仅适用于第一张图片而非所有图片。

我想做这样的事情：http://daplonline.in/images/ineed.jpg

但是我的代码无效。任何人都可以给我一个解决方案如何建立这个？

我的CSS代码

/*--Main Image Preview--*/
.main_image {
    width: 598px; height: 460px;
    float: left;
    background: #333;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.main_image h2 {
    font-size: 2em;
    font-weight: normal;
    margin: 0 0 5px;    padding: 10px;

}

.main_image h2 { display: none; }
.main_image p {
    font-size: 1.2em;
    padding: 10px;  margin: 0;
    line-height: 1.6em;

}
.block small { 
    padding: 0 0 0 20px; 
    background: url(images/icon_cal.gif) no-repeat 0 center; 
    font-size: 1em; 
    display:none;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
    position: absolute;
    bottom: 0;  left: 0;
    width: 100%;
    display:none;
}
.main_image .block{

}
.main_image a.collapse {
    background: url(images/btn_coll.gif) no-repeat left top;
    height: 27px; width: 93px;
    text-indent: -99999px;
    position: absolute; 
    top: -27px; right: 20px; 
}
.main_image a.show {background-position: left bottom;} 


.image_thumb {
    float: left;
    width: 299px;
    background: #f0f0f0;
    border-right: 1px solid #fff;
    border-top: 1px solid #ccc;
}
.image_thumb img {
    border: 1px solid #ccc; 
    padding: 5px; 
    background: #fff; 
    float: left;
}
.image_thumb ul {
    margin: 0; padding: 0;
    list-style: none;
}
.image_thumb ul li{
    margin: 0; padding: 20px 10px;
    background: #f0f0f0 url(../images/nav_a.gif) repeat-x;
    width: 279px;
    float: left;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
    background: #ddd;
    cursor: pointer;
}
.image_thumb ul li.active {
    background: #fff;
    cursor: default;
}
html .image_thumb ul li h2 {
    font-size: 1.4em; 
    margin: 5px 0; padding: 0;
    vertical-align:central;

}
.image_thumb ul li .block {
    float: left; 
    margin-left: 10px;
    padding: 0;
    width: 180px;
}   
.image_thumb ul li p{display: none;}

和我的jquery 是

<script type="text/javascript">
var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions

$(document).ready(function() {  

  // Comment out this line to disable auto-play
    intervalID = setInterval(cycleImage, slidetime);

    $(".main_image .desc").show(); // Show Banner
    $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity

    // Click and Hover events for thumbnail list
    $(".image_thumb ul li:first").addClass('active'); 
    $(".image_thumb ul li").click(function(){ 
        // Set Variables
        var imgAlt = $(this).find('img').attr("alt"); //  Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
        var imgDesc = $(this).find('.block').html();    //  Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height();   // Calculate height of block    

        if ($(this).is(".active")) {  // If it's already active, then...
            return false; // Don't click through
        } else {
            // Animate the Teaser               
            $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
                $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 150 );
                $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
            });
        }

        $(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
        $(this).addClass('active');  // add class of 'active' on this list only
        return false;

    }) .hover(function(){
        $(this).addClass('hover');
        }, function() {
        $(this).removeClass('hover');
    });

    // Toggle Teaser
    $("a.collapse").click(function(){
        $(".main_image .block").slideToggle();
        $("a.collapse").toggleClass("show");
    });

    // Function to autoplay cycling of images
    // Source: http://stackoverflow.com/a/9259171/477958
    function cycleImage(){
    var onLastLi = $(".image_thumb ul li:last").hasClass("active");       
    var currentImage = $(".image_thumb ul li.active");


    if(onLastLi){
      var nextImage = $(".image_thumb ul li:first");
    } else {
      var nextImage = $(".image_thumb ul li.active").next();
    }

    $(currentImage).removeClass("active");
    $(nextImage).addClass("active");

        // Duplicate code for animation
        var imgAlt = $(nextImage).find('img').attr("alt");
        var imgTitle = $(nextImage).find('a').attr("href");
        var imgDesc = $(nextImage).find('.block').html();
        var imgDescHeight = $(".main_image").find('.block').height();

        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
      $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
      $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
        });
  };

$('.main_image').on("mouseover",function(){
clearInterval(intervalID);
});

$('.main_image').on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});

$('.image_thumb ul li').on("mouseover",function(){
  clearInterval(intervalID);
});

$('.image_thumb ul li').on("mouseout",function(){
  intervalID = setInterval(cycleImage, slidetime);
});

});// Close Function
</script>

Answer 1

一种解决方案。将所有这4个链接放在图像本身上＆amp;然后使用MAP如下： -

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

<img src="images/banner1.png" alt="magic rabbit in the hat" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Register" href="register.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

您必须正确设置坐标。

新： -

$(document).ready(function() {  
var match_img = $('img[src="images/banner1.png"]');
match_img.attr("usemap", "#planetmap");

// Rest of ur Code

});

CSS jquery在滑块中添加了4个链接

1 个答案: