文档章节

第一次自己写的轮播效果

CAN-DO
 CAN-DO
发布于 2014/11/13 15:12
字数 420
阅读 785
收藏 8

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>轮播图带遮罩层</title>

    <style type="text/css">

           html,body,ul,li{ width: 100%;min-width: 1000px;margin: 0;padding: 0;}

            ul,li,ol{ list-style:none;}

              /*---轮播效果---*/

            .slide-oute {position: relative;width: 100%;height: 378px;background-color: #fff; overflow: hidden;}

            .scroll { width: 1000px;height: 378px;margin: auto;position:relative ; background-color: #f5f5f9;}

            .scroll ul {height: 100%; position:absolute;left:0;top:0;}

            .scroll li {  width: 1000px; float: left;overflow: hidden;}

            .scroll li img {float: left; width: 100%;}

                /*遮罩层效果*/

            .mask {width:100%;height:378px;position: absolute;top: 0;}

            .mask-left{height:100%;position: absolute;left:0;right:50%;margin-right:500px; background-color: rgba(31,26,26, 0.25 )}

            .mask-cont{width:1000px;height:100%;position: absolute;left: 50%;margin-left: -500px}

            .mask-right{height:100%;position: absolute;left:50%;right:0;margin-left:500px;background-color: rgba(31,26,26, 0.25 )}

                /*-轮播效果结束-*/

    </style>

</head>

<body>

<!--轮播开始-->

<div class="slide-oute">

    <div class="scroll">

        <ul>

            <li><img src="images/banner1.jpg" alt=""/></li>

            <li><img src="images/banner2.jpg" alt=""/></li>

            <li><img src="images/banner3.jpg" alt=""/></li>

            <li><img src="images/banner4.jpg" alt=""/></li>

        </ul>

    </div>

    <div class="mask" style="">

        <div class="mask-left"></div>

        <div class="mask-cont"></div>

        <div class="mask-right"></div>

    </div>

</div>

<!--轮播结束-->

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

    $(function(){

        slide();

    });

    /*轮播图*/

    function slide(){

        var  oDiv= $('.mask'),                              //最外层div

                oUl= $('.scroll ul'),                          //中间层ul

                oLi= $('.scroll ul li'),                       //每一个板块li

                speed=-1000,                                     //每次移动距离

                time = 2000;                                     //动画时间

        //复制两份ul里面的内容到ul中,为的是实现无缝

        oLi.clone(true).appendTo(oUl);

        var  oli = oUl.children("li"),

                Length = oli.length ,                         //li标签个数

                oUlwidth = oli.eq(0).width()*Length+'px';     //ul的总宽aaaa度

        //计算新的ul的长度

        oUl.css("width",oUlwidth);

        //设置速度

        function move(){

            //向左移动

            if(oUl[0].offsetLeft<=-oUl[0].offsetWidth/2){

                oUl[0].style.left='0';

            }

            //设置ul的left值

            oUl[0].style.left=oUl[0].offsetLeft+speed+'px';      //每次增加移动距离

        }

        var timer=setInterval(move,time);

        //左右按钮控制效果

        oDiv.hover(function(){

            clearInterval(timer);

        },function(){

            clearInterval(timer);

            timer=setInterval(move,time);

        });

    }

</script>

</body>

</html>


© 著作权归作者所有

CAN-DO
粉丝 19
博文 14
码字总数 420
作品 0
成都
私信 提问
教你如何用 RecyclerView 做一个好用的轮播图

引子 一般情况下,我们手机 App 上轮播图一般都是几张图来回循环,最多也就10几张,一般都是在10张以内的轮播。所以我们一般可能都是自己写,还有可能用到了别人写的第三方库。由此可能由于图...

涩郎
2017/03/03
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年1991
2017/11/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/20
0
0
封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放。本篇文章的主要目的是分享封装插件的思路。 轮播图的我一开始是写成非插件形式实现的效...

daisy,gogogo
2018/08/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部