Html and JQuery: How to create slideshow of images or text?

Question

I recently started learning Javascript and Jquery and wanted create my own slideshow of images or text ticker. I copied some code and modified but nothing happens when i run it.

HTML is like this,simple i wanted that image to change with fadeout.So i chose array.

<div class='tickr'>
<img src='img006.jpg'>  
</div>

JQuery is like this

var i = 1;

function loop() {
    var pre = [
        'disclosure_left.png',
        'disclosure_right.png',
        'icon_more.png',
        'icon_search.png'
    ];

    var old = $('.tickr img');
    var newi = '<img src="'+ pre[1]+'"/>';

    newi.hide();
    $('.tickr').prepend(newi);

    newi.fadeIn(1000);
    old.fadeOut(1000, function () {
        $(this).remove();
    });

    i = (i == 3) ? i + 1 : 0;
}

// begin invalid code
setInterval("loop()", 2500)
}

The javascript in your example is not valid. There's an extra `}` and setInterval should be `setInterval(loop, 2500)`. `loop` is a function, not a string. — reergymerej, Feb 06 '14 at 17:02
http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle — , Feb 06 '14 at 17:04
The string in `setInterval("loop()", 2500)` will be called with eval. Eval is [considered evil](http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea). — max, Feb 06 '14 at 17:09
But how do i store the links as array and swap them with the current link, Thus changing the image. i Found a sample of this at http://www.javascriptkit.com/javatutors/externalphp2.shtml — user3280530, Feb 06 '14 at 17:15

Barret LaPlante · Answer 1 · 2014-02-06T17:16:02.743

You can use this code to add a slider

<div class="holder">
     <div class="slider-parent">
          <div class="arrow-left2"></div>
           <div class="arrow-right2"></div>
                <div class="slider2">
            <ul>
                            <li><img src="images/slider/10.jpg" alt="Chapelle's Show" /> </li>
                            <li><img src="images/slider/11.jpg" alt="Rescue Me" /></li>
                            <li><img src="images/slider/12.jpg" alt="The Guild" /></li>
                            <li><img src="images/slider/13.jpg" alt="Trailer Park Boys" /></li>
                            <li><img src="images/slider/14.jpg" alt="The Lincoln Lawyer" /></li>
                            <li><img src="images/slider/15.jpg" alt="Bones" /></li>
                            <li><img src="images/slider/16.jpg" alt="Survivor Man" /></li>
                            <li><img src="images/slider/17.jpg" alt="WildBoyz" /></li>
                            <li><img src="images/slider/18.jpg" alt="American Dad" /></li>
                        </ul>
                    </div><!--end slider div-->
                </div>  <!--Slider parent end-->
            </div><!--end holder div-->

The css:

.holder{
    width:960px;
    }

.slider-parent{
    width:100%;
    height:210px;
    background-color:#e1e1e1;
    position:relative;
    }

.slider2{
    position:absolute;
    width:780px;
    height:200px;
    background-color:#e1e1e1;
    top:20px;
    left:90px;
    overflow:hidden;
    }

    .slider2 ul {
    width:1460px;
    height:200px;
    background-color:#e1e1e1;
    }

    .slider2 ul li{
    width:140px;
    height:200px;
    background-color:orange;
    margin-right:20px;
    float:left;
    }

    .slider2 ul li:hover{
    width:140px;
    height:200px;
    opacity:.8;
    margin-right:20px;
    float:left;
    }



    .arrow-left2{
    width:60px;
    height:60px;
    background-color:white;
    position:absolute;
    top:100px;
    left:0px;
    background-image: url('../images/arrow-left.png');
    background-repeat:no-repeat;
    background-position:center;
    border-radius:10px;
    }

    .arrow-right2{
    width:60px;
    height:60px;
    background-color:white;
    position:absolute;
    top:100px;
    right:0px;
    background-image: url('../images/arrow-right.png');
    background-repeat:no-repeat;
    background-position:center;
    border-radius:10px;
    }

    .arrow-left2:hover{
    width:60px;
    height:60px;
    background-color:white;
    position:absolute;
    top:100px;
    left:0px;
    background-image: url('../images/arrow-left.png');
    background-repeat:no-repeat;
    background-position:center;
    border-radius:10px;
    opacity:.6;
    }


    .arrow-right2:hover{
    width:60px;
    height:60px;
    background-color:white;
    position:absolute;
    top:100px;
    right:0px;
    background-image: url('../images/arrow-right.png');
    background-repeat:no-repeat;
    background-position:center;
    border-radius:10px;
    opacity:.6;
    }

