微信

App轮播图 

<!doctype html>
<html>

<head>

    <meta charset="utf-8">
    
    <title>手机轮播图</title>
    
    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>
    
    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>
    
    <!-- 轮播图js -->
        
    <script type="text/javascript" src="https://files.cnblogs.com/xinlinux/iscroll.js"></script>
    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    

    
</head>

<script type="text/javascript">
    var myScroll;
    function loaded() {
        myScroll = new iScroll('wrapper', {
            snap: true,
            momentum: false,
            hScrollbar: false,
            onScrollEnd: function() {
                document.querySelector('#indicator > li.active').className = '';
                document.querySelector('#indicator > li:nth-child(' + (this.currPageX + 1) + ')').className = 'active';
            }
        });
    }
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

<!-- 轮播图样式 -->

<style>
    
    body{margin:0px;}
    
    header{text-align:center;   position:relative;      overflow:hidden;}
    
    ul{ margin:0px; padding:0px;list-style: none;}
    
    #nav{ position:absolute; width:100%; height:20px; line-height:20px;   bottom:0px;}
    
    #nav{ float:left; margin-right:5%; opacity:1;} 
    
    #nav ul li{ float:left; background:#fff; border-radius:10px; width:10px; height:10px; margin-left:10px; margin-top:5px; opacity:0.5;}
    
    #nav ul li.active{ background:#fff;opacity:1;}
    
    .banner img{width:100%;}
    
    .banner ul li{ float:left;}

</style>

<body>
    <div class="row-fluid">

        <header>
        
            <div class="banner">

                <div id="wrapper" style="overflow: hidden; ">

                    <div id="scroller">

                        <ul id="thelist">

                            <li>

                                <a href="#"><img src="images/1.jpg" /></a>

                            </li>


                            <li>

                            <a href="#"><img src="images/2.jpg" /></a>

                            </li>  
                            
                            <li>
                            
                                <a href="#"><img src="images/3.jpg" /></a>
                            
                            </li> 
                            
                        </ul>
                        
                    </div>
                    
                </div>
                
            </div>
            
            <div id="nav">
            
                <div id="prev" onclick="javascript:myScroll.scrollToPage('prev', 0);"></div>
                
                <ul id="indicator">
                
                    <li class="active"></li>
                    
                    <li ></li>      
                    
                    <li ></li>  
                    
                </ul>
                
                <div id="next" onclick="javascript:myScroll.scrollToPage('next', 0, 400, 2);"></div>
                
            </div>
            
            <div class="clr"></div>
            
        </header>

    </div>
    
    
    

    <script>
        var count = document.getElementById("thelist").getElementsByTagName("img").length;
        for (i = 0; i < count; i++) {
            document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";
        }
        document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px";
        setInterval(function() {
            myScroll.scrollToPage('next', 0, 400, count);
        }, 3500);
        window.onresize = function() {
            for (i = 0; i < count; i++) {
                document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";
            }
            document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px";
        };
    </script>
        
        

    


</body>
</html>

 

posted @ 2014-10-22 11:59  Admin_info  阅读(714)  评论(0)  编辑  收藏  举报
青春时代是一个短暂的美梦，当你醒来时，这早已消失得无影无踪了。
点点Admin_info