js手寫，全屏輪播（支援左右切換）

不說話直接貼碼

html

<div class="public-conten-view" id="lunbo">

                <ul>

                    <li data-id='0'><img src="images/bg1.png" alt="1"></li>

                    <li data-id='1'><img src="images/bg1.png" alt="2"></li>

                    <li data-id='2'><img src="images/bg1.png" alt="3"></li>

                    <li data-id='3'><img src="images/bg1.png" alt="4"></li>

                </ul>

                <div class="public-conten-view-raduis">

                    <div class="view-raduis active" data-id='0'></div>

                    <div class="view-raduis" data-id='1'></div>

                    <div class="view-raduis" data-id='2'></div>

                    <div class="view-raduis" data-id='3'></div>

                </div>

                <div>

                    <div class="public-conten-view-left"  id="lunbo_left"></div>

                    <div class="public-conten-view-right" id="lunbo_right"></div>

                </div>

                <!--vidoe可無可有-->

                <div class="public-conten-view-vidoe">

                    <video src="movie.ogg" controls="controls">

                    </vidoe>

                </div>

            </div>

js:

$(function(){

//輪播開始

            var width=$('#lunbo').width();

            var num=$('#lunbo').find('li').length;

            $('#lunbo').find('ul').css('width',width*num);

            $('#lunbo').find('li').css({'width':width,'float':'left'});

            $('#lunbo_left').click(function(){

                    clearInterval(times);

                    clearInterval(time);

                    lbload(-1,1);

            })

            $('#lunbo_right').click(function(){

                    clearInterval(times);

                    clearInterval(time);

                    lbload(1,1);

            })

            //

            var num=0; 

            var times;

            var time;

            var size;

            //自動加載

            function lbload(type,nums){

                if(type<0){

                    for(var i=0;i<nums+1;i++){                  $('#lunbo').find('ul').eq(0).prepend($('#lunbo').find('ul').eq(0).find('li').eq($('#lunbo').find('ul').eq(0).find('li').length-1).clone(true));

                     //清除第一個

                    $('#lunbo').find('ul').eq(0).find('li').eq($('#lunbo').find('ul').eq(0).find('li').length-1).remove();

                    }

                    load_size=-width/100;

                    var size=width*nums;

//                    return false;

                }else{

                     for(var i=0;i<nums-1;i++){

                    $('#lunbo').find('ul').eq(0).append($('#lunbo').find('ul').eq(0).find('li').eq(0).clone(true));

                            //清除第一個

                            $('#lunbo').find('ul').eq(0).find('li').eq(0).remove();

                    }

                    load_size=width/100;

                    var size=0;

                }

                times = setInterval(function(){

                        size+=load_size;

                        $('#lunbo').find('ul').eq(0).css('margin-left',-size+'px');

                        if(Math.round(size%width)==0){

                               //複制

                            $('#lunbo').find('ul').eq(0).append($('#lunbo').find('ul').eq(0).find('li').eq(num).clone(true));

                            //清除第一個

                            $('#lunbo').find('ul').eq(0).find('li').eq(num).remove();

                            //清除margin-left

                             $('#lunbo').find('ul').eq(0).css('margin-left','0px'); 

                           var numss=$('#lunbo').find('ul').eq(0).find('li').eq(0).attr('data-id');

                            $('.view-raduis').siblings().removeClass('active');

                            $('.view-raduis').eq(numss).addClass('active'); 

                           clearInterval(times);

                           time=setTimeout(lbload,2000);

                        }

                    },10);

            }

           lbload(0);

            //小點點觸發事件

            $('.view-raduis').each(function(){

                $(this).click(function(){

                    var num=$('.active').attr('data-id');

                    var nums=$(this).attr('data-id');

                    if(nums-num<0){

                        clearInterval(times);

                        clearInterval(time);

                        lbload(-1,num-nums);

                    }else if(nums-num>0){

                        clearInterval(times);

                        clearInterval(time);

                        lbload(1,nums-num);

                    }else{

                        return false;

                    }

                })

            })

})

js位址：

http://static.prient.top/qiehuan/js/whr_lunbo.js

網頁預覽位址：

http://static.prient.top/qiehuan/index.htm