javascript - 在元素符号上为图像 slider jquery添加功能

Question

fiddle

jQuery

var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
    'float': 'left',
        'width': slideWidth
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load

// Create event listeners for .controls clicks
$('.control')
    .bind('click', function () {
    // Determine new position
    if (($(this).attr('id') == 'rightControl')) {
        if (currentPosition == numberOfSlides - 1) currentPosition = 0;
        else currentPosition++;
    } else if ($(this).attr('id') == 'leftControl') {
        if (currentPosition == 0) currentPosition = numberOfSlides - 1;
        else currentPosition--;
    }


    // Hide / show controls

    // Move slideInner using margin-left
    $('#slideInner').animate({
        'marginLeft': slideWidth * (-currentPosition)
    });
});

嗨，我在 fiddle 上偶然发现了这个 slider ，我需要它与我的元素一起使用，我在 jquery 中还是新的

我给它添加了元素符号，元素符号如何指示幻灯片的位置？以及元素符号如何可以点击。我就是找不到合适的例子

如果这是一个愚蠢/无意义的问题，我深表歉意。谢谢

链接到我找到 fiddle 的地方。感谢您对所有者的信任。

jQuery slideshow retrn to start or last

Answer 1

所以，我只添加了您想要的元素符号功能。您可以(并且需要)整理和优化代码以使其变得更好。阅读我在代码 (HTML/JS/CSS) 中以正楷书写的评论，以查看我所做的更改。

(function($) {
    var currentPosition = 0;
	var slideWidth = 560;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	// Remove scrollbar in JS
	$('#slidesContainer').css('overflow', 'hidden');

	// Wrap all .slides with #slideInner div
	slides.wrapAll('<div id="slideInner"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
	    'float': 'left',
	        'width': slideWidth
	});

	// Set #slideInner width equal to total width of all slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);

	// Insert controls in the DOM
    // ADDED CLASS 'nav' -->
	$('#slideshow')
	    .prepend('<span class="control nav" id="leftControl">Clicking moves left</span>')
	    .append('<span class="control nav" id="rightControl">Clicking moves right</span>');

    //BULLETS MANAGER - TO HIGHLIGHT THE ACTIVE BULLET ON CAROUSEL BUILT
    showBullets();

	// Hide left arrow control on first load
	// Create event listeners for .controls clicks
	
    //USE EVENT DELEGATION AS YOU HAVE DYNAMICALLY GENERATED NAV ELEMENTS
    $('#slideshow').on('click', '.nav', function (evt) {
	    evt.preventDefault();
	    // Determine new position
        // USE THIS.ID AS IT'S A BIT FASTER AND CLEANER
	    if (this.id == 'rightControl') {
	        if (currentPosition == numberOfSlides - 1) currentPosition = 0;
	        else currentPosition++;
	    } else if (this.id == 'leftControl') {
	        if (currentPosition == 0) currentPosition = numberOfSlides - 1;
	        else currentPosition--;

        //THE BULLETS RELATED CONDITION
        } else if($(this).closest("ul").is("#bullets")) {
            var $item = $(this).closest("li");
            currentPosition = $item.index();
        }
      
        //BULLETS MANAGER
        showBullets();

	    // Hide / show controls
	    // Move slideInner using margin-left
	    $('#slideInner').animate({
	        'marginLeft': slideWidth * (-currentPosition)
	    });
	});

    //THE BULLET MANAGER FUNCTION
    function showBullets() {
        var $bullets = $('#bullets');
        $bullets.find(".nav").removeClass('activeBullet');
        $bullets.find(".nav:eq(" + currentPosition + ")").addClass('activeBullet');
    }
    
}(jQuery));

#slideshow {
    margin:0 auto;
    width:640px;
    height:350px;
    background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
    position:relative;
}
#slideshow #slidesContainer {
    margin:0 auto;
    width:560px;
    height:263px;
    overflow:auto;
    /* allow scrollbar */
    position:relative;
}
#slideshow #slidesContainer .slide {
    margin:0 auto;
    width:540px;
    /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
    height:263px;
}
/** 
 * Slideshow controls style rules.
 */
 .control {
    display:block;
    width:39px;
    height:263px;
    text-indent:-10000px;
    position:absolute;
    cursor: pointer;
}
#leftControl {
    top:0;
    left:0;
    background:#000;
}
#rightControl {
    top:0;
    right:0;
    background:#000;
}
.nav-bullet {
    position : absolute;
    clear : both;
    bottom : -5px;
    left : 42%;
}
.nav-bullet ul li {
    float : left;
    margin-top : 20px;
}
.nav-bullet ul li a {
    list-style-type : none;
    text-indent : -9999px;
    display : block;
    width : 10px;
    height : 10px;
    float : left;
    margin : 0 5px;
    background-color : #000;
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
}
/*BULLET HIGHLIGHT CLASS*/
.nav-bullet ul li a.activeBullet {
    background-color : green;
}
.nav-bullet ul li a:hover, .nav-bullet ul li a.active {
    background-color: gray;
}
.active {
    background-color: #a89d8a !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slideshow">
    <div id="slidesContainer">
        <div class="slide">
            	<h2>Web Development Tutorial</h2>

            <p><a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/"><img src="img/img_slide_01.jpg" alt="An image that says Install X A M P P for wordpress." width="215" height="145" /></a>If you're into developing web apps, you should check out the tutorial called "<a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/">Using XAMPP for Local WordPress Theme Development</a>" which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!</p>
        </div>
        <div class="slide">
            	<h2>Grunge Brushes, Anyone?</h2>

            <p><a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/"><img src="img/img_slide_02.jpg" width="215" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>In this layout, I used <a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/">SR Grunge</a>, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.</p>
        </div>
        <div class="slide">
            	<h2>How About Some Awesome Grunge Textures?</h2>

            <p><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="img/img_slide_03.jpg" width="215" height="145" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a>The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p>
            <p>You can head over to the <a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/">Grunge Extreme</a> page to download the texture set or check out Six Revisions' <a href="http://sixrevisions.com/category/freebies/">freebie section</a> for even more goodies!</p>
        </div>
        <div class="nav-bullet">
            <ul id="bullets">
               <!-- ADDED CLASS 'nav' -->
                <li><a class="nav" href="#" id="bullet-one">1</a>

                </li>
                <li><a class="nav" href="#" id="bullet-two">2</a>

                </li>
                <li><a class="nav" href="#" id="bullet-three">3</a>

                </li>
            </ul>
        </div>
    </div>
    <!--slidesContainer-->
</div>
<!--slideshow-->