Question

我试图用jQuery和css创建一个简单的内容滑块。

滑块有两列：

正确的一个充当滑块寻呼机
左侧包含当前内容

我设法创建了html，css和jQuery函数，用于更改活动选项卡和相关内容。但是我希望函数重复它的剩余，并通过鼠标悬停分页继续寻呼，然后通过mouseout滑块继续。

HTML

 <div id="slider">
    <div id="rightcol">
        <div class="content" id="content1">
        </div>
        <div class="content" id="content2">
        </div>
        <div class="content" id="content3">
        </div>
    </div>
    <div id="leftcol">
        <ul>
            <li id="1" class="active">a</li>
            <li id="2">b</li>
            <li id="3">c</li>
        </ul>
    </div>
</div>

CSS

 #slider
    {
        width: 600px;
        height: 300px;
    }

    #leftcol
    {
        width: 300px;
        height: 300px;
        float: left;
    }
    #rightcol
    {
        width: 300px;
        height: 300px;
        float: right;
        background-color: #F0F0F0;
    }

    #leftcol ul li
    {
        width: 300px;
        height: 100px;
    }
    #leftcol ul li.active
    {
        background-color: #F0F0F0;
    }
    .content
    {
        width: 300px;
        height: 300px;
        display: none;
    }

的jQuery

  $(document).ready(function () {
        sd(3);

    });


    function sd(currentId) {

        var currentcontent = "content";
        s = "#" + String(currentcontent) + String(currentId);
        $("#leftcol ul li").removeClass("active");
        $(".content").hide();
        $("#" + String(currentId)).addClass("active");
        $(s).show();
    }

js应该添加什么？

jsfiddle demo

Answer 1

我已经尝试过以下方式简单的jQuery内容滑块＆amp;它甚至在响应中工作。

演示链接：here

<div class="container">
<div class="slider">
    <ul>
        <li>Slider-1</li>
        <li>Slider-2</li>
        <li>Slider-3</li>
    </ul>
</div>
<a class="prev" href="javascript:void(0)">Prev</a>
<a class="next" href="javascript:void(0)">Next</a>

body{
    margin:0;
    padding:0;
}

.container{
    width: 100%;
    height: 300px;
    background: rgba(0,0,0,.45);
    margin: 0 auto;
}

.container .slider{
    overflow: hidden;
    height: 300px;
}

.container .slider ul{
    position: relative;
    padding:0;
    margin:0;
    list-style-type: none;
    height: 300px;
}

.container .slider ul li{
    background: #efefef;
    float: left;
    color: #000;
    font-size: 22px;
    text-align: center;
    height: 300px;
    line-height: 300px;
}


.container a{
    text-decoration: none;
    position: absolute;
}

.container a.prev{
    left: 0;
}

.container a.next{
    right: 0;
}
var Slider = {};

    Slider = {
        _globalvar: function(){
            var self = this;
                self.Ele = $('.slider');
                self.EleList = this.Ele.find('li');
                self.Elelength = this.EleList.length;
                self.Elewidth = this.Ele.outerWidth(true);
                self.EleSetUl = this.Elelength * this.Elewidth;
                self.current = 0;
        },

        _assignvar: function(){
            Slider.Ele.find('ul').width(Slider.EleSetUl);
            Slider.EleList.width(Slider.Elewidth);
            Slider.Ele.find('li:first-child').addClass('active');
        },

        _prev: function(){
            var prevlength = Slider.Ele.find('li.active').prev().length;
            console.log(prevlength)
            if(prevlength != 1){
                Slider.current = null;
            }

            else{
                Slider.Ele.find('li.active').removeClass('active').prev().addClass('active');
                Slider.current = "+="+Slider.Elewidth;
            }

            Slider.Ele.find('ul').animate({
                left: Slider.current
            });

            return false;
        },

        _next: function(){
            var nextlength = Slider.Ele.find('li.active').next().length; 

            if(nextlength){
                Slider.Ele.find('li.active').removeClass('active').next().addClass('active');
                Slider.current = "-="+Slider.Elewidth;
            }

            else{
                Slider.current = null;
                Slider.Ele.find('li.active').removeClass('active').parent().find('li:first-child').addClass('active');
            }

            Slider.Ele.find('ul').animate({
                left: Slider.current
            });

            return false;
        },

        _bind: function(){
            $('.prev').on('click', function(){
                Slider._prev();
            });

            $('.next').on('click', function(){
                Slider._next();
            });
        },

        _init: function(){
            var self = this;
            self._globalvar();
            self._assignvar();
            self._bind();
        }
    };

$(document).ready(function(){
    Slider._init();
}); 




https://jsfiddle.net/b54c38hj/1/

Answer 2

要使其重复，您可以使用setTimeout()并在鼠标移过内容时使其停止，您可以使用hover() jquery事件！这是 Demo

创建一个简单的jQuery内容滑块

2 个答案: