Question

所以我对Jquery相当新，但是下面的代码似乎应该可行。我使用了稍微不同的代码，如果之前的＆＃39;之前的话，可以将幻灯片1换成幻灯片4。单击按钮，然后从幻灯片4转到幻灯片1，如果＆＃39; next＆＃39;被点击了。在将jquery重新编码为更动态的处理中，它基本上不起作用。任何帮助，将不胜感激。

＆＃13;

<html><title>JQuery Test</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#mydiv {
		width: 500px;
		height: 300px;
		border: 3px solid navy;
		margin: 25px;
		line-height: 1.2em;
		font-family: Helvetica;
		font-weight: 400;
		font-size: 18;
		background-color: #0899bd;
		padding-right: 30px;
		color: #ffffff;
		border-radius: 20px;
	}
#mydiv p {
		font-family: verdana;
		font-size: 9;
    	color: rgb(192,192,192);
    	padding: 10px;
	}
</style>
</head>

<body>
<div id="mydiv">
	<ul>
	<li style="list-style-type: none; display: none;"; >This is my first Slide.</li>

	<li style="list-style-type: none; display: none;">This is my 2nd Slide.</li>
	
	<li style="list-style-type: none; display: none;">This is my 3rd Slide.</li>
	
	<li style="list-style-type: none; display: none;">This is my 4th Slide</li>
</ul>
</div>
<button style="margin-left: 240px;" id="prevSlide">Previous</button>
<button id="nextSlide">Next</button>

<script>
var currSlide = $('li').first();
currSlide.fadeIn(5000);

$('#prevSlide').click(function() {
	if (currSlide == $('li').first()) {
		currSlide.toggle();
		currSlide = $('li').last();
		currSlide.toggle(180);
	} else {
		currSlide.toggle();
		currSlide = currSlide.prev();
		currSlide.toggle(18);
	}
});

$('nextSlide').click(function() {
	if ($currSlide == $('li').last()) {
		$currSlide.toggle();
		$currSlide = $('li').first();
		$currSlide.toggle(180);
	} else {
		$currSlide.toggle();
		$currSlide = $currSlide.next();
		$currSlide.toggle(180);
	}
});
</script>


</body></html>

＆＃13;

Answer 1

以下是您的代码的更正版本：

您不必在变量名之前添加$。

要检查您是否使用最新项目，只需检查.next（）。length属性即可。如果是，则它有下一个项目。

P.S：我没有过多地改进你的代码，以便让你了解你犯错误的地方。

<html><title>JQuery Test</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#mydiv {
        width: 500px;
        height: 300px;
        border: 3px solid navy;
        margin: 25px;
        line-height: 1.2em;
        font-family: Helvetica;
        font-weight: 400;
        font-size: 18;
        background-color: #0899bd;
        padding-right: 30px;
        color: #ffffff;
        border-radius: 20px;
    }
#mydiv p {
        font-family: verdana;
        font-size: 9;
        color: rgb(192,192,192);
        padding: 10px;
    }
</style>
</head>

<body>
<div id="mydiv">
    <ul>
    <li style="list-style-type: none; display: none;"; >This is my first Slide.</li>

    <li style="list-style-type: none; display: none;">This is my 2nd Slide.</li>

    <li style="list-style-type: none; display: none;">This is my 3rd Slide.</li>

    <li style="list-style-type: none; display: none;">This is my 4th Slide</li>
</ul>
</div>
<button style="margin-left: 240px;" id="prevSlide">Previous</button>
<button id="nextSlide">Next</button>

<script>
var currSlide = $('li').first();
currSlide.fadeIn(5000);

$('#prevSlide').click(function() {
    if (currSlide.prev().length) {
        currSlide.toggle();
        currSlide = currSlide.prev();
        currSlide.toggle(180);

    } else {
        currSlide.toggle();
        currSlide = $('li').last();
        currSlide.fadeIn(180);
    }
});

$('#nextSlide').click(function() {
    if (currSlide.next().length) {
        currSlide.toggle();
        currSlide = currSlide.next();
        currSlide.toggle(180);
    } else {
        currSlide.toggle();
        currSlide = $('li').first();
        currSlide.fadeIn(180);

    }
});
</script>


</body></html>

Jquery Slider Wrapper不工作

1 个答案: