利用背景图片制作轮播（手自一体化）

最新推荐文章于 2022-10-03 09:25:37 发布

weixin_30563917

最新推荐文章于 2022-10-03 09:25:37 发布

阅读量559

点赞数 1

文章标签：开发工具 javascript ViewUI

原文链接：http://www.cnblogs.com/leolovexx/p/5460579.html

版权

详细代码和图片在百度云里面下载http://pan.baidu.com/s/1hs2hl6O



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>背景图片做轮播+自动轮播</title>
    <style type="text/css">
        *, body {
            margin: 0px;
            padding: 0px;

        }

        #container {
            margin-left: 200px;
            background-color: darkgrey;
            text-align: center;
            width: 980px;

        }

        #top {
            width: 980px;
            height: 65px;
            /**/
            background-image: url("img/topbg.png");
            background-size: auto;
            background-position: center;
            /**/
        }

        #bottom {
            width: 980px;
            height: 65px;
            background-image: url("img/bottombg.png");
            background-size: auto;
            background-position: center;
            /**/

        }

        #banner {
            width: 980px;
            height: 330px;
            background-image: url("img/1.jpg");
            /*background-position: left;*/
            /*background-repeat: no-repeat;*/
            position: relative;
            -webkit-transition: all 1.8s linear;

        }

        #banner-left {
            background-image: url("img/images/btn_03.png");
            width: 60px;
            height: 60px;
            position: absolute;
            margin-top: 130px;
            opacity: 0;
            -webkit-transition: all 0.8s linear;

        }

        #banner-right {
            background-image: url("img/images/btn_01.png");
            width: 60px;
            height: 60px;
            position: absolute;
            right: 0px;
            margin-top: 130px;
            opacity: 0;
            -webkit-transition: all 0.8s linear;
        }

        #banner:hover > #banner-right, #banner:hover > #banner-left {
            opacity: 0.8;
            /*background-image: url("../img/images/btn_02.png");*/

        }
    </style>
</head>
<body>
<div id="container">
    <div id="top"></div>
    <div id="banner">
        <div id="banner-left" οnclick="Oclick(this)"></div>
        <div id="banner-right" οnclick="Oclick(this)"></div>
    </div>
    <div id="bottom"></div>
</div>
<script type="text/javascript">
    var num = 1, TM=0;
    var oBanner = document.getElementById("banner")
    var Time1 = new Date();
    var p=0;
    function Oclick(Athis) {
        TM = 1;
        oBanner.style.backgroundPosition="490px";
        clearInterval(B); //点击时清除自动轮播
        if (Athis.id.substr(7, 1) == "r") {
            num++;
            p++;
        }
        else {
            p--;
            num--;
        }
        //限制轮播极限，以免越界
        if (num > 8) {
            num = 1;
        }
        if (num < 1) {
            num = 5
        }
        oBanner.style.backgroundPosition=p*980+"px";//每次移动980 ，背景重复情况下制造推动的视觉效果
        oBanner.style.backgroundImage = "url('img/" + num + ".jpg')";

    }
    //定时调用函数，更换背
   var B= setInterval(oAtuo,2000);
    var num1=num;
    function oAtuo() {

        num1++;

        if (num1 > 8) {
            num1 = 1;
        }

        oBanner.style.backgroundImage = "url('img/" + num1 + ".jpg')";

    }


</script>
</body>
</html>

转载于:https://www.cnblogs.com/leolovexx/p/5460579.html

weixin_30563917

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用背景图片制作轮播（手自一体化）

详细代码和图片在百度云里面下载http://pan.baidu.com/s/1hs2hl6O<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title&g...
复制链接

扫一扫