响应式图像幻灯片 [英] Responsive image slideshow

问题描述

我想为我的asp.net网页制作一张响应式图片幻灯片。我现在有什么工作，但我觉得很难让它变得敏感。请帮忙。



我尝试过：

I want a responsive image slideshow for my asp.net webpage. what i have now works but I find it difficult making it responsive. Please help.

What I have tried:

<div>
    <div id="slideshow">
<div id="slideshowWindow">

<div class="slide">

<div class="one"></div>
</div>

<div class="slide">

<div class="two"></div>
</div>

<div class="slide">

<div class="three"></div>
</div>

<div class="slide">

<div class="four"></div>
</div>

</div>
</div>
    </div>

<style>
   
 #slideshow {
position: relative;
    top: 0px;
    left: 0px;
    width: 500px;
  
    margin-left :2%;
}
#slideshow #slideshowWindow {
height: 350px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
  
}
#slideshow #slideshowWindow .slide {
height: 350px;
margin: 0;
padding: 0;
position: relative;
width: 500px;
}

#slideshow #slideshowWindow .slide .slideText {
background-image: url("http://www.webchief.co.uk//blog/simple-jquery-slideshow/greyBg.png");
background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
.nav
{
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftNav
{
top:90%;
left:0;
width:100px;
height:50px;
background-image:url(images/back.jpg');
background-repeat:no-repeat;
z-index:999;
}
#rightNav
{
top:90%;
left:335px;
width:100px;
height:50px;
background-image:url(images/forward.jpg');
background-repeat:no-repeat;
z-index:999;
}    
.one{background-color:green; width:100%;height:500px;}
.two{background-color:yellow;width:100%;height:500px;}
.three{background-color:red;width:100%;height:500px;} 
.four{background-color:blue; width:100%;height:500px;}   
        
</style>


<script>
      $( function slideshow () {
 
      
    var currentPosition = 0;
   var slideWidth =500;
 
            
            var slides = $('.slide');
            slides.css('width', slideWidth);
    
      var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 2000;
    //Assign a timer, so it will run periodically
    slideShowInterval = setInterval(changePosition, speed);
    slides.wrapAll('<div id="slidesHolder"></div>')
    slides.css({ 'float': 'left'
    });
    //set #slidesHolder width equal to the total width of all the slides
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);
    $('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
    manageNav(currentPosition);
    //tell the buttons what to do when clicked
    $('.nav').bind('click', function () {
        //determine new position
        currentPosition = ($(this).attr('id') == 'rightNav') ? currentPosition + 1 : currentPosition - 1;
        //hide/show controls
        manageNav(currentPosition);
        clearInterval(slideShowInterval);
        slideShowInterval = setInterval(changePosition, speed);
        moveSlide();
    });
    function manageNav(position) {
        if (position == 0) {
            $('#leftNav').hide()
        }
        else {
            $('#leftNav').show()
        }
        if (position == numberOfSlides - 1) {
            $('#rightNav').hide()
        }
        else { $('#rightNav').show() }
    }
    function changePosition() {
        if (currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
            manageNav(currentPosition);
        }
        else {
            currentPosition++;
            manageNav(currentPosition);
        }
        moveSlide();
    }
    function moveSlide() {
        $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
    };
});
    </script>

推荐答案

（function slideshow（）{


var currentPosition = 0;
var slideWidth = 500;


var slides =

( function slideshow () { var currentPosition = 0; var slideWidth =500; var slides =

（'。slide'）;
slides.css（'width'，slideWidth）;

var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 2000;
//分配一个计时器，因此它将定期运行
slideShowInterval = setInterval（changePosition，speed）;
slides.wrapAll（'< div id =slidesHolder>< / div>'）
slides.css（{'float'：'left'
}）;
//设置#slidesHolder宽度等于所有幻灯片的总宽度

('.slide'); slides.css('width', slideWidth); var numberOfSlides = slides.length; var slideShowInterval; var speed = 2000; //Assign a timer, so it will run periodically slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float': 'left' }); //set #slidesHolder width equal to the total width of all the slides

（'＃slidesHolder'）。css（'width'，slideWidth * numberOfSlides）;

('#slidesHolder').css('width', slideWidth * numberOfSlides);

这篇关于响应式图像幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！