無縫輪播圖

時間  2019-11-19
標籤 無縫 简体版
原文   原文鏈接 
<!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文件css

//根據給定的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文件html

//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文件json

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; }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程