发新贴  快速回复

带缩略图的图片转换

萌萌哒(*^_^*)
2017-08-04 09:54

萌萌哒(*^_^*)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            h2,
            ul ,ol{
                padding: 0;
                margin: 0;
            }
            
            li {
                list-style: none;
            }
            
            body {
                background: url(img/bg.jpg) no-repeat;
                background-size: 100% 100%;
                background-attachment: fixed;
            }
            
            #pic {
                width: 560px;
                height: 380px;
                background: #FFFFFF;
                margin: 100px auto;
                position: relative;
            }
            
            #pic h2 {
                position: absolute;
                top: -34px;
                left: 0;
                color: #6193d8;
            }
            
            #pic img {
                width: 560px;
                height: 380px;
                border: none;
            }
            
            #pic ul {
                position: absolute;
                bottom: -26px;
                left: 233px;
            }
            
            #pic ul li {
                width: 14px;
                height: 14px;
                background-color: #8f8e8c;
                border-radius: 50%;
                float: left;
                margin-right: 6px;
                cursor: pointer;
            }
            
            #pic .active {
                background: #ffbc00;
            }
            
            #pic ol{
                position: absolute;
                bottom: -10px;
            }
            #pic ol li{
                /*图一*/
                width: 86px;
                height:67px ;
                background: url(img/sbg.png) no-repeat;
                float: left;
                display: none;
                
            
            }
            #pic ol img{
                width: 80px;
                height:56px ;
                margin: 3px;
            }
            
            
            #fl,
            #fr {
                width: 46px;
                height: 46px;
                background-color: #ffbc00;
                border-radius: 50%;
                position: absolute;
                top: 158px;
                color: #FFFFFF;
                text-align: center;
                font: 40px/40px "微软雅黑";
                cursor: pointer;
            }
            
            #fl {
                left: 12px;
            }
            
            #fr {
                right: 12px;
            }
            
            #pic .hover {
                filter: alpha(opacitiy=50);
                opacity: 0.5;
                -moz-opacity: 0.5;
            }
        </style>

2017-08-04 09:54  回复本帖
萌萌哒(*^_^*)

<script>
            window.err= = function() {
                var oPic = document.getElementById('pic');
                var oImg = document.getElementById('bPic');
//                左右按钮
                var aBtn = oPic.getElementsByTagName('div');
                
//                小图片
                var oOl = document.getElementsByTagName('ol')[0];
                var aSrc = oOl.getElementsByTagName('img');
                var aoLi = oOl.getElementsByTagName('li');
                
                
//                小点点
                var oUl = document.getElementsByTagName('ul')[0];
                var aLi = oUl.getElementsByTagName('li');
                var num = 0;
                var arr = 0; //存储小圆数字

                var arrUrl = ['img/eat1.jpg','img/eat2.jpg','img/eat3.jpg','img/eat4.jpg','img/eat5.jpg']

                //    画出小圆点
                for(var i = 0; i < arrUrl.length; i++) {
                    oUl.innerHTML += '<li></li>';
                }
                
                //    画出小图片
                for(var i = 0; i < arrUrl.length; i++) {
                    oOl.innerHTML += '<li><img src=""></li>';
                }

                //初始化
                oImg.src = arrUrl[num];
                aLi[num].className = 'active';

                //点击小圆
                for(var i = 0; i < arrUrl.length; i++) {
                    aLi[i].index = i;
                    aLi[i].err= = function() {
                        oImg.src = arrUrl[this.index];
                        for(var i = 0; i < arrUrl.length; i++) {
                            aLi[i].className = '';
                        }
                        aLi[this.index].className = 'active';
                        arr = this.index;

                    }
                }
                
//                鼠标在小圆上
                for(var i = 0; i < arrUrl.length; i++){
                    aLi[i].index = i;
                    aLi[i].err= = function() {

                        oOl.style.left=197+20*this.index+'px';
                        aoLi[this.index].style.display='block';
                        aSrc[this.index].src=arrUrl[this.index];
                    
                    }
                    aLi[i].err= = function() {
                        aoLi[this.index].style.display='none';
                    }
                }
                
                //大圆圆

                for(var i = 0; i < aBtn.length; i++) {
                    aBtn[i].index = i;

                    aBtn[i].err= = function() {    //移入
                        this.className = 'hover';
                    }
                    aBtn[i].err= = function() {//移出
                        this.className = '';
                    }

                    aBtn[i].err= = function() {
                        
                        if(this.index){    //向左
                            arr++;
                            if(arr == arrUrl.length) {
                                arr = 0;
                            }
                            fnTab();
                        } else {//向右
                            arr--;
                            if(arr == -1) {
                                arr = arrUrl.length - 1;
                            }
                            fnTab();
                        }

                    }
                }

                //图片循环与小圆循环函数
                function fnTab() {

                    oImg.src = arrUrl[arr];

                    for(var i = 0; i < arrUrl.length; i++) {
                        aLi[i].className = '';
                    }
                    aLi[arr].className = 'active';
                }

            }
        </script>
    </head>

    <body>

        <div id="pic">
            <h2>带缩略图的图片转换</h2>
            <img id="bPic" src="" />
            <div id="fl"><</div>        <!--左点点-->
            <div id="fr">></div>        <!--右点点-->
            <ol></ol>    <!--//小图片-->
            <ul></ul>    <!--//小点-->
            </div>
    </body>

</html>

2017-08-04 09:55  回复本帖
萌萌哒(*^_^*)

限制字数分开发

2017-08-04 09:56  回复本帖
Annie

不如你直接发个压缩包吧   复制下来以后发现   这里没有你的结构啊    你的html代码在哪里?只有css  和  js   没有结构   你js我看不太懂

2017-08-04 12:00  回复本帖
萌萌哒(*^_^*)

Annie 2017-08-04 12:00发表的内容:

不如你直接发个压缩包吧   复制下来以后发现   这里没有你的结构啊    你的html代码在哪里?只有css  和  js   没有结构   你js我看不太懂

下面有body里面的就是了,我的压缩包上传不了。

<body>

        <div id="pic">
            <h2>带缩略图的图片转换</h2>
            <img id="bPic" src="" />
            <div id="fl"><</div>        <!--左点点-->
            <div id="fr">></div>        <!--右点点-->
            <ol></ol>    <!--//小图片-->
            <ul></ul>    <!--//小点-->
            </div>
    </body>

2017-08-04 21:49  回复本帖
萌萌哒(*^_^*)

Annie 2017-08-04 12:00发表的内容:

不如你直接发个压缩包吧   复制下来以后发现   这里没有你的结构啊    你的html代码在哪里?只有css  和  js   没有结构   你js我看不太懂

你上网找个背景图片,还有五张图片,把那些代进去就可以了

2017-08-04 21:56  回复本帖
 
妙味-小仙

亲,建议上传完整压缩包,不然回答问题的同学和老师会比较麻烦哦~

2017-08-07 09:08  回复本帖
妙味用户991167

感谢分享

 

2017-08-10 17:11  回复本帖
萌萌哒(*^_^*)

妙味-小仙 2017-08-07 09:08发表的内容:

亲,建议上传完整压缩包,不然回答问题的同学和老师会比较麻烦哦~

每次上传压缩包,都说太大了,呜呜,我尽量吧

2017-08-10 22:57  回复本帖
滴滴滴

膜拜

2017-09-14 08:54  回复本帖
登录 后才可以发表回复