如何使用jQuery / JavaScript实现轮播效果 [英] How to implement carousel effect using jQuery/JavaScript

问题描述

我发现了一个JavaScript轮播 此处 。

I found a JavaScript carousel here.

当您点击网页上的向右或向左按钮时，页面会动态地动画滚动，标题和内容的动画速度不同。

它可以用jQuery或JavaScript来完成。

When you click right or left button on the webpage, the page scrolls dynamically with animation, and the animation speed of title and the content is different.
I guess it can be done with jQuery or JavaScript.

使用传统的JavaScript，很难实现这个动画效果。

很容易实现它没有动画动画，但是当涉及到使用动画动画的实现，我认为这对我很难。

Using traditional JavaScript, it is very hard to implement this moving animation effect.
It is easy to implement it without the moving animation, but when it comes to implementation with the moving animation, I think it's very hard for me.

我查找了jQuery API的解决方案，但我还是没有得到的想法。
有人可能给我一个提示如何实现这个效果吗？

I looked up jQuery APIs for the solution, but I still didn't get the idea. Could someone anyone give me a hint how to implement this effect?

推荐答案

动画时间是相等的，动画元素不同。这很容易。

Animation time is equal, but width of animating element is different. That's easy. Paralax-like slider.

这里是解决方案： http：/ /jsfiddle.net/Tymek/6M5Ce/ 例如

HTML

<div id="wrap">
    <div id="controls">
        <div class="prev">&larr;</div>
        <div class="next">&rarr;</div>
    </div>
    <div id="caption"><div class="pan">
        <div class="page"><h1>Lorem ipsum</h1></div>
        <div class="page"><h1>Litwo! Ojczyzno moja!</h1></div>
        <div class="page"><h1>Drogi Marszałku, Wysoka Izbo.</h1></div>        
    </div></div>

    <div id="content"><div class="pan">
        <div class="page"><p>Dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p></div>
        <div class="page"><p>Ty jesteś jak zdrowie. Nazywał się przyciągnąć do domu, fortuny szczodrot objaśniają wrodzone wdzięki i musiał pochodzić od Moskwy szeregów które już bronić nie chciałby do sądów granicznych. Słusznie Woźny cicho wszedł służący, i gdzie panieńskim rumieńcem dzięcielina pała.</p></div>
            <div class="page"><p>PKB rośnie Nikt inny was nie trzeba udowadniać, ponieważ zakres i miejsce szkolenia kadry odpowiadającego potrzebom. Gdy za sobą proces wdrożenia i rozwijanie struktur powoduje docenianie wag istniejących kryteriów zabezpiecza.</p></div>
    </div></div>
</div>​

SCSS >

SCSS

$sliderwidth: 400px;

#wrap {
    padding: 1em;
    background: #333;
}

h1 {
    font-weight: bold;
}

#controls {
    clear: both;
    height: 1em;
    margin: 0 0 1em 0;
    div {
        float: left;
        margin: 0 0.5em 0 0;
        padding: 0.2em;
        color: #FFF;
        background: #000;
        cursor: pointer;
    }
}

#caption, #content {
    background: #EEE;
    width: $sliderwidth;
    position: relative;
    overflow: hidden;
    .pan {
        width: 10000px;
        position: static;
    }
    .page {
        width: $sliderwidth;
        float: left;
        h1, p {
            margin: 0.2em 0.5em;
        }
    }
}
#content {
    .page {
        margin-right: $sliderwidth;
    }
}
​

strong>

JS

var slider = {
    length: parseInt($("#caption .page").length),
    current: 1,
    width: $("#caption").width(),
    next: function(){
        if(this.current < this.length){
            this.current = this.current + 1;
            this.animation();
        } else {
            this.current = 1;
            this.animation();
        }
    },
    animation: function(){
        var target = (0 - this.width) * (this.current - 1);
        this.run("#caption", target);
        target = target * 2;
        this.run("#content", target);
    },
    prev: function(){
        if(this.current > 1){
            this.current = this.current - 1;
            this.animation();
        } else {
            this.current = this.length;
            this.animation();
        }
    },
    run: function(part, target){
        $(part + " .pan").stop().animate(
            {"margin-left": target},
            1000
        );
    },
    initialize: function(){
        $("#controls .next").click(function(){slider.next();});
        $("#controls .prev").click(function(){slider.prev();});
    }
}

slider.initialize();
​

这篇关于如何使用jQuery / JavaScript实现轮播效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！