如何为滑块创建索引？

Question

我想创建一个图片滑块，其中包含图片，标语和链接。它应该是超轻量级的，虽然移动友好。

这是我目前的标记：

Image 1

我怎样才能＆＃34;绑定＆＃34; Slogan 1至Link 1和Image 2，以及Slogan 2至Link 2和addClass('active')，以便我能够定位＆＃34基团＆＃34;作为选择器removeClass('active')和 $group_1.addClass('active') ？

例如

SharePhotoView sharePhotoView = SharePhotoView_.build(this);
sharePhotoView.bind(mCatch);

sharePhotoView.setDrawingCacheEnabled(true);
sharePhotoView.buildDrawingCache();
Bitmap bitmap = sharePhotoView.getDrawingCache();

catchImage.setImageBitmap(bitmap);

应定位＆＃34;图片1＆＃34;，＆＃34;标语1＆＃34;和＆＃34;链接1＆＃34;。

Minimized example on jsfiddle.

Answer 1

像这样：

＆＃13;

＆＃13;

$(document).ready(function () {

    // Cache Elements
    var $slider = $('#slider');
    var $slider_images = $('#slider_images li');
    var $slider_text = $('#slider_text li');
    var $slider_select = $('#slider_select li');

     $slider_select.hover(function () {
        var index = $(this).index();
        $slider_select.removeClass('active');
        $(this).addClass('active');
        $slider_images.removeClass('active');
        $slider_text.removeClass('active');
        $slider_images.eq(index).addClass('active');
        $slider_text.eq(index).addClass('active');
    });
});

＆＃13;

ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 1.2em;
}
#slider_select li {
    cursor:pointer;
}
.active {
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper clearfix" id="slider">
    <ul id="slider_images" class="clearfix">
        <li id="sl1" class="active">Image 1</li>
        <li id="sl2">Image 2</li>
        <li id="sl3">Image 3</li>
        <li id="sl4">Image 4</li>
    </ul>
    <!--#slider_images-->
    <ul id="slider_text" class="clearfix">
        <li id="st1" class="active">Slogan 1</li>
        <li id="st2">Slogan 2</li>
        <li id="st3">Slogan 3</li>
        <li id="st4">Slogan 4</li>
    </ul>
    <!--#slider_text-->
    <ul id="slider_select" class="clearfix">
        <li class="active">Link 1</li>
        <li>Link 1</li>
        <li>Link 1</li>
        <li>Link 1</li>
    </ul>
    <!--#slider_select-->
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你甚至不需要对它们进行分组，你可以根据它们的父容器抓取它们，因此只使用少量的JS：

＆＃13;

＆＃13;

 ERROR/MainProcess] Task app.notify.send_async_sms[0d535fc4-7465-470e-9204-548ecca2c6e0] raised unexpected: RuntimeError('working outside of application context',)

＆＃13;

$('#slider_select li').on('mouseover', function() {
  var index = $(this).index();
  $('ul li').removeClass('active');
  $('ul').each(function() {
    $(this).children('li').eq(index).addClass('active');
  });
});

＆＃13;

li {
  display: none;
}
li.active {
  display: block;
}
#slider_select li {
  display: inline-block;
  border: 1px solid black;
  height: 20px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}
#slider_select li.active {
  background-color: #ddd;
}

＆＃13;

＆＃13;

＆＃13;

http://jsfiddle.net/ngoaovvr/4/

Answer 3

老实说我没有对此进行测试，但我认为它为您提供了一小段代码的正确方向。

function mySlideShow() {
    $("#slider").on("hover", "#slider_select li", function () {
        var that = this;
        $("#slider").find("li").removeClass("active")
        $("#slider ul").each(function () {
            $(this).children().eq($(that).index('li')).addClass("active");
        })
    })
}

Answer 4

除了我的另一个答案，我决定用实际的工作图像滑块制作一个新的东西！耶

你走了：

$(document).ready(function () {
    
    var sliderSpeed = 3000 //Milliseconds
    
    // Cache Elements
    var $slider = $('#slider');
    var $slider_images = $('#slider_images li');
    var $slider_text = $('#slider_text li');
    var $slider_select = $('#slider_select li');

    $slider_images.not('.active').css({
        "opacity": 0
    });
    $slider_text.not('.active').hide();

    $slider_select.mouseenter(function () {
        var index = $(this).index();
        if (!$(this).hasClass('active')) {
            change(index);
        }
    });

    var slider = setInterval(function () {
        getProperIndex($slider_select.index($slider_select.closest('.active')));
    }, sliderSpeed);

    function getProperIndex(index) {
        if (($slider_select.length - 1) == index) {
            index = 0;
        } else {
            index++;
        }

        change(index);
    }

    function change(index) {
        clearInterval(slider);
        slider = setInterval(function () {
            getProperIndex($slider_select.index($slider_select.closest('.active')));
        }, sliderSpeed);

        $slider_select.removeClass('active');
        $slider_images.removeClass('active').stop(false, false).animate({
            "opacity": 0
        });
        $slider_text.removeClass('active').stop(false, false).slideUp("fast");
        $slider_select.eq(index).addClass('active');
        $slider_images.eq(index).addClass('active').stop(false, false).animate({
            "opacity": 1
        });
        $slider_text.eq(index).addClass('active').stop(false, false).slideDown("slow");
    }
});

body, html {
    margin:0;
    padding:0;
}
#slider {
    background-color:black;
    margin:0;
    padding:0;
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1.2em;
    height:100vh;
    width:100vw;
    overflow:hidden;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
img {
    height:100%;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
#slider_text li {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    right:0;
    text-align:center;
    background-color:rgba(0, 0, 0, 0.3);
    color:white;
    padding:0.5em;
    -webkit-box-shadow: 0px 6px 5px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 6px 5px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 6px 5px -2px rgba(0, 0, 0, 0.5);
}
#slider_select {
    position:absolute;
    bottom:0;
    display:table;
    table-layout:fixed;
    width:100%;
    -webkit-box-shadow: 0px -6px 5px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px -6px 5px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0px -6px 5px -2px rgba(0, 0, 0, 0.5);
}
#slider_select li {
    display:table-cell;
    cursor:pointer;
    background-color:rgba(0, 0, 0, 0.3);
    color:#aaa;
    text-align:center;
    padding:0.5em;
}
#slider_select li.active {
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper clearfix" id="slider">
    <ul id="slider_images" class="clearfix">
        <li id="sl1" class="active">
            <img src='https://upload.wikimedia.org/wikipedia/commons/a/a4/Gitara_elektryczna1.jpg' />
        </li>
        <li id="sl2">
            <img src='https://upload.wikimedia.org/wikipedia/commons/1/10/Crystal_coop_city.png' />
        </li>
        <li id="sl3">
            <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Danaus_genutia_06847.JPG/1920px-Danaus_genutia_06847.JPG' />
        </li>
        <li id="sl4">
            <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Ahaetulla_prasina%2C_oriental_whipsnake_-_Kaeng_Krachan_National_Park.jpg/1920px-Ahaetulla_prasina%2C_oriental_whipsnake_-_Kaeng_Krachan_National_Park.jpg' />
        </li>
    </ul>
    <!--#slider_images-->
    <ul id="slider_text" class="clearfix">
        <li id="st1" class="active">Slogan 1</li>
        <li id="st2">Slogan 2</li>
        <li id="st3">Slogan 3</li>
        <li id="st4">Slogan 4</li>
    </ul>
    <!--#slider_text-->
    <ul id="slider_select" class="clearfix">
        <li class="active">Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
    </ul>
    <!--#slider_select-->
</div>

图片滑块目前分别设为100vh和100vw height和width。您可以将其更改为您想要更改图像滑块大小的任何值。

这里也是一个jsfiddle！ http://jsfiddle.net/ctwheels/p6jv9a2e/

<小时/> 的修改 根据您的评论，mouseleave现在重新启动间隔而不是mouseenter事件。 mouseenter事件现在会停止间隔。

$(document).ready(function () {
    
    var sliderSpeed = 3000 //Milliseconds
    
    // Cache Elements
    var $slider = $('#slider');
    var $slider_images = $('#slider_images li');
    var $slider_text = $('#slider_text li');
    var $slider_select = $('#slider_select li');

    $slider_images.not('.active').css({
        "opacity": 0
    });
    $slider_text.not('.active').hide();

    $slider_select.mouseenter(function () {
        var index = $(this).index();
        if (!$(this).hasClass('active')) {
            change(index);
        }
    });
    
    $slider_select.mouseleave(function () {
        slider = setInterval(function () {
            getProperIndex($slider_select.index($slider_select.closest('.active')));
        }, sliderSpeed);
    });

    var slider = setInterval(function () {
        getProperIndex($slider_select.index($slider_select.closest('.active')));
    }, sliderSpeed);

    function getProperIndex(index) {
        if (($slider_select.length - 1) == index) {
            index = 0;
        } else {
            index++;
        }

        change(index);
    }

    function change(index) {
        clearInterval(slider);

        $slider_select.removeClass('active');
        $slider_images.removeClass('active').stop(false, false).animate({
            "opacity": 0
        });
        $slider_text.removeClass('active').stop(false, false).slideUp("fast");
        $slider_select.eq(index).addClass('active');
        $slider_images.eq(index).addClass('active').stop(false, false).animate({
            "opacity": 1
        });
        $slider_text.eq(index).addClass('active').stop(false, false).slideDown("slow");
    }
});

body, html {
    margin:0;
    padding:0;
}
#slider {
    background-color:black;
    margin:0;
    padding:0;
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1.2em;
    height:100vh;
    width:100vw;
    overflow:hidden;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
img {
    height:100%;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
#slider_text li {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    right:0;
    text-align:center;
    background-color:rgba(0, 0, 0, 0.3);
    color:white;
    padding:0.5em;
    -webkit-box-shadow: 0px 6px 5px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 6px 5px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 6px 5px -2px rgba(0, 0, 0, 0.5);
}
#slider_select {
    position:absolute;
    bottom:0;
    display:table;
    table-layout:fixed;
    width:100%;
    -webkit-box-shadow: 0px -6px 5px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px -6px 5px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0px -6px 5px -2px rgba(0, 0, 0, 0.5);
}
#slider_select li {
    display:table-cell;
    cursor:pointer;
    background-color:rgba(0, 0, 0, 0.3);
    color:#aaa;
    text-align:center;
    padding:0.5em;
}
#slider_select li.active {
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper clearfix" id="slider">
    <ul id="slider_images" class="clearfix">
        <li id="sl1" class="active">
            <img src='https://upload.wikimedia.org/wikipedia/commons/a/a4/Gitara_elektryczna1.jpg' />
        </li>
        <li id="sl2">
            <img src='https://upload.wikimedia.org/wikipedia/commons/1/10/Crystal_coop_city.png' />
        </li>
        <li id="sl3">
            <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Danaus_genutia_06847.JPG/1920px-Danaus_genutia_06847.JPG' />
        </li>
        <li id="sl4">
            <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Ahaetulla_prasina%2C_oriental_whipsnake_-_Kaeng_Krachan_National_Park.jpg/1920px-Ahaetulla_prasina%2C_oriental_whipsnake_-_Kaeng_Krachan_National_Park.jpg' />
        </li>
    </ul>
    <!--#slider_images-->
    <ul id="slider_text" class="clearfix">
        <li id="st1" class="active">Slogan 1</li>
        <li id="st2">Slogan 2</li>
        <li id="st3">Slogan 3</li>
        <li id="st4">Slogan 4</li>
    </ul>
    <!--#slider_text-->
    <ul id="slider_select" class="clearfix">
        <li class="active">Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
    </ul>
    <!--#slider_select-->
</div>

和jsfiddle：http://jsfiddle.net/ctwheels/p6jv9a2e/1/