search

Home >Web Front-end >JS Tutorial >js picture carousel (5 pictures)

js picture carousel (5 pictures)

高洛峰
高洛峰Original
2017-01-12 10:43:371735browse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title>pic player</title> 
        <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script> 
        <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script> 
    </head> 
    <style type="text/css"> 
    img{border:0;} 
    </style> 
    <body> 
        <div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;"> 
            there is a pic-player 
        </div> 
        <script> 
            var p = $(&#39;#picplayer&#39;); 
            var pics1 = [{url:&#39;http://img.jb51.net/online/picPlayer/1.jpg&#39;,link:&#39;http://www.jb51.net/#&#39;,time:5000},{url:&#39;http://img.jb51.net/online/picPlayer/2.jpg&#39;,link:&#39;http://www.jb51.net/#&#39;,time:4000},{url:&#39;http://img.jb51.net/online/picPlayer/3.jpg&#39;,link:&#39;http://www.jb51.net&#39;,time:6000},{url:&#39;http://img.jb51.net/online/picPlayer/2.jpg&#39;,link:&#39;http://www.jb51.net&#39;,time:6000},{url:&#39;http://img.jb51.net/online/picPlayer/1.jpg&#39;,link:&#39;http://www.jb51.net&#39;,time:6000}]; 
            initPicPlayer(pics1,p.css(&#39;width&#39;).split(&#39;px&#39;)[0],p.css(&#39;height&#39;).split(&#39;px&#39;)[0]); 
            // 
            // 
            function initPicPlayer(pics,w,h) 
            { 
                //选中的图片 
                var selectedItem; 
                //选中的按钮 
                var selectedBtn; 
                //自动播放的id 
                var playID; 
                //选中图片的索引 
                var selectedIndex; 
                //容器 
                var p = $(&#39;#picplayer&#39;); 
                p.text(&#39;&#39;); 
                p.append(&#39;<div id="piccontent"></div>&#39;); 
                var c = $(&#39;#piccontent&#39;); 
                for(var i=0;i<pics.length;i++) 
                { 
                    //添加图片到容器中 
                    c.append(&#39;<a href="&#39;+pics[i].link+&#39;" target="_blank"><img id="picitem&#39;+i+&#39;" style="display: none;z-index:&#39;+i+&#39;" src="&#39;+pics[i].url+&#39;" /></a>&#39;); 
                } 
                //按钮容器，绝对定位在右下角 
                p.append(&#39;<div id="picbtnHolder" style="position:absolute;top:&#39;+(h-25)+&#39;px;width:&#39;+w+&#39;px;height:20px;z-index:10000;"></div>&#39;); 
                // 
                var btnHolder = $(&#39;#picbtnHolder&#39;); 
                btnHolder.append(&#39;<div id="picbtns" style="float:right; padding-right:1px;"></div>&#39;); 
                var btns = $(&#39;#picbtns&#39;); 
                // 
                for(var i=0;i<pics.length;i++) 
                { 
                    //增加图片对应的按钮 
                    btns.append(&#39;<span id="picbtn&#39;+i+&#39;" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> &#39;+(i+1)+&#39; </span> &#39;); 
                    $(&#39;#picbtn&#39;+i).data(&#39;index&#39;,i); 
                    $(&#39;#picbtn&#39;+i).click( 
                        function(event) 
                        { 
                            if(selectedItem.attr(&#39;src&#39;) == $(&#39;#picitem&#39;+$(this).data(&#39;index&#39;)).attr(&#39;src&#39;)) 
                            { 
                                return; 
                            } 
                            setSelectedItem($(this).data(&#39;index&#39;)); 
                        } 
                    ); 
                } 
                btns.append(&#39; &#39;); 
                /// 
                setSelectedItem(0); 
                //显示指定的图片index 
                function setSelectedItem(index) 
                { 
                    selectedIndex = index; 
                    clearInterval(playID); 
                    //alert(index); 
                    if(selectedItem)selectedItem.fadeOut(&#39;fast&#39;); 
                    selectedItem = $(&#39;#picitem&#39;+index); 
                    selectedItem.fadeIn(&#39;slow&#39;); 
                    // 
                    if(selectedBtn) 
                    { 
                        selectedBtn.css(&#39;backgroundColor&#39;,&#39;#eee&#39;); 
                        selectedBtn.css(&#39;color&#39;,&#39;#000&#39;); 
                    } 
                    selectedBtn = $(&#39;#picbtn&#39;+index); 
                    selectedBtn.css(&#39;backgroundColor&#39;,&#39;#000&#39;); 
                    selectedBtn.css(&#39;color&#39;,&#39;#fff&#39;); 
                    //自动播放 
                    playID = setInterval(function() 
                    { 
                        var index = selectedIndex+1; 
                        if(index > pics.length-1)index=0; 
                        setSelectedItem(index); 
                    },pics[index].time); 
                } 
            } 

             

        </script> 

         
    </body> 
</html>

If you want to add pictures, you can add the content behind var pics1. That’s it.

For more js picture carousel (5 pictures) related articles, please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript implements large image carousel effectNext article：JavaScript implements large image carousel effect

Related articles

See more