2. 程式人生 > >移動端的圖片輪播

移動端的圖片輪播

阿新 • • 發佈：2019-01-19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .container{width: 100%;position: relative;overflow: hidden;}
        .innercontainer{
            position: relative;
            width: 800%;
            left: 0;
            right: 0;
        }
        .wraperimg{
            width: 500px;
            float: left;
        }
        .pagination{
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }
        .pagination span{
            display: inline-block;
            width: 5px;
            height: 5px;
            background: salmon;
            line-height: 5px;
            border-radius: 100%;
            margin-right: 5px;
        }
        .pagination .active{
            background: aqua;
            color: white;
        }
        img{
            width: 100%;
        }
    </style>
    <body>
        <div class="container">
            <div class="innercontainer">
                <div class="wraperimg">
                    <img src="img/1106628.jpg"/>
                </div>
                <div class="wraperimg">
                    <img src="img/1106914.jpg"/>
                </div>
                <div class="wraperimg">
                    <img src="img/1111588.jpg"/>
                </div>
                <div class="wraperimg">
                    <img src="img/1113230.jpg"/>
                </div>
                <div class="wraperimg">
                    <img src="img/1154570.jpg"/>
                </div>
                <div class="wraperimg">
                    <img src="img/1106628.jpg"/>
                </div>
            </div>
            <div class="pagination">
                <!--<span class="active"></span>-->
            </div>
        </div>
    </body>
    <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //螢幕寬度
        var viewWidth = $(window).width();
        $('.wraperimg').css('width',viewWidth);
        //插入小店
        var imglenght = $('img').length;
        var newspan;
        for(var i=0;i<imglenght-1;i++){
            if(i==0){
                newspan = $('<span class="active"></span>');
                $('.pagination').append(newspan);
            }else{
                newspan = $('<span></span>');
                $('.pagination').append(newspan);
            }
        }
        //移動端
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        }
        if(browser.versions.mobile||browser.versions.android||browser.versions.ios){
            $('body').on('touchstart','.container',function(e){
                var touch = e.originalEvent;
                var startX = touch.changedTouches[0].pageX;
                $('.container').on('touchmove',function(e){
                    e.preventDefault();
                    touch = e.originalEvent.touches[0]||e.originalEvent.changedtouches[0];
                    if(touch.pageX-startX>10){
                        $('.container').off('touchmove');
                        flag = false;
                        clearInterval(timer);
                        if (_index == 0) {
                            _index = innercontainerGroup.length - 1;
                            $(".innercontainer").css("left", -(innercontainerGroup.length - 1) * imgWidth);
                        }
                        _index--;
                        selectPic(_index);
                    }else if(touch.pageX-startX<-10){
                        $('.container').off('touchmove');
                        flag = false;
                        clearInterval(timer);
                        _index++;
                        selectPic(_index);
                    }
                })
                return false;
//                alert(touch)
            }).on('touchend',function(){
                $('.container').off('touchmove');
                timer = setInterval(go, 3000);
            });
        }
        //輪播
        var innercontainerGroup = $('.wraperimg');
        var spanGroup = $('.pagination span');
        var imgWidth = $('.wraperimg img:first-child').eq(0).width();
        var _index = 0;
        var timer = null;
        var flag = true;
        function autogo(bol){
            if(bol){
                timer  = setInterval(go,3000);
            }
        }
        autogo(flag);
        function go(){
            _index++;
            selectPic(_index);
        }
        function selectPic(num){
            $('.pagination span').eq(num).addClass('active').siblings().removeClass('active');
            $('.innercontainer').animate({
                left:-num*imgWidth,
            },1000,function(){
                if(_index == innercontainerGroup.length-1){
                    _index=0;
                    $('.innercontainer').css('left','0px');
                    $('.pagination span').eq(0).addClass('active').siblings().removeClass('active');
                }
            })
        }
        
    </script>

</html>

相關推薦

zepto.min.js的使用 移動端的輪播圖

1.Zepto是一個輕量級的針對現代高階瀏覽器的JavaScript庫， 它與jquery有著類似的api。 如果你會用jquery，那麼你也會用zepto。 相關連結: http://www.css88.com/doc/zeptojs_api/ 2.首先引入

原生JS相容移動端的輪播圖

關於輪播圖 : 原生JS 相容IE9+等各大瀏覽器 相容移動端 自適應（根據圖片原比例） 左右箭頭切換 點選索引切換 移動端滑動切換 只需修改圖片路徑 <!DOCTYPE html> <html lang="

原生 js 實現移動端 Touch 輪播圖

小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。 Touch 輪播圖 touch輪播圖其實就是通過手指的滑動，來左右切換輪播圖，下面我們通過一個

JavaScript實戰項目：移動端 Touch 輪播圖

erp 區域 c89 清除 準備工作 定時器 cdb touchend ctype Touch 輪播圖 touch輪播圖其實就是通過手指的滑動，來左右切換輪播圖，下面我們通過一個案例，來實現下。 1. html 結構 結構上，還是用ul、li來存放輪播圖片，ol、li來存放

移動端的圖片輪播

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title></title>     </hea

HTML5移動端觸控式螢幕圖片輪播滑動

//zepto對移動端滑動擴充套件 ;(function($){ var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750,

H5如何做手機app(移動Web App)?圖片輪播？

tom 選擇 lan pre 自帶 ide pull oat css3 移動Web App 跨平臺開發 用戶不需要去賣場來下載安裝App 任何時候都可以發布App只需要一個開發項目 可以使用HTML5,CSS3以及JavaScript以及服務器端語言來完成（PHP,Ruby

Jsoup開發網站客戶端第二篇，圖片輪播，ScrollView相容ListView

最近一段日子忙的焦頭爛額，程式碼重構，新專案編碼，導致jsoup開發網站客戶端也沒時間繼續下去，只能利用晚上時間去研究了。今天實現美食網首頁圖片輪播效果，網站效果圖跟Android客戶端實現如圖： 從瀏覽器開發者模式可以看到這個輪播圖片效果的圖片地址以及html連線 用節點解析出包含圖片url

圖片輪播,自動移動小圖

isl ceil pac undefine string 固定 nod tel obj <template> <div class="imgCarouselWrap" ref="imgCarouselWrap" :style="{height: heig

iOS開發項目實戰——Swift實現圖片輪播與瀏覽

0.10 上網 timer類 開發項目 cas hub string obj tle 近期開始開發一個新的iOS應用，自己決定使用Swift。進行了幾天之後，發現了一個非常嚴峻的問題。那就是無論是書籍，還是網絡資源，關於Swift的實在是太少了，隨便一

圖片輪播

切換 .get -c doctype onload left mouseover .class hidden <!DOCTYPE html> <html lang="en"> <head> &

移動端圖片壓縮上傳解決方案

長度 繪制圖片 slice ase 但是 choose 100萬 lis 計算 最近做移動端圖片上傳，發現圖片尤其是iPhone拍照的圖片都有2M左右，但是實際上項目中用不到這麽大，於是想到要用js在前臺進行壓縮。 解決方案如下： 　【一】獲取圖片數據 　　先是獲取圖片數據

圖片輪播插件slideBox.js

輪播插件 mouseover mat err imei time settime ttr mba 文檔說明地址：http://www.jq22.com/jquery-info385 原來的插件當只有一個圖片的時候有BUG，修改好了，以下為源碼 (function($) {

圖片輪播的手寫代碼

ava absolut 利用 one abs asc src num 輪播 之前有人問過我關於圖片輪播的代碼怎麽寫，盡管我是專註於後臺的，但學習一些後臺的僅僅是還是比較有優點的，我有時候總是把簡單的問題復雜化，其原因還是自己對於知識點的掌握不夠堅固，導致不可以在實踐中充

面向對象編程---圖片輪播

lin 好的 order jquer utf-8 use logs num move 今天復習了一下面向對象編程，下面是我的效果圖 看著這個圖片你會覺得這沒有什麽，那麽上代碼： html部分： 1 <!DOCTYPE html> 2 <

javascript圖片輪播

tel ++ 播放 ont idt images sna -a 取圖 圖片輪播源代碼 復制可用 <!doctype html><html lang="en"><head> <meta charset="UTF-8">

實現廣告圖片輪播效果-AndroidImageSild

left anim wpa img listener pri des indicator ext 在AS中的使用： 1.在build文件中進行配置 compile ‘com.squareup.picasso:picasso:2.3.2‘ comp

JS實例之圖片輪播，實現圖片播放效果

utf length pla get eight code func nsh java 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

js圖片輪播與索引變色

shu gin 標題 solid ansi name 素材 ++ 切換 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

js 圖片輪播

bootstra 輪播 ngx htm 圖片輪播 bootstrap article -c ecc http://jingyan.baidu.com/article/e3c78d646afd933c4c85f5ac.html（測試過） http://sc.chinaz.co