三張圖並排輪播滾動

原創 zuo_zuo_blog 2020-02-23 07:32 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>三張圖輪播效果</title>
    <style>
      .product-cont .lunbo{
    width: 100%;
    height: 303px;
    margin-top: -330px;
    margin-bottom: -100px;
    background-color: #f0f0f0;
}
.product-cont  .cont-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 50px;
    color: #000;
    padding-bottom: 50px;
    position: relative;
    text-align: center;
    padding-top: 50px;
}
.product-cont{
    color: #151515;
    padding-bottom: 100px;
}
.product-cont .cont-title:after {
    content: '';
    display: block;
    width: 38px;
    border-bottom: 1px solid #000;
    position: absolute;
    left: calc(50% - 19px);
    margin-top: 10px;
}
.product-cont .product .product-list > p{
    text-align: left;
    font-size: 14px;
    line-height: 24px;
    color: #707070;
    padding: 0 30px;
}
.product-cont .product .product-list > p.product-text{
    margin-bottom: 20px;
}
.in img {
    width: 300px;
    height: 369px;
    float: left;
    padding-left: 50px;
}
.in {
    width:5500px;
    position: absolute;
}
.out {
    width: 1000px;
    height: 369px;
    overflow:hidden;
    margin: 80px auto;
    position: relative;
    
}
.left {
    width: 22px;
    height: 39px;
    left: 160px;
    background-image: url("../img/left.png");
    position: absolute;
    margin-top: -290px;
}
.right {
    width: 22px; 
    height: 39px;
    background-image: url("../img/right.png");
    position: absolute;
    right: 160px;
    margin-top: -290px;
} 
.in .pic {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/7.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic1 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/8.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic2 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/9.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic3 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/1.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic4 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/2.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic5 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/3.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic6 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/face4.png") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic7 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/5.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic8 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/6.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic9 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/7.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic10 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/8.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic11 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/9.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic12 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/1.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic13 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/2.png") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.in .pic14 {
    display: block;
    background-color:#dbdbdb;
    width: 300px;
    height: 369px;
    background-image: url("../img/3.jpg") ;
    background-size: 300px 369px;
    margin-left: 50px;
    float: left;
}
.childss {
    width: 300px;
    height: 0px;
    background-color:#000000;
    opacity: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: normal;
    position: absolute;
    bottom: 0;
}
.childss p{
	font-family: Segoe UI;
    font-size: 20px;
    padding-top: 20px;
    margin-right: 28px;
    font-weight: normal;
    float: right;
    color: #ffffff;
    padding-bottom: 20px;
}


    </style>
</head>
<body>
    <div class="product-cont">
        <div class="product">
            <p class="cont-title">11111111</p>
            <div class="product-list">
                <p class="product-text" style="text-indent: 30px;">
                    22222222
                </p>
            </div>
        </div>
        <div class="scene2">
            <div class="out">
                <div class="in clearFix" style="left: -1100px;">
                    <div class="pic">
                        <div class="childss test">
                            <p>廁紙機</p>
                        </div>
                    </div>
                    <div class="pic1">
                        <div class="childss test1">
                            <p>單元門禁</p>
                        </div>
                    </div>
                    <div class="pic2">
                        <div class="childss test2">
                            <p>考勤門禁</p>
                        </div>
                    </div>
                    <!-- 第二組 -->
                    <div class="pic3">
                        <div class="childss test3">
                            <p>廁紙機</p>
                        </div>
                    </div>
                    <div class="pic4">
                        <div class="childss test4">
                            <p>單元門禁</p>
                        </div>
                    </div>
                    <div class="pic5">
                        <div class="childss test5">
                            <p>考勤門禁</p>
                        </div>
                    </div>
                    <!-- 第三組 -->
                    <div class="pic6">
                        <div class="childss test6">
                            <p>人臉識別閘機頭</p>
                        </div>
                    </div>
                    <div class="pic7">
                        <div class="childss test7">
                            <p>人臉考勤機</p>
                        </div>
                    </div>
                    <div class="pic8">
                        <div class="childss test8">
                            <p>人臉簽到機</p>
                        </div>
                    </div>
                    <!-- 第四組 -->
                    <div class="pic9">
                        <div class="childss test9">
                            <p>人臉識別閘機</p>
                        </div>
                    </div>
                    <div class="pic10">
                        <div class="childss test10">
                            <p>校園班牌</p>
                        </div>
                    </div>
                    <div class="pic11">
                        <div class="childss test11">
                            <p>迎賓機</p>
                        </div>
                    </div>
                    <!-- 第五組 -->
                    <div class="pic12">
                        <div class="childss test12">
                            <p>廁紙機</p>
                        </div>
                    </div>
                    <div class="pic13">
                        <div class="childss test13">
                            <p>單元門禁</p>
                        </div>
                    </div>
                    <div class="pic14">
                        <div class="childss test14">
                            <p>考勤門禁</p>
                        </div>
                    </div>

                </div>
                <div class="shodow"></div>
            </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="lunbo"></div>
    </div>