The JS:

 jQuery(".arrow-right2").hover(function() {
        count2++;
        // alert(count);

        if (count2 >4) {
            count2 = 4;
            jQuery(".slider2 ul").animate({
            "margin-right": "0px"
        }); //animate method ennnd
        } else {
            jQuery(".slider2 ul").animate({
            "margin-left": "-=160px"
            }); //animate method ennnd
        }
    }) //click right method end

    jQuery(".arrow-left2").hover(function() {
        count2--;

        if (count2 <0){
            count2 = 0;
            jQuery(".slider2 ul").animate({
            "margin-left": "0px"
            }); //animate method ennnd
        } else {
            jQuery(".slider2 ul").animate({
            "margin-left": "+=160px"
            }); //animate method ennnd
        }
    }) //click left method end

If this doesn't work let me know, might have forgotten some js...

Thanks but in my method i wanted to store links as array and infinitely loop the images, How to do that? — user3280530, Feb 06 '14 at 17:19
Honestly, I can't remember. Maybe someone else knows how to do it... I remember it being something like count++ or something like that (I think). There are several plugins out there that do this with very nice effects tho. Maybe you might like to try a plugin such as this: http://www.owlgraphic.com/owlcarousel/#demo — Barret LaPlante, Feb 06 '14 at 17:28
One last thought, the lazyload feature of owlcarousel works great and cuts down on load time as images are not loaded until visible. — Barret LaPlante, Feb 06 '14 at 17:32

80PoundsOfFury · Accepted Answer · 2014-02-10T17:01:31.073

0

There are a couple of errors in your code that are causing the script not to work:

all of your referneces to the "pre" Array are incorrect. Not pre[1]... pre[i]
Your ternary operator at the end of the function was incorrectly written
Also consider using "Chaining" of JQuery methods to save extra time

these changes are outlined below:

var i=0;

        function loop(){
            var pre = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

            var old = $('.tickr img');

            $('.tickr').prepend('<img src="'+ pre[i]+'"/>');
            $('.tickr img[src="'+pre[i]+'"]').hide().fadeIn(1000);


            old.fadeOut(1000,function(){
                   $(this).remove();
            });


            i = (i == 3) ? 0 : i = i + 1;

         }

setInterval(loop, 2500);

hope this helps.

edited Feb 10 '14 at 17:01

answered Feb 06 '14 at 17:43

80PoundsOfFury

264
2
8

Thanks a lot it works! u can use plugins but learning on ur own is better. what do u mean by the var newi needs to be a JQuery reference... not HTML code. i am learning abt these now and i learnt jquery adds dynamic features but do lang like php,sql,ajax do? also why is it not possible to use for(;;) for infinite loop – user3280530 Feb 08 '14 at 17:26
Sorry about the confusion RE: var newi.. please ignore that. I have edited my response and removed that statement. It is possible to use for loops (and all native javascript functions) alongside/inside Jquery. In this instance though, it' – 80PoundsOfFury Feb 10 '14 at 17:04
s unnecessary because you are using the setInterval() function to "loop" through your images in the pre array. – 80PoundsOfFury Feb 10 '14 at 17:18

Html and JQuery: How to create slideshow of images or text?

2 Answers2