焦点图，图片切换，JS简洁版

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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=utf-8" />
<title>焦点图</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height:200%;
}
a{
    color:#333;
    text-decoration:none;
}
img{border:0px;}
.hot{
    position:relative;
    width:296px;
    height:392px;
}
.num{
    position:absolute;
    right:6px;
    bottom:4px;
}
.num li{
    float:left;
    height:21px;
    width:24px;
    margin-right:3px;
}
.num li a{
    display:block;
    font-weight:bold;
    text-align:center;
}
.num_other{
    color:#000;
    background:url() no-repeat;
}
.num_now{
    color:#FFF;
    background:url() no-repeat;
}
</style>
</head>
<body>
	<div class="hot">
        <div id="cover">
            <div id="cover1"><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34a17e7e03.jpg"  height=392 width=296 alt="钻石"  /></a></div>
            <div id="cover2" style="display:none;"><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34a1903d7e.jpg"  height=392 width=296 /></a></div>
            <div id="cover3" style="display:none;"><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34a1a190aa.jpg"  height=392 width=296 /></a></div>
            <div id="cover4" style="display:none;"><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34a1b7ecee.jpg"  height=392 width=296 /></a></div>
        </div>
            <ul id="idNum" class="num">
                <li><a href="#" id="num1" class="num_now" onmouseover="coverHover(1);">1</a></li>
                <li><a href="#" id="num2" class="num_other" onmouseover="coverHover(2);">2</a></li>
                <li><a href="#" id="num3" class="num_other" onmouseover="coverHover(3);">3</a></li>
                <li><a href="#" id="num4" class="num_other" onmouseover="coverHover(4);">4</a></li>
            </ul>
            <input type="hidden" id="count" value="1">
        </div>
        <script type="text/javascript">
    function g(o) {
        return document.getElementById(o);
    }
    function coverChange() {
        var order = parseInt(g("count").value);
        if (order < 4) {
            orderNext = order + 1;
        } else {
            orderNext = 1;
        };
        for (var i = 1; i <= 4; i++) {
            g("cover" + i).style.display = "none";
            g("cover" + orderNext).style.display = "block";
            g("num" + i).className = "num_other";
            g("num" + orderNext).className = "num_now";
        }
        g("count").value = orderNext;
    }
    var t = setInterval(coverChange, 6000);
    function coverHover(e) {
        //clearInterval(t);
        for (var i = 1; i <= 4; i++) {
            g("cover" + i).style.display = "none";
            g("cover" + e).style.display = "block";
            g("num" + i).className = "num_other";
            g("num" + e).className = "num_now";
        }
    };
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

焦点图，图片切换，JS简洁版

分类

图片代码

描述

一款简洁的网页焦作图，用在网页上可作图片切换，做的比较简洁，不管是焦点图的表现形式或是焦点图代码这方面，都省去了不少的代码，图片引用了本站的演示图片，在CSS中，可以设置焦点图控制按钮的背景图片，这样不至于图片会影响到控制...