</body>
<script type="text/javascript"  src="./../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"  src="./../js/jquery-3.3.1.min.js"></script>
<script>

    //輪播
    var out = document.getElementsByClassName("out").item(0);
    var left = document.getElementsByClassName("left").item(0);
    var right = document.getElementsByClassName("right").item(0);
    var myin = document.getElementsByClassName("in").item(0);
    var zt = true;
    var timer = null;
    var lilist = document.getElementsByTagName("li");
    var index1 = 0;
    var timer1 = null;
    right.onclick = function () {
        if (zt == true) {
            move(-1050);
        }
    };
    left.onclick = function () {
        if (zt == true) {
            move(1050);
        }
    };
    function move(dis) {
        zt = false;
        var newweizhi = parseInt(myin.style.left) + dis;
        var time = 1000;
        var interval = 10;
        var every = dis / (time / interval);
        function meici() {
            if (every < 0 && parseInt(myin.style.left) > newweizhi || every > 0 && parseInt(myin.style.left) < newweizhi) {
                myin.style.left = parseInt(myin.style.left) + every + 'px';
                setTimeout(meici, 10)
            } else {
                myin.style.left = newweizhi + 'px';
                clearInterval(timer);
                zt = true;
                if (newweizhi == -4250) {
                    myin.style.left = -1100 + "px";
                }
                if (newweizhi == -50) {
                    myin.style.left = -3200 + "px";
                }

            }
        }
        meici();
    }

    timer1 = setInterval(right.onclick, 3000);
    out.onmouseover = function () {
        clearInterval(timer1);
    };
    left.onmouseover = function () {
        clearInterval(timer1);
    };
    right.onmouseover = function () {
        clearInterval(timer1);
    };
    out.onmouseout = function () {
        timer1 = setInterval(right.onclick, 3000);
    }
    left.onmouseout = function () {
        timer1 = setInterval(right.onclick, 3000);
    };
    right.onmouseout = function () {
        timer1 = setInterval(right.onclick, 3000);
    };
	
	
	
	
	 $(document).ready(function () {
        var animated = false;
        $(".pic4").mouseenter(function () {
            // $('.test4').animate({ height: '67px', width:'300px',opacity: '0.5' }, "slow");
            // $('.test4').animate({'height':'67px','marginTop':'303px',opacity: '0.5' }, "slow");
           // $('.test4').animate({ 'height': '67px', opacity: '0.5' }, "slow");
            //$('.test4').animate({'width':'300px','right':'300px',opacity: '0.5' }, "slow");
            $(".test4").stop().animate({ 'height': '67px', opacity: '0.5' },"slow");
        });
        $(".pic4").mouseleave(function () {
           // $('.test4').animate({ 'height': '0px', opacity: '0' }, "slow");
            $(".test4").stop().animate({ 'height': '0px', opacity: '0' },"slow");
        })
        $(".pic3").mouseenter(function () {
            // if (!animated) {
            //         animated=true;
            //         $(".test3").animate({ 'height': '67px', opacity: '0.5' }, "slow", function () {
            //             animated=false;
            //         });
            //     }
            $(".test3").stop().animate({ 'height': '67px', opacity: '0.5' },"slow");
           // $('.test3').animate({ 'height': '67px', opacity: '0.5' }, "slow");
        });
        $(".pic3").mouseleave(function () {
            $(".test3").stop().animate({ 'height': '0px', opacity: '0' },"slow");
            //$('.test3').animate({ 'height': '0px', opacity: '0' }, "slow");
        })
        $(".pic5").mouseenter(function () {
           // $('.test5').animate({ 'height': '67px', opacity: '0.5' }, "slow");
            $(".test5").stop().animate({ 'height': '67px', opacity: '0.5' },"slow");
        });
        $(".pic5").mouseleave(function () {
           // $('.test5').animate({ 'height': '0px', opacity: '0' }, "slow");
            $(".test5").stop().animate({ 'height': '0px', opacity: '0' },"slow");
        })
        $(".pic6").mouseenter(function () {
            //$('.test6').animate({ 'height': '67px', opacity: '0.5' }, "slow");
            $(".test6").stop().animate({ 'height': '67px', opacity: '0.5' },"slow");
        });
        $(".pic6").mouseleave(function () {
            //$('.test6').animate({ 'height': '0px', opacity: '0' }, "slow");
            $(".test6").stop().animate({ 'height': '0px', opacity: '0' },"slow");
        })
        $(".pic7").mouseenter(function () {
            //$('.test7').animate({ 'height': '67px', opacity: '0.5' }, "slow");
            $(".test7").stop().animate({ 'height': '67px', opacity: '0.5' },"slow");
        });
        $(".pic7").mouseleave(function () {
           // $('.test7').animate({ 'height': '0px', opacity: '0' }, "slow");
            $(".test7").stop().animate({ 'height': '0px', opacity: '0' },"slow");
        })
        $(".pic8").mouseenter(function () {
            //$('.test8').animate({ 'height': '67px', opacity: '0.5' }, "slow");
            $(".test8").stop().animate({ 'height': '67px', opacity: '0.5' },"slow");
        });
        $(".pic8").mouseleave(function () {
           // $('.test8').animate({ 'height': '0px', opacity: '0' }, "slow");
            $(".test8").stop().animate({ 'height': '0px', opacity: '0' },"slow");
        })
        $(".pic9").mouseenter(function () {
            //$('.test9').animate({ 'height': '67px', opacity: '0.5' }, "slow");
            $(".test9").stop().animate({ 'height': '67px', opacity: '0.5' },"slow");
        });
        $(".pic9").mouseleave(function () {
           // $('.test9').animate({ 'height': '0px', opacity: '0' }, "slow");
            $(".test9").stop().animate({ 'height': '0px', opacity: '0' },"slow");
        })
        $(".pic10").mouseenter(function () {
            //$('.test10').animate({ 'height': '67px', opacity: '0.5' }, "slow");
            $(".test10").stop().animate({ 'height': '67px', opacity: '0.5' },"slow");
        });
        $(".pic10").mouseleave(function () {
           // $('.test10').animate({ 'height': '0px', opacity: '0' }, "slow");
            $(".test10").stop().animate({ 'height': '0px', opacity: '0' },"slow");
        })
        $(".pic11").mouseenter(function () {
            //$('.test11').animate({ 'height': '67px', opacity: '0.5' }, "slow");
            $(".test11").stop().animate({ 'height': '67px', opacity: '0.5' },"slow");
        });
        $(".pic11").mouseleave(function () {
           // $('.test11').animate({ 'height': '0px', opacity: '0' }, "slow");
            $(".test11").stop().animate({ 'height': '0px', opacity: '0' },"slow");
        })
    });
</script>
</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

遍歷對象問題

for循環遍歷數據的key value ;vue v-for 循環遍歷數據的key和value 1.for循環方法 obj：{ a:11, b:22, c:33 } for(var key in obj){ conso

zuo_zuo_blog 2020-06-16 07:59:53

數組對象合併以及轉換

將對象轉化爲數組 var arr = [] for (let i in obj) { arr.push(obj[i]); //屬性 //arr.push(obj[i]); //值 } console.log(arr

zuo_zuo_blog 2020-06-16 07:59:52

關於閉包的思考

1.說到閉包，首先要知道作用域問題 變量的作用域有兩種：全局變量和局部變量。下面介紹一下作用： 在js中，函數內部可以直接讀取全局變量。 var n=999; 　　function f1(){ 　　　　alert(n); 　　} 　

zuo_zuo_blog 2020-06-16 07:59:52

項目種常用的js數據處理方法

1.正則處理時間格式（把/用-替換） this.conversionListData.map(item => { item.reportDate = item.reportDate.

zuo_zuo_blog 2020-06-16 07:59:52

JS排序方法

1. 冒泡排序 解析: 比較相鄰的兩個元素，如果前一個比後一個大，則交換位置。 第一輪的時候最後一個元素應該是最大的一個。 按照步驟一的方法進行相鄰兩個元素的比較，這個時候由於最後一個元素已經是最大的了，所以最後一個元素不用比較。  

zuo_zuo_blog 2020-06-16 07:59:52

JavaScript語言居然有兩個表示"無"的值：undefined和null。有什麼區別吶

1.JavaScript的最初版本是這樣區分的：null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。 2.目前，null和undefined基本是同義的，只有一些細微的差別。 

zuo_zuo_blog 2020-06-16 07:59:52

JS動態創建link標籤到head

zuo_zuo_blog 2020-05-22 12:53:06

Promise 多接口調用 的寫法

zuo_zuo_blog 2020-05-07 22:51:06

獲取時間格式

zuo_zuo_blog 2020-04-05 13:15:45

js-cookie存取用戶名

zuo_zuo_blog 2020-04-05 13:15:45

中國標準時間、時間戳、年月日等日期格式處理

zuo_zuo_blog 2020-03-14 19:17:12

常見js算法

zuo_zuo_blog 2020-03-13 02:23:23

querySelector()、querySelectorAll()、localeCompare()方法介紹

zuo_zuo_blog 2020-03-13 02:23:23

Element Ui之利用sort-change事件及sortable屬性實現Table表格指定列的排序

zuo_zuo_blog 2020-03-08 05:17:49

JS 日期轉換成時間戳

zuo_zuo_blog 2020-03-08 05:17:49