HTML輪播圖實現(前后端分離)


1,首先前后端分離用到了3個插件

2,異步請求后端獲取數據庫圖片地址(圖片名字)

//圖片輪播
        axios({
            url:'http://127.0.0.1:8000/userctrl/image',
            method:'get',
            responseType:"json",
        })
    
        .then(function(obj){
            let list = obj.data
            for(var i=0;i<list.length;i++){
                $("#tuu"+[i]).attr('src','http://127.0.0.1:8000/upload/'+list[i]['fields']['img'])
            }
        })        

**后端過程略過

3,模板渲染部分

<ul class="slide" >
        <li><a><img src="" id="tuu0"></a></li>
        <li><a><img src="" id="tuu1"></a></li>
        <li><a><img src="" id="tuu2"></a></li>
        <li><a><img src="" id="tuu3"></a></li>
      
        </ul>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM