Question

我想创建带有链接的简单轮播，如图所示：

enter image description here

它将从左向右移动，反之亦然。

问题是我没有得到只使用jQuery的确切解决方案，我尝试了很多东西，但没有帮助。

所以请提供一些相同的例子。

    <div class="dashboard-crousel" id="spanCarousel">
         <span>My Order</span>
         <span class="selected">Recommendations</span>
         <span>My Profile</span>
         <div id="controls">
            <a href="javascript:void(0);" class="dashboard-crouselLeftArrow"></a>
            <a href="javascript:void(0);" class="dashboard-crouselRightArrow"></a>
         </div>
     </div>

<script>
var slider = {
    length: parseInt($("#spanCarousel").children("span").length),
    current: 1,
    width: $("#spanCarousel").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("#spanCarousel", 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 .dashboard-crouselLeftArrow").click(function(){slider.next();});
        $("#controls .dashboard-crouselRightArrow").click(function(){slider.prev();});
    }
}

slider.initialize();  
</script>

Answer 1

参考http://bxslider.com/

插入脚本链接

第1步：链接所需文件

首先也是最重要的，需要包含jQuery库（无需下载 - 直接从Google链接）。接下来，从该站点下载包并链接bxSlider CSS文件（用于主题）和bxSlider Javascript文件。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

第2步：创建HTML标记为每张幻灯片创建一个

元素。幻灯片可以包含图像，视频或任何其他HTML内容！

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

第3步：调用bxSlider

打开.bxslider（）。请注意，调用必须在$（document）.ready（）调用内进行，否则插件将无效！

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

使用Simple Css和Jquery我们可以做到这一点：

HTML：

<div class="wrapper">
    <div id="slider">
        <span class="text-1">Text 1</span>
        <span class="text-2">Text 2</span>
        <span class="text-3">Text 3</span>
        <span class="text-4">Text 4</span>
    </div>
</div>
<div id="nav">
    <a href="#left" class="left">previous</a>
    <a href="#right" class="right">next</a>
</div>

的CSS：

#wrapper {
    position:relative;
}
#slider {
    height:200px;
}
#slider span {
    width:200px;
    height:200px;
    top:0;
    display:none;
    border:1px solid #000;
    position:absolute;
}
#nav {
    background:beige;
    width:200;
    text-align:center;
}

JQuery的

$(function () {
    var count = $("#slider > span").length;
    var slider = 1
    var speed=5000
    var fadeSpeed = 300
    var loop 
    start()
    $("#slider span:first").fadeIn(fadeSpeed);
    $('.right').click(right)
    $('.left').click(left)
    $('#slider').hover(stop,start)

    function start(){
        loop = setInterval(next, speed)
    }
    function stop(){
        clearInterval(loop)
    }
    function right() {
        stop()
        next()
        start()
        return false
    }

    function left() {
        stop()
        prev()
        start()
        return false
    }

    function prev() {
        slider--
        if (slider < 1) {
            slider = count
        }

        $("#slider > span").fadeOut(fadeSpeed)
        $(".text-" + slider).fadeIn(fadeSpeed)
    }

    function next() {
        slider++
        if (slider > count) {
            slider = 1
        }

        $("#slider > span").fadeOut(fadeSpeed)
        $(".text-" + slider).fadeIn(fadeSpeed)
    }
});

参考：http://jsfiddle.net/jakecigar/7WL6P/5/我根据您的要求进行了编辑

带有文本链接的jQuery基本轮播

1 个答案: