`
aijuans
  • 浏览: 1547740 次
社区版块
存档分类
最新评论

手机网站的图片轮换教程

 
阅读更多

这里我们是采用SlipJs来实现的，比起自己从零开始，方便许多而且完美无BUG

slipjs官网:http://www.slipjs.com/

1、先看效果截图：

2、在线演示 http://www.slipjs.com/demo/img.html （手机访问）

3、知道你懒得在手机浏览器输入这么长的地址，你可以用UC浏览器或者QQ浏览器扫描二维码：

4、先来写HTML和CSS代码：

 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>SlipJs演示</title>
    <link rel="stylesheet" href=""/>
    <style type="text/css">
        *{
            padding:0px;
            margin:0px;
        }
        body{
            background-color:#cbd2d8; 
        }
        ul,li{
            list-style-type: none;            
        }
        header{
            width: 100%;
            height: 40px;
            background: -webkit-gradient(linear,left top,left bottom,from(#6f85a2),to(#6f85a2));
            text-shadow: 1px 1px rgba(0, 0, 0, .2);
            line-height: 40px;
            text-align: center;
            color: #F3F3F3;
            font-size: 19px;
            font-weight: bold;
            font-family: helvetica;
        }
        #change_screen_div{
            position:relative;
            width:320px;
            height:188px;
            overflow:hidden;
            margin:auto;
            border-top: 1px solid #3b3e41;
        }
        #change_screen_ul{
            width:960px;
            height:100%;
            position: absolute;
        }
        #change_screen_ul img{
            width:320px;
            display:block;
            height:100%;
        }
        #change_screen_ul li{
            float:left;
        }
        .slider_status{
            width:320px;
            height:3px;
            background-color: rgba(51, 51, 51, 0.5);
            position:absolute;
            bottom:0px;
        }
        #slider_status_span{
            display:block;
            width:107px;
            height:100%;
            background-color:#7a0103;
            -webkit-transition: 300ms;
        }
        .note{
            color:#4c566c;
            text-shadow: 1px 1px white;
            text-align:center;
            width:80%;
            margin:10px auto 20px; auto;
            font-size:15px;
        }
    </style>
</head>
<body>
<header>触控图片轮换</header>
<div>
<div id="change_screen_div">
    <ul id="change_screen_ul">
         <li><img src="http://www.slipjs.com/demo/img/change01.jpg"></li>
         <li><img src="http://www.slipjs.com/demo/img/change02.jpg"></li>
         <li><img src="http://www.slipjs.com/demo/img/change03.jpg"></li>
    </ul>
    <div class="slider_status">
        <span id="slider_status_span"></span>
    </div>
</div>
<div class="note">使用 SlipJs 只需几行简单的代码就可以实现如此精致完美的效果。</div>
</div>

</body>

 

5、然后是js代码：

<script src="http://www.slipjs.com/3.0.1/ai.js" type="text/javascript"></script>
<script src="http://www.slipjs.com/3.0.1/slip-min.js" type="text/javascript"></script>
<script>
// 你可能会看到ai.js这个javascript文件，这个文件和slip.js无任何依赖关系，ai.js只是一些常用的函数如：ai.i，这些函数也有非常详细的注释。
document.addEventListener('DOMContentLoaded', function(){
    
    ai.hideUrl();
    var change_screen_ul = ai.i("change_screen_ul"),
        slip_status_span = ai.i("slider_status_span");
     
    function changeScreenEndFun() {
        slip_status_span.style['webkitTransform'] = 'translateX('+this.page * 320/3+'px) translateZ(0)';    
    }
    
    //核心代码
    slip('page',change_screen_ul,{
    change_time: 5000,
            num: 3,
         endFun: changeScreenEndFun,
       infinite: true
    });
    //核心代码
     
}, false);
</script>

 

6、为了方便演示我们把代码合并在一个页面中，就变成这样了：

点击 + 展开代码 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>SlipJs演示</title>
    <link rel="stylesheet" href=""/>
    <style type="text/css">
        *{
            padding:0px;
            margin:0px;
        }
        body{
            background-color:#cbd2d8; 
        }
        ul,li{
            list-style-type: none;            
        }
        header{
            width: 100%;
            height: 40px;
            background: -webkit-gradient(linear,left top,left bottom,from(#6f85a2),to(#6f85a2));
            text-shadow: 1px 1px rgba(0, 0, 0, .2);
            line-height: 40px;
            text-align: center;
            color: #F3F3F3;
            font-size: 19px;
            font-weight: bold;
            font-family: helvetica;
        }
        #change_screen_div{
            position:relative;
            width:320px;
            height:188px;
            overflow:hidden;
            margin:auto;
            border-top: 1px solid #3b3e41;
        }
        #change_screen_ul{
            width:960px;
            height:100%;
            position: absolute;
        }
        #change_screen_ul img{
            width:320px;
            display:block;
            height:100%;
        }
        #change_screen_ul li{
            float:left;
        }
        .slider_status{
            width:320px;
            height:3px;
            background-color: rgba(51, 51, 51, 0.5);
            position:absolute;
            bottom:0px;
        }
        #slider_status_span{
            display:block;
            width:107px;
            height:100%;
            background-color:#7a0103;
            -webkit-transition: 300ms;
        }
        .note{
            color:#4c566c;
            text-shadow: 1px 1px white;
            text-align:center;
            width:80%;
            margin:10px auto 20px; auto;
            font-size:15px;
        }
    </style>
</head>
<body>
<header>触控图片轮换</header>
<div>
<div id="change_screen_div">
    <ul id="change_screen_ul">
         <li><img src="http://www.slipjs.com/demo/img/change01.jpg"></li>
         <li><img src="http://www.slipjs.com/demo/img/change02.jpg"></li>
         <li><img src="http://www.slipjs.com/demo/img/change03.jpg"></li>
    </ul>
    <div class="slider_status">
        <span id="slider_status_span"></span>
    </div>
</div>
<div class="note">使用 SlipJs 只需几行简单的代码就可以实现如此精致完美的效果。</div>
</div>

</body>
<script src="http://www.slipjs.com/3.0.1/ai.js" type="text/javascript"></script>
<script src="http://www.slipjs.com/3.0.1/slip-min.js" type="text/javascript"></script>
<script>
// 你可能会看到ai.js这个javascript文件，这个文件和slip.js无任何依赖关系，ai.js只是一些常用的函数如：ai.i，这些函数也有非常详细的注释。
document.addEventListener('DOMContentLoaded', function(){
    
    ai.hideUrl();
    var change_screen_ul = ai.i("change_screen_ul"),
        slip_status_span = ai.i("slider_status_span");
     
    function changeScreenEndFun() {
        slip_status_span.style['webkitTransform'] = 'translateX('+this.page * 320/3+'px) translateZ(0)';    
    }
    
    //核心代码
    slip('page',change_screen_ul,{
    change_time: 5000,
            num: 3,
         endFun: changeScreenEndFun,
       infinite: true
    });
    //核心代码
     
}, false);
</script>
</html>

7、完成，现在你就可以再手机上运行一下了，几张图片都是大美女吧。

 

 

1
顶
4
踩
分享到：
| JS构造函数的重载和工厂方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics