Question

我有一个响应式图像滑块，该滑块的宽度和高度将使用百分比进行调整，我无法避免百分比。所以我首先找到图像高度并应用于包含图像的父div。但除了镀铬之外，它的每个地方都在工作。 resize（）工作正常，但一旦我刷新页面高度就变为零。

HTML

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>sample</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div class="slider">
    <!-- <div class="sliderMask"> -->
        <ul class="sliderWrapper">
            <li><img src="images/one.jpg" alt="one" ></li>
            <li><img src="images/two.jpg" alt="two" ></li>
            <li><img src="images/three.jpg" alt="three"></li>
            <li><img src="images/one.jpg" alt="one" ></li>
            <li><img src="images/two.jpg" alt="one" ></li>
            <li><img src="images/two.jpg" alt="one" ></li>
        </ul>
    <!-- </div> -->
    <div class="triggersMask">
        <ul class="triggers">
            <li>&#9679;</li>
            <li>&#9679;</li>
            <li>&#9679;</li>
            <li>&#9679;</li>
            <li>&#9679;</li>
        </ul>
    </div>
    <span class="control prev"></span>
    <span class="control next"></span>
</div>
</body>
</html>

CSS

@charset "utf-8";

.slider{
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

ul.sliderWrapper {
position:relative;
top:0px;left:0px;
margin-left: 0px;
margin-top: 0px;
width: 100%;
height: auto;
}
ul.sliderWrapper li {
position:absolute;
left:0px;
width: 100%;
height: auto;
}
ul.sliderWrapper li img{
    width: 100%;
    height: auto;
}
.triggersMask{
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    margin: 0 auto;
    padding: 10px 5px;
    position: absolute;
    text-align: center;
    width: 100%;
}
ul.triggers { 
    display: block;
    margin: 0 auto;
}
ul.triggers li { 
        margin:0 5px;
        padding:2px 8px; 
        font: bold 26px;
        cursor:pointer;
        color:red;
        display: inline;
        width: 15px; 
        height: 15px; 
        list-style: none;
    }
ul.triggers li.selected {
    color:#fff;
    }
.control {position:absolute; top: 33%; color:#000; cursor:pointer; width: 16px; height: 25px;}
.prev {
    left:20px;
    background: url(../images/prev.png) no-repeat;
}
.next { 
    right:20px; 
    background: url(../images/next.png) no-repeat; 
}

JS

// JavaScript Document

function slideCarousal() {

var triggers = $('ul.triggers li');
var sliderWrapper = $('ul.sliderWrapper li');
var lastElem = triggers.length-1;
var target;

triggers.first().addClass('selected');
sliderWrapper.hide().first().show();

function sliderResponse(target) {
    sliderWrapper.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('selected').eq(target).addClass('selected');
}

sliderWrapper.on('click touchend', function(){
     target = $('ul.triggers li.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});

triggers.click(function() {
    if ( !$(this).hasClass('selected') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.selected').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});
function sliderTiming() {
    target = $('ul.triggers li.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },3000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },3000);
}
}
// height function 

function imageHeightSet() {
    var imageAutoHeight = $('ul.sliderWrapper li img').height();
    $('.slider').css("height",imageAutoHeight+"px");
}

$(document).ready(function() {
slideCarousal() ;
//height 
imageHeightSet() ;

});

$(window).resize(function() {
   imageHeightSet() ;
});

更新

请找小提琴：Fiddle Example

Answer 1

这段代码对我有用...已经注释了imageHeightSet（）。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // JavaScript Document
        function slideCarousal(){
            var triggers = $('ul.triggers li');
            var sliderWrapper = $('ul.sliderWrapper li');
            var lastElem = triggers.length - 1;
            var target;
            triggers.first().addClass('selected');
            sliderWrapper.hide().first().show();

            function sliderResponse(target){
                sliderWrapper.fadeOut(300).eq(target).fadeIn(300);
                triggers.removeClass('selected').eq(target).addClass('selected');
            }

            sliderWrapper.on('click touchend', function(){
                target = $('ul.triggers li.selected').index();
                target === lastElem ? target = 0 : target = target + 1;
                sliderResponse(target);
                resetTiming();
            });

            triggers.click(function(){
                if (!$(this).hasClass('selected')) {
                    target = $(this).index();
                    sliderResponse(target);
                    resetTiming();
                }
            });

            $('.next').click(function(){
                target = $('ul.triggers li.selected').index();
                target === lastElem ? target = 0 : target = target + 1;
                sliderResponse(target);
                resetTiming();
            });
            $('.prev').click(function(){
                target = $('ul.triggers li.selected').index();
                lastElem = triggers.length - 1;
                target === 0 ? target = lastElem : target = target - 1;
                sliderResponse(target);
                resetTiming();
            });
            function sliderTiming(){
                target = $('ul.triggers li.selected').index();
                target === lastElem ? target = 0 : target = target + 1;
                sliderResponse(target);
            }
            var timingRun = setInterval(function(){
                sliderTiming();
            }, 3000);
            function resetTiming(){
                clearInterval(timingRun);
                timingRun = setInterval(function(){
                    sliderTiming();
                }, 3000);
            }
        }
        // height function 

        function imageHeightSet(){
            var imageAutoHeight = $('ul.sliderWrapper li img').height();
            $('.slider').css("height", imageAutoHeight + "px");
        }

        $(document).ready(function(){
            slideCarousal();
            //height 
            //imageHeightSet();

        });

        /*$(window).resize(function(){
            imageHeightSet();
        });*/
    });
</script>

<style text="text/CSS">
    @charset "utf-8";
    .slider {
        width: 100%;
        height: 500px;
        position: relative;
        overflow: hidden;
    }
    ul.sliderWrapper {
        position: relative;
        top: 0px;
        left: 0px;
        margin-left: 0px;
        margin-top: 0px;
        width: 100%;
        height: auto;
    }
    ul.sliderWrapper li {
        position: absolute;
        left: 0px;
        width: 100%;
        height: auto;
    }
    ul.sliderWrapper li img {
        width: 100%;
        height: auto;
    }
    .triggersMask {
        background: none repeat scroll 0 0 #000000;
        bottom: 0;
        margin: 0 auto;
        padding: 10px 5px;
        position: absolute;
        text-align: center;
        width: 100%;
    }
    ul.triggers {
        display: block;
        margin: 0 auto;
    }
    ul.triggers li {
        margin: 0 5px;
        padding: 2px 8px;
        font: bold 26px;
        cursor: pointer;
        color: red;
        display: inline;
        width: 15px;
        height: 15px;
        list-style: none;
    }
    ul.triggers li.selected {
        color: #fff;
    }
    .control {
        position: absolute;
        top: 33%;
        color: #000;
        cursor: pointer;
        width: 16px;
        height: 25px;
    }
    .prev {
        left: 20px;
        background: red;
    }
    .next {
        right: 20px;
        background: red;
    }
</style>
<body>
    <div class="slider">
            <ul class="sliderWrapper">
                <li><img src="http://s10.postimg.org/6asy886tl/img_2.jpg" alt="one"></li>
                <li><img src="http://s22.postimg.org/seweikkld/img_1.jpg" alt="two"></li>
                <li><img src="http://s10.postimg.org/6asy886tl/img_2.jpg" alt="three"></li>
                <li><img src="http://s22.postimg.org/seweikkld/img_1.jpg" alt="one"></li>
                <li><img src="http://s10.postimg.org/6asy886tl/img_2.jpg" alt="one"></li>
                <li><img src="http://s22.postimg.org/seweikkld/img_1.jpg" alt="one"></li>
            </ul>
        <div class="triggersMask">
            <ul class="triggers">
                <li>&#9679;</li>
                <li>&#9679;</li>
                <li>&#9679;</li>
                <li>&#9679;</li>
                <li>&#9679;</li>
            </ul>
        </div>
        <span class="control prev"></span>
        <span class="control next"></span>
    </div>
</body>

响应滑块图像高度自动不接受铬

1 个答案: