手机网站的图片轮换教程

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量161 收藏
点赞数
文章标签： javascript ViewUI

这里我们是采用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、完成，现在你就可以再手机上运行一下了，几张图片都是大美女吧。

 

 

iteye_3829
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
适合手机的图片轮播图
Wayne's Blog
05-27 7035
最近要用到手机上的图片轮播图，在网上找了一些代码，发现都是写死的宽高，在手机上没法自适应，实在找烦了，就自己动手写了一段脚本，当时是依赖我们强大的jquery的，目前在手动干预滚动后，自动滚动会停止。下面是代码： body{margin:0;padding:0;} .wrapper{ position:relative; width:100%; height:1px; b
各种手机轮换图片，
03-26
简单的手机轮换效果，方便实用，简单的手机轮换效果，方便实用简单的手机轮换效果，方便实用
HTML5手机端图片切换（相册版）
quweiie的专栏
09-28 5844
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt; &lt;title&a
html实现手机端轮播图,swiper移动端轮播图简单实现
weixin_39855568的博客
06-17 997
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">html, body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Ne...
jquery 手机 图片切换 例子 网址
weixin_30379911的博客
01-18 55
http://m.swdhy.com/page/ShowCompany.aspx?cid=388481&name=山东潍坊金城服装有限公司 转载于:https://www.cnblogs.com/zhwl/p/3524950.html
CSDN轮换广告图片轮换效果
10-30
CSDN轮换广告图片轮换效果
Jquery 实现图片轮换
10-24
主要介绍了Jquery 实现图片轮换,虽然还有点小问题，但是影响不大，还是推荐给大家，需要的朋友可以参考下
DHTML Slide Showscript图片轮换
09-06
DHTML Slide Showscript图片轮换
javascript 图片轮换显示效果代码
10-29
图片轮换显示效果,学习js的朋友可以参考下。
手机端网页上下手指滑动图片切换效果代码
07-17
手机端网页上下手指滑动图片切换效果代码!
移动端手机轮换图html5
08-04
不多说，真心好用，图片是填充满整个demo的，特别适合用于安卓、苹果用html5作业面嵌入到app中，手指左右切换轮换图
js微信号和二维码轮播
越努力越幸运
11-29 3825
<script type="text/javascript"> var arr_wx=["a","b","c"]; var wx_index = Math.floor(Math.random()*arr_wx.length); var stxlwx= arr_wx[wx_index]; var img = arr_wx[wx_index]+".jpg"; var wx_img = ...
RadioGroup布局,无限轮播，二维码扫描
etoufa的博客
10-13 552
//图片需要从drawable中获取 xml version="1.0" encoding="utf-8"?> selector xmlns:android="http://schemas.android.com/apk/res/android"> item android:drawable="@mipmap/shouye" android:state_checked="false"
iOS 替换WebView网页图片为本地图片
卡尔特斯
10-12 1042
UIWebView WKWebView 都可以适用。 // MARK: UIWebViewDelegate func webViewDidFinishLoad(_ webView: UIWebView) { // 本地图片二进制 let imegData:Data = UIImagePNGRepresentation(CW_PI_KTT_420_220_BG!)! // 转换 let imageSource:String = String.init(format
手机端图片滑动切换效果
weixin_30622107的博客
05-16 441
最近公司要求开发wap版本页面，碰到了个图片滑动切换效果，折腾了半天，自己封装了一个比较通用的小控件，在此分享一下。 大概功能：可以自定义是否自动切换，支持单手滑动图片进行切换，支持左右滑动切换、循环切换等等，具体可以拿demo代码自己本地试试，注意只支持手机端哦 大概思路：通过touchstart、touchmove、touchend 三个事件加上css3的3d变化效果配合，实现滑动切换图片...
Android webView 加载网页时，使用本地图片替换网页内的图片
weixin_30750335的博客
09-30 341
====================问题描述==================== RT，本质目的是阻止网页图片加载,将图片放在本地，然后在app中替换，以加快反应速度。以前提过这个问题，没能解决，因为3.0以上才提供了替换网页资源的接口（WebResourceResponse），3.0以下没有专门的接口，想过使用get将网页...
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 224
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
html背景图片轮换
07-28
然后，将需要轮换的图片存储到一个数组中，这样可以更方便地进行遍历来实现图片的播放。最后，可以通过改变背景的链接来切换图片地址，不需要使用JavaScript添加动画效果，这样更加简单。\[1\] 引用\[2\]:在HTML的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值