zoukankan      html  css  js  c++  java

  • 无缝轮播图

    <!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 {  400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }

.big_pic {  400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; 
            background: #222; position: relative; }
.big_pic li {  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 {  200px; height: 320px; position: absolute; left: 0; top: 0; background: red; 
            filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right {  200px; height: 320px; position: absolute; left: 200px; top: 0; 
            background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev {  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 {  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 {  400px; height: 25px; background: #000; filter: alpha(opacity=60); 
            opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic {  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 {  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 {  120px; height: 94px; }
  • 相关阅读:
    MIne FirstBlog
    P6563 [SBCOI2020]一直在你身旁
    P6563 [SBCOI2020]一直在你身旁
    T122085 [SBCOI2020]时光的流逝
    LC 918. Maximum Sum Circular Subarray
    1026 Table Tennis
    LC 1442. Count Triplets That Can Form Two Arrays of Equal XOR
    LC 1316. Distinct Echo Substrings
    LC 493. Reverse Pairs
    1029 Median （二分）
  • 原文地址：https://www.cnblogs.com/Leslie-Cheung1584304774/p/10529488.html
Copyright © 2011-2022 走看看