div+css 带缩略图鼠标滑过切换图片

最新推荐文章于 2019-03-03 16:43:43 发布

WeLoveSunFlower

最新推荐文章于 2019-03-03 16:43:43 发布

阅读量2.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/WeLoveSunFlower/article/details/38079113

版权

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>带缩略图响应鼠标滑过图片切换</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            word-break: break-all;
        }

        body {
            font: 12px/1.6em Helvetica, Arial, sans-serif;
            margin: 0px;
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 1em;
        }

        a {
            color: #0287CA;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        ul, li {
            list-style: none;
        }

        fieldset, img {
            border: none;
        }

        legend {
            display: none;
        }

        em, strong, cite, th {
            font-style: normal;
            font-weight: normal;
        }

        input, textarea, select, button {
            font: 12px Helvetica, Arial, sans-serif;
        }

        table {
            border-collapse: collapse;
        }

        html {
            overflow: -moz-scrollbars-vertical;
        }

        #ifocus {
            width: 390px;
            height: 278px;
            margin: 0 auto;
            border: 1px solid #DEDEDE;
            background: #F8F8F8;
            margin-top: 10px;
            position: relative
        }

        #ifocus_pic .img {
            min-width: 100%;
            min-height: 100%;
            position: absolute;
            cursor: pointer;
            overflow: hidden;
            top: 0;
            left: 0
        }

        #ifocus_btn {
            display: inline;
            width: 91px;
            margin: 9px 9px 0 0;
            position: absolute;
            right: 0;
            top: 0;
        }

        #ifocus_btn li {
            cursor: pointer;
            opacity: 0.5;
            -moz-opacity: 0.5;
            filter: alpha(opacity=50);
        }

        #ifocus_btn img {
            width: 75px;
            height: 54px;
            margin: 7px 0 0 12px;
        }

        #ifocus_btn .current {
            opacity: 1;
            -moz-opacity: 1;
            filter: alpha(opacity=100);
        }

        #ifocus_tx {
            position: absolute;
            left: 0;
            bottom: 0;
            color: #FFF;
            width: 282px;
            background: #000;
            opacity: 0.5;
            -moz-opacity: 0.5;
            filter: alpha(opacity=50);
            padding: 8px 0 8px 8px;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>

<body>
<div id="ifocus">
    <div id="ifocus_pic">
        <div class="img">
            <img id="img-0" src="http://img3.douban.com/img/fmadmin/chlBanner/26383.jpg">
            <img id="img-1" src="http://img3.douban.com/img/fmadmin/chlBanner/26384.jpg">
            <img id="img-2" src="http://img5.douban.com/img/fmadmin/chlBanner/26376.jpg">
            <img id="img-3" src="http://img3.douban.com/img/fmadmin/chlBanner/26375.jpg">
        </div>
        <div id="ifocus_tx">
            <ul>
                <li id="text-0" class="text">图一</li>
                <li id="text-1" class="text">图二</li>
                <li id="text-2" class="text">图三</li>
                <li id="text-3" class="text">图四</li>
            </ul>
        </div>
    </div>
    <div id="ifocus_btn">
        <ul>
            <li id="nav_0" class="normal"><img src="http://img3.douban.com/img/fmadmin/chlBanner/26383.jpg"/></li>
            <li id="nav_1" class="normal"><img src="http://img3.douban.com/img/fmadmin/chlBanner/26384.jpg"/></li>
            <li id="nav_2" class="normal"><img src="http://img5.douban.com/img/fmadmin/chlBanner/26376.jpg"/></li>
            <li id="nav_3" class="normal"><img src="http://img3.douban.com/img/fmadmin/chlBanner/26375.jpg"/></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    //鼠标滑过右侧缩略图时，显示对应大图和文字
    $('.normal').mouseover(function (e) {
        var i = $(".normal").index(this);//获取缩略图所在位置
        show_image(i);
    });

    var CurrentHotScreen = 0;
    var refreshHotQueryTimer = null;
    var MaxScreen = 4;//图片总数
    setHotQueryList(CurrentHotScreen);

    function setHotQueryList(screen) {
        if (screen > MaxScreen - 1) {
            screen = 0;
        }
        show_image(screen);
        CurrentHotScreen = screen;
    }

    function refreshHotQuery() {
        refreshHotQueryTimer = null;
        setHotQueryList(CurrentHotScreen + 1);
    }

    function show_image(index) {
        clearTimeout(refreshHotQueryTimer);
        for (i = 0; i < MaxScreen; i++) {
            $("#img-" + i).hide();
            $('.normal').removeClass('current');
            $('#text-' + i).hide();
        }
        $("#img-" + index).show();
        $('#nav_' + index).addClass('current');
        $('#text-' + index).show();
        refreshHotQueryTimer = setTimeout('refreshHotQuery();', 2000);//每隔2秒切换到下一张图
    }
</script>
</body>
</html>

效果