Question

我正在创建一个网页，我需要以这样的方式滑动文本和图像，使图像从左侧滑动，然后使用jquery / javascript从单击按钮时右侧的文本幻灯片。

请检查slider我想让我的文字和图片像这样滑动

请建议我使用必要的js / JQuery

Answer 1

上的示例

上的教程

he text and image in such a way that image slides from left and then the text slides from right on clicking a button by using jquery/javascript

你把它放在div中，这是一个解决方案：

<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<script>
$( "#go" ).click(function(){
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>
</body>
</html>

Answer 2

css3＆amp; jquery的。

有一些不错的插件＆amp;教程。下载它们并根据需要进行调整。

http://www.sequencejs.com/themes/category/free/

http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

如何使用滑动效果从左到右滑动文本和图像

2 个答案: