使用jquery在asp.net中使用下一个和上一个按钮滑动（顺时针）图像 [英] Image sliding(clockwise) with next and previous buttons in asp.net using jquery

问题描述

你好编码员，



我正在用Jquery滑动做简单的图像。



这里我的要求是：

3张图片应该往返像

我有3张幻灯片slide1，slide2和slide3



当我在slide1中单击下一步时，slide2将来自右侧。（工作）

当我在slide2中单击下一步时，slide3将来自右侧。（工作）

当我在slide3中单击下一步时，slide1将来自右侧。（不工作）



当我点击上一个按钮时，这是反转。



以下是我的代码：

Hi coders,

I am doing simple images with sliding using Jquery.

Here My requirement is:
3 images should round trip like
I have 3 slides slide1,slide2 and slide3

when I click next in slide1, slide2 will come from right side.(working)
When I click next in slide2, slide3 will come from right side.(working)
when I click next in slide3, slide1 will come from right side.(not working)

This is reversal when I click previous button.

Below is my code:

$(function () {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
//var numberOfSlides = slides.length;
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float': 'left'
});
$('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
$('.nav').bind('click', function () {
    if(($(this).attr('id') == 'rightNav'))
    {
        if(currentPosition==0)
        {
        currentPosition=currentPosition + 1
        }
        else if(currentPosition==1)
        {
           currentPosition=currentPosition + 1
        }
        else if(currentPosition==2)
        {
           currentPosition=0
        }
    }
    if(($(this).attr('id') == 'leftNav'))
    {
if(currentPosition==0)
        {
        currentPosition=currentPosition +2
        }
else if(currentPosition==1)
        {
           currentPosition=currentPosition - 1
        }
        else if(currentPosition==2)
        {
           currentPosition=currentPosition - 1
        }
    }
    moveSlide();    
});
    
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
};
});

和我的Html代码：

And my Html code:

<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg" />
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg" />
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg" />
</div>
</div>
</div>

我的Css代码：

And my Css Code:

#slideshow {
position: relative;
}
#slideshow #slideshowWindow {
height: 257px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide {
height: 257px;
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:223px;
left:320px;
width:94px;
height:34px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/previous.png);
background-repeat:no-repeat;
z-index:999;
}
#rightNav
{
top:225px;
left:450px;
width:53px;
height:26px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/next.png);
background-repeat:no-repeat;
z-index:999;
}

我的问题是如果我在这个时间点的最后一张幻灯片中，如果我点击下一个按钮它应该向左移动，第一张幻灯片应该从右侧到达该位置。

同时如果我在这个时间点的第一张幻灯片中，如果我点击上一个按钮它应该向右移动，最后一张幻灯片应该从左侧到达该位置。



这没有发生，请修改我的代码中的任何错误。

Here my problem is if I am in the last slide at this point of time if I click next button it should move left and first slide should come to the place from right side.
At the same time if I am in the first slide at this point of time if I click previous button it should move right and last slide should come to the place from left side.

This is not happening, please modify is any thing wrong in my code.

推荐答案

（函数（）{
var currentPosition = 0 ;
var slideWidth = 500 ;
var slides =

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

（' 滑动'）。
// var numberOfSlides = slides.length;
slides.wrapAll（< span class =code-string>' < div id =slidesHolder>< / div>'）
幻灯片.css（{' float'：' left'
}）;

('.slide'); //var numberOfSlides = slides.length; slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float': 'left' });

（' ＃slideshow'）。prepend（' < span class =navid =leftNav>向左移动< / span>'）
.append（' < span class =navid =rightNav>向右移动< / span>'）;

('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>') .append('<span class="nav" id="rightNav">Move Right</span>');

这篇关于使用jquery在asp.net中使用下一个和上一个按钮滑动（顺时针）图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！