前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js实现底部带圆点的左右滑动效果

js实现底部带圆点的左右滑动效果

作者头像
OECOM
发布2020-07-01 17:55:03
7.9K0
发布2020-07-01 17:55:03
举报
文章被收录于专栏:OECOM

2015-04-17 10:42:04

在一些商品展示和微信开发中经常会用到图片的展示和页面的滑动效果,前面我介绍了一种手机端上下滑动效果,今天我来给大家介绍一种手机端左右滑动并且底部有圆点,实心的圆点随着图片的变化而移动。来看看代码吧

代码语言:javascript
复制
<!DOCTYPE html>
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title> 落帆亭实现的图片左右滑动底部带圆点 </title>  
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="luofanting.com.cn">  
<meta name="keywords" content="落帆亭">  
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">  
</head>  
<style>  
.swipe {  
    overflow: hidden;  
    visibility: hidden;  
    position: relative;  
}  
.swipe-wrap {  
    overflow: hidden;  
    position: relative;  
}  
.swipe-wrap > figure {  
    float: left;  
    width: 100%;  
    position: relative;  
}  
#slider {  
    max-width: 650px;/* 设置最大的宽度 */  
    margin: 0px auto; /* 居中对齐 */  
}  
  
figure {  
    margin: 0;/* 对齐,四周宽度都为0,在轮播的时候,以整张图片进行移动 */  
}  
div.swipe {  
    border: 1px solid blue;  
}  
.page-swipe nav #position {  
    text-align: center;  
    list-style: none;  
    margin: 0;  
    padding: 0  
}  
.page-swipe nav #position li {  
    display: inline-block;  
    width: 10px;  
    height: 10px;  
    border-radius: 10px;  
    background: #141414;  
    box-shadow: inset 0 1px 3px black,0 0 1px 1px #202020;  
    margin: 0 2px;  
    cursor: pointer  
}  
.page-swipe nav #position li.on {  
    box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);  
    background-color: #1293dc;  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));  
    background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);  
    background-image: -moz-linear-gradient(top,#1293dc,#0f6297);  
    background-image: -ms-linear-gradient(top,#1293dc,#0f6297);  
    background-image: -o-linear-gradient(top,#1293dc,#0f6297);  
    background-image: linear-gradient(top,#1293dc,#0f6297)  
}  
</style>  
<body class="page-swipe">  
<div id="slider" class="swipe" style="visibility:visible;">  
    <div class="swipe-wrap">  
        <figure>  
            <div class="face faceInner">  
                <img src="img/explorations1.JPG" width="100%" height="100%" />  
            </div>  
        </figure>  
        <figure>  
            <div class="face faceInner">  
                <img src="img/explorations2.JPG" width="100%" height="100%" />  
            </div>  
        </figure>  
        <figure>  
            <div class="face faceInner">  
                <img src="img/explorations3.JPG" width="100%" height="100%" />  
            </div>  
        </figure>  
    </div>  
</div>  
  
<nav>  
<ul id="position">  
  <li class="on"></li>  
  <li class=""></li>  
  <li class=""></li>  
</ul>  
</nav>  
  
<script src="js/swipe.js"></script>  
<script>  
var slider =  
  Swipe(document.getElementById('slider'), {  
    auto: 3000,  
    continuous: true,  
    callback: function(pos) {  
        var i = bullets.length;  
        while(i--){  
            bullets[i].className = ' ';  
        }  
        bullets[pos].className = 'on';  
    }  
  });  
var bullets = document.getElementById('position').getElementsByTagName('li');  
</script>  
</body>  
</html>

代码中用到了一个swipe.js的文件,本站提供下载链接,需要的朋友可以下载。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-04-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档