轮播图，放大镜

最新推荐文章于 2023-01-03 15:12:58 发布

weixin_30558305

最新推荐文章于 2023-01-03 15:12:58 发布

阅读量219

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/flyhgx/p/6816786.html

版权

凡客放大镜

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>凡客</title>
    <script type="text/javascript">
        window.onload = function(){
            left = document.getElementById('left');
            cover = document.getElementById('cover');
            container = document.getElementById('container');
            right = document.getElementById('right');
            img = document.getElementById('rpic')
            cover.onmousemove = function(e){

                // 获得事件对象
                var ev = window.event||e;
                var mount_left = ev.offsetX ||ev.layerX;
                var mount_top = ev.offsetY||ev.layerY;

                box_left = mount_left-100;
                box_top = mount_top-110;
                // if(box_left>200){
                //  box_left=200;
                // }
                box_left=box_left>200?200:Math.max(0,box_left);
                console.log(box_left)
                if (box_top>220) {
                    box_top=220;
                }
                // if (box_left<0) {
                //  box_left=0;
                // }
                if (box_top<0) {
                    box_top=0;
                }

                container.style.left=box_left+'px';
                container.style.top = box_top+'px';

                img.style.left=(box_left*-2)+'px';
                img.style.top=(box_top*-2)+'px';

                cover.onmouseover = function(){

                    container.style.display = 'block';
                    right.style.display='block';

                }
                cover.onmouseout = function(){
                    
                    container.style.display = 'none';
                    right.style.display='none';
                }
            }
        }
    
    </script>

    <style type="text/css">
        #left{
            width: 400px;
            height: 440px;
            border: 2px solid blue;
            background: url(400.jpg) no-repeat;
            position: relative;
            margin: 20px;
            float: left;

        }
        #cover{
            width: 400px;
            height: 440px;
            border: 2px solid yellow;
            position: relative;
            margin: 20px;
            opacity: 0;

        }
        #container{
            width: 200px;
            height: 220px;
            opacity: 0.5;
            background: green;
            border: 2px solid black;
            position: absolute;
            top: 0;
            left: 0;
            cursor: crosshair;
            display: none;
        }
        #right{
            width: 400px;
            height: 440px;
            border: 2px solid orange;
            overflow: hidden;
            float: left;
            position: relative;
            display: none;
            
        }
        #rpic{
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>
    
</head>
<body>
    <div id="left">
        <div id="container">
            
        </div>
        <div id="cover"></div>
    </div>
    <div id="right">
        <img src="800.jpg" id="rpic">
    </div>

</body>
</html>

凡客首页轮播图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>凡客</title>
    <script type="text/javascript">
//用jquery实现
// $(function(){
            
        //  var c = 0;
        //  function run(){
        //      c++;
        //      console.log(c)
        //      c=c==5?0:c;
        //      $('#container img').eq(c).stop().fadeIn().siblings('img').stop().fadeOut();
        //      $('#container ul li').eq(c).css({'background':'red'}).siblings('li').css({'background':'black'});

        //  }
        //  var timer =setInterval(run ,1000);
        //  $('#container ul li').mouseenter(function(){
        //      clearInterval(timer)
        //      var counter = $(this) //指向ul li对象
        //      tt = setTimeout(function(){
        //          c =counter.index();
        //      $('#container img').eq(c).stop().fadeIn().siblings('img').stop().fadeOut();
        //      $('#container ul li').eq(c).css({'background':'red'}).siblings('li').css({'background':'black'});
        //      },200)
                
                
        //  })

        //  $('#container ul li').mouseleave(function(){
        //      clearTimeout(tt);
        //      timer =setInterval(run ,1000);
        //  })


        // })
        window.onload =function(){
            var circile = document.getElementById('circile');
            var container = document.getElementById('container')
            var lis = container.getElementsByTagName('img');
            var timer;
            // var imgIndex=0;
            var childs = circile.children;
                container.onmouseout=function(){
                    if (timer) {
                        clearInterval(timer);
                        
                    }
                    timer=setInterval(test,1000);       
                }
                container.onmouseover=function(){
                    console.log('mouseover');
                    
                    
                    clearInterval(timer);
                }
            for (var i = 0; i < childs.length; i++) {
                childs[i].num = i;
                childs[i].onclick=function(){
                    clearInterval(timer);
                    common(this.num);
                    
                }
                childs[i].onmouseover=function(){
                    clearInterval(timer);
                    x=this.num;
                    common(x);
                    
                }

            }
            function common(num){
                for (var j = 0; j<lis.length; j++) {
                        lis[j].style.display='none';
                        childs[j].style.background='green';
                    }
                    lis[num].style.display='block';
                    childs[num].style.background='red';
            }
            var x = 0;
            function test(){
                    x++;
                    if (x==lis.length) {
                        x=0;
                    }
                    common(x);      
            }
        
            timer = setInterval(test,1000)

        }

    </script>

    <style type="text/css">
        #container{
            width: 1200px;
            height: 535px;
            border: 2px solid blue;
            margin: 20px auto;
            position: relative;

        }
        #container img{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #container ul{
            position: absolute;
            left: 548px;
            bottom: 23px;
            list-style: none;
        }
        #container ul li{
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: green;
            margin-right: 8px;
            float: left;
        }
    </style>
    
</head>
<body>
    <div id="container">
        <img src="images/1.jpg" style="display: block;">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
        

        <ul id="circile">
            <li style="background: red"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


</body>
</html>

转载于:https://www.cnblogs.com/flyhgx/p/6816786.html

weixin_30558305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图，放大镜

凡客放大镜<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>凡客</title> <script type="text/javascript"> window.onload = function(){...
复制链接

扫一扫