无缝轮播图

Posted 2021-02-13 leslie-cheung1584304774

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝轮播图相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

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

            img {
                display: block;
            }

            #banner {
                width: 800px;
                height: 350px;
                border: 1px solid #ff0;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }

            #bigImg {
                width: 1000%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            #bigImg li{
                float: left;
            }
            #bigImg li img{
                width: 800px;
                height: 350px;
            }
            #smallImg{
                position: absolute;
                width:120px ;
                height: 20px;
                bottom: 20px;
                right: 0;
            }
            #smallImg li{
                float: left;
                width: 20px;
                height: 20px;
                background: #f00;
                margin-right: 10px;
                text-align: center;
                line-height: 20px;
                font-size: 16px;
                cursor: pointer;
            }
            #smallImg li.active{
                background: #ff0;
            }
        </style>
    </head>

    <body>
        <div id="banner">
            <ul class="bigImg" id="bigImg">
                <li><img src="images/001.jpg"></li>
                <li><img src="images/002.jpg"></li>
                <li><img src="images/003.jpg"></li>
                <li><img src="images/004.jpg"></li>
                <li><img src="images/001.jpg"></li>
            </ul>
            <ul class="smallImg" id="smallImg">
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li> 
            </ul>
        </div>
    </body>
</html>
<script src="sport5.js"></script>
<script src="public.js"></script>
<script>
    var timer = null;
    var index = 0;
    var list = $id("smallImg").children;
    var ul = $id("bigImg");
    timer = setInterval(autoPlay,1500);
    function autoPlay(){
        index++;
        for(var i = 0;i < list.length;i++){
            list[i].className = "";
        }
        if(index == 5){
            index = 1;
            ul.style.left = 0;
        }
        list[index == 4 ? 0 : index].className = "active";
        startMove(ul,{left:-index*ul.children[0].offsetWidth});
    }
    for(let i = 0;i < list.length;i++){
        list[i].onmouseover = function(){
            clearInterval(timer);
            index = i - 1;
            autoPlay();
        }
        list[i].onmouseout = function(){
            timer = setInterval(autoPlay,1500);
        }
    }
</script>

public.js文件

//根据给定的id获取页面元素 并返回该元素
function $id(id){
    return document.getElementById(id);
}

//获取任意区间的随机整数   返回随机整数
function rand(min,max){
    return Math.round( Math.random()*(max-min) + min );
}

//定义一个函数 获取随机的颜色值
function getColor(){
    return "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
}

//六位十六进制颜色值
function randColor(){
    var str = "0123456789abcdef";
    // 从这个字符串中随机取出6位 
    var color = "#";
    for( var i = 1 ; i <= 6 ; i++ ){
        color += str.charAt( rand(0,15) );
    }
    return color;
}

//定义一个函数 将日期时间格式转成 字符串
function dateToString(now){
    var y = now.getFullYear();
    var m =toTwo( now.getMonth()+1 );
    var d =toTwo( now.getDate() );        
    var h = toTwo( now.getHours() );
    var mi =toTwo( now.getMinutes() );
    var s = toTwo( now.getSeconds() ) ;
    return y+"-"+m+"-"+d + "  " + h + ":" + mi + ":" + s;
}

//如果是一位数的时间  前面拼接一个0
function toTwo(val){
    return val < 10 ? "0"+val : val
}

//定义一个函数 将一个字符串转成日期时间对象
function stringToDate(str){
    return new Date(str);
}

//定义一个时间差函数 
function diff(start,end){
    return end.getTime() - start.getTime();
}

//定义函数功能创建一个元素节点  返回创建的节点
function create(ele){
    return document.createElement(ele);
}
//碰撞函数
function pz(obj1,obj2){
    //获取obj1 的上下 左右四个边的数据
    T1 = obj1.offsetTop;
    B1 = obj1.offsetTop + obj1.offsetHeight;
    L1 = obj1.offsetLeft;
    R1 = obj1.offsetLeft + obj1.offsetWidth;
    
    //获取obj2 的上下 左右四个边的数据
    T2 = obj2.offsetTop;
    B2 = obj2.offsetTop + obj2.offsetHeight;
    L2 = obj2.offsetLeft;
    R2 = obj2.offsetLeft + obj2.offsetWidth;
    
    //查找碰不上的条件  如果碰不上 返回false   碰上了返回true
    if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){ //碰不上
        return false;
    }else{
        return true;
    }
}

sport5.js文件

//obj 操作的元素
//json 参数为 要操作的属性和目标值   键--属性    值--目标值
//callback 回调函数
var flag;//开关变量  当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作
function startMove(obj,json,callback){//attr表示要操作的属性
        
    clearInterval(obj.timer);
    
    obj.timer = setInterval(function(){
        flag = true;
        
        
        var current = 0;
        
        for(var attr in json){
            
            if( attr =="opacity" ){//操作透明度
                //获取透明度的样式值
                current =parseFloat( getStyle(obj,attr) )*100; 
                
            }else{
                current =parseInt( getStyle(obj,attr)  ) ;//接收当前元素的样式值
            }
            
            
            var speed = (json[attr] - current)/10;
            
            
            speed = speed>0?Math.ceil(speed) :Math.floor(speed);
            
            
            if( current != json[attr] ){//动作完成后的条件  
                flag = false;//当目标值和当前的样式值 不相等时  ， 将开关变量值关闭 false 
            }
                
            //定时器开启时  不停的改变元素的样式
            if( attr == "opacity" ){
                obj.style.opacity = (current+speed)/100;
            }else{
                obj.style[attr] = current + speed + "px";
            }
    
        }
        
        //循环结束后判断flag的值，当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作
        if( flag ){
            clearInterval(obj.timer);
            //上一个动作完成后 就开启下一个动作的执行    调用callback
            //判断 callback是否存在 存在就调用
            if( callback ){
                callback();
            }
        }
        
    },30)
}

//获取样式值函数
function getStyle(obj,attr){
    if( window.getComputedStyle ){
         return window.getComputedStyle( obj,false )[attr];
     }else{
         return obj.currentStyle[attr];
     }
}

style.css文件

body { background: #666; } 
ul { padding: 0; margin: 0; } 
li { list-style: none; } 
img { border: 0; }

.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }

.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; 
            background: #222; position: relative; }
.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; 
            z-index: 0; background: url(images/loading.gif) no-repeat center center; }
.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; 
            filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; 
            background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat; 
            position: absolute; top: 130px; left: 10px; z-index: 3001; 
            cursor: pointer; filter:alpha(opacity: 0); opacity:0; }
.big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; 
            position: absolute; top: 130px; right: 10px; z-index: 3001;cursor: pointer; 
            filter:alpha(opacity: 0); opacity:0; }
.big_pic .text { position: absolute; left: 10px; bottom:4px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }
.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); 
            opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; }
.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }
.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; 
                background: url(images/loading.gif) no-repeat center center; cursor: pointer; 
                filter: alpha(opacity=60); opacity: 0.6; }
.small_pic img { width: 120px; height: 94px; }

以上是关于无缝轮播图的主要内容，如果未能解决你的问题，请参考以下文章

使用js和css-transition属性57行代码实现简易无缝轮播图

原生JavaScript实现无缝轮播图