Question

我想创建一个简单的基本jquery滑块，只有淡入淡出效果。这是我的html＆amp; CSS。如果你能为我解决javascript代码，我将非常感谢:)提前致谢！

＆＃13;

.wrapper {width: 1200px;margin: 70px auto;}
.text_slider {overflow: hidden;display: block;width: 700px;height: 100px;border: 2px solid #42474D;position: absolute;}
.basic_content_slider {position: absolute;overflow: hidden;}
.basic_content_slider p {padding: 20px 70px;display: inline-block;color: #252a30;}
#btn1 {display: block}
#btn2 {display: none;}
#btn3 {display: none;}
#btn4 {display: none;}
#btn5 {display: none;}
.next, .prev {width: 40px;height: 40px;position: absolute;top: 30px;opacity: 0.2;}
.next {background: url(images/next.png) no-repeat;right: 0;}
.prev {background: url(images/prev.png) no-repeat;left: 0;}

＆＃13;

<div class="wrapper">
	<div class="text_slider">
		<div class="basic_content_slider">
			<p class="panel_switch" id="btn1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, aspernatur, impedit, facilis voluptate quam ab esse nam cumque non vel rem nesciunt fugiat corporis repellat similique! Obcaecati, adipisci quos dolore.</p>
			<p class="panel_switch" id="btn2">Impedit, facilis voluptate quam ab esse nam cumque non vel rem nesciunt fugiat corporis repellat similique! Obcaecati, adipisci quos dolore.</p>
			<p class="panel_switch" id="btn3">Psum dolor sit amet, consectetur adipisicing elit. Eum, placeat, impedit, blanditiis, reprehenderit laboriosam officia a dolore illo quaerat quam alias perspiciatis dignissimos dolores minima ullam libero nemo odio inventore!</p>
			<p class="panel_switch" id="btn4">quaerat quam alias perspiciatis dignissimos dolores minima ullam libero nemo odio inventore!</p>
			<p class="panel_switch" id="btn5">Henderit laboriosam officia a dolore illo quaerat quam alias perspiciatis dignissimos dolores minima ullam libero nemo odio inventore!</p>
		</div>
		<div class="next"></div>
		<div class="prev"></div>
	</div>
</div>

＆＃13;

Answer 1

添加到您的css：

.panel_switch { opacity: 0; transition: opacity 0.5s; }
.panel_switch_active { opacity: 1; }

将panel_switch_active类添加到第一张幻灯片

添加以下javascript（并包含jQuery）：

$(function(){
    $(".prev").click(function(){
        $(".panel_switch_active").removeClass("panel_switch_active").prev().addClass("panel_switch_active");
    });
    $(".next").click(function(){
        $(".panel_switch_active").removeClass("panel_switch_active").next().addClass("panel_switch_active");
    });
});

这是非常基本的。您可能想要阅读javascript和jQuery或寻找合适的插件。

编辑：我创建了一个具有完整工作版本的jsfiddle：https://jsfiddle.net/1pp92v1u/

如何创建具有淡入淡出效果的简单滑块？

1 个答案: