无缝轮播的案例及css3无缝轮播案例

最新推荐文章于 2023-02-27 15:45:16 发布

weixin_30832143

最新推荐文章于 2023-02-27 15:45:16 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/shangjun6/p/10615133.html

版权

　　无缝轮播的案例：

　　<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>无缝轮播</title>
　　　　<style>
　　　　　　*{
　　　　　　　　margin:0;
　　　　　　　　padding:0;
　　　　　　}
　　　　　　div{
　　　　　　　　width:1000px;
　　　　　　　　height:200px;
　　　　　　　　position:relative;
　　　　　　　　top:20px;
　　　　　　　　left:100px;
　　　　　　　　border:red 5px solid;
　　　　　　　　overflow: hidden;
　　　　　　}
　　　　　　ul{
　　　　　　　　width:2000px;
　　　　　　　　height:200px;
　　　　　　　　list-style: none;
　　　　　　　　position:absolute;
　　　　　　　　top:0;
　　　　　　　　left:-1020px;
　　　　　　}
　　　　　　ul>li{
　　　　　　　　width:200px;
　　　　　　　　height:200px;
　　　　　　　　float:left;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div>
　　　　　　<ul id="ul">
　　　　　　　　<li style="background:pink"></li>
　　　　　　　　<li style="background:blue"></li>
　　　　　　　　<li style="background:orange"></li>
　　　　　　　　<li style="background:black"></li>
　　　　　　　　<li style="background:green"></li>
　　　　　　　　<li style="background:pink"></li>
　　　　　　　　<li style="background:blue"></li>
　　　　　　　　<li style="background:orange"></li>
　　　　　　　　<li style="background:black"></li>
　　　　　　　　<li style="background:green"></li>
　　　　　　</ul>
　　　　</div>
　　</body>
　　</html>
　　<script>
　　　　var ul=document.getElementById("ul")
　　　　var t=null;
　　　　var num=1;
　　　　t=setInterval(function(){
　　　　　　if (ul.offsetLeft<-ul.offsetWidth/2)
　　　　　　　　{
　　　　　　　　ul.style.left=0+"px";
　　　　　　　　}
　　　　　　ul.style.left=(ul.offsetLeft-num)+"px";
　　　　},100/6)
　　</script>

　　无缝轮播的解析：
　　　　1.无论什么时候，ul.offsetleft++ 无论什么时候，他的ul都要走
　　　　2.初始值，设立，直接设到第二板块那里
　　　　3.可以理解成，每次只走第二板块，因为每次需要第二板块去覆盖掉，第一次模块走的东西
　　　　4.造成的视觉错觉

　　css3无缝轮播案例　

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="rem插件.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html{
            font-size:100px;
            overflow-x:hidden;
        }
        body{
            font-size:14px;
        }
        div,ul,li,img{
            margin:0;
            padding:0;
        }
        .box{
            width:100%;
            height:1.17rem;
        }
        .clearfix:after{
            content:"";
            display:block;
            height:0;
            visibility:hidden;
            clear:both;
        }
        .content{
            width:500%;
            height:1.17rem;
        }
        .content div{
            width:20%;
            height:1.17rem;
            float:left;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <div style="background:#cccccc"></div>    <!-- 第三张-->
            <div style="background:#ffb72b"></div>      <!-- 第一张-->
            <div style="background:lightblue"></div>     <!-- 第二张-->
            <div style="background:#cccccc"></div>   <!-- 第三张-->
            <div style="background:#ffb72b"></div>      <!-- 第一张-->
        </div>
    </div>
</body>
</html>
<script>
    var t=null,index=1;
    var box=document.querySelector(".box");
    var wid=box.offsetWidth;
    var content=document.querySelector(".content");
    content.style.transform="translateX(-"+(wid)+"px)";
    t=setInterval(function(){
        index++;
        addtransition()
        content.style.transform="translateX(-"+(wid*index)+"px)";
    },2000)
    //过度函数
    function addtransition(){
        content.style.transition="all .5s linear";
        content.style.webkitTransition="all .5s linear";
    }
    function removetransition(){
        content.style.transition="none";
        content.style.webkitTransition="none";
    }
    content.addEventListener("transitionend",function(){
        if(index>3){
            index=1;
            removetransition()
            content.style.transform="translateX(-"+(wid*index)+"px)";
        }
    })
</script>

转载于:https://www.cnblogs.com/shangjun6/p/10615133.html

weixin_30832143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝轮播的案例及css3无缝轮播案例

　　无缝轮播的案例：　　<!DOCTYPE html>　　<html> 　　<head> 　　　　<meta charset="UTF-8"> 　　　　<title>无缝轮播</title> 　　　　<style> 　　　　　　*{ 　　　　　　　　margin:0; 　　　　　　　　pa...
复制链接

扫一扫