轮播图

来源：互联网发布：微商营销软件编辑：程序博客网时间：2024/05/18 20:34
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>switch content</title>    <style>        .container {            width: 700px;            height: 300px;            border: 1px solid #ccc;            margin: 20px auto;            position: relative;            overflow: hidden;        }        .topLine {            width: 100%;            height: 30px;            background: #eee;            position: relative;        }        .topLine a {            width: 20%;            height: 100%;            float: left;            text-align: center;            line-height: 30px;            font-size: 15px;            color: #009797;            text-decoration: none;            position: relative;            z-index: 1;        }        .topLine .slidebar {            width: 20%;            height: 100%;            background: #009797;            position: absolute;        }        .content {            width: 100%;            height: 270px;            position: relative;        }        .content div {            width: 100%;            height: 100%;            position: absolute;            left: -100%;            font-size: 70px;            text-align: center;            line-height: 270px;            top: 0;            color: #fff;        }        .Bar {        width: 50px;            height: 70px;            font-size: 20px;            color: #fff;            background: rgba(0,0,0,0.5);            position: absolute;            top: 45%;            line-height: 70px;            text-align: center;            cursor: pointer;            display: none;        }        .rightBar {            right: 0;        }        .leftBar {            left: 0;        }        .content1 {        background: #FFB12F;        }        .content2 {        background: #00C378;        }        .content3 {        background: #26B2E3;        }        .content4 {        background: #E84C3D;        }        .content5 {        background: #F831FD;        }    </style>    <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>    <script>        $(function() {            var container = $(".container");            var as = $(".topLine a");            var slidebar = $(".slidebar");            var contents = $(".content div");            var clickIndex = 0;            var hoverIndex = 0;            container.hover(function() {                $(".leftBar, .rightBar").css("display", "block");            }, function() {                $(".leftBar, .rightBar").css("display", "none");            });            $(".leftBar").click(function() {                contents.finish();                slidebar.stop(true);                var temp = clickIndex;                clickIndex--;                if (clickIndex == -1) {                    clickIndex = 4;                }                contents.eq(clickIndex)                .css("left", 700)                .animate({left : 0});                contents.eq(temp).animate({left : -700});                as.css("color", "#009797");                slidebar.animate({left : as.eq(clickIndex).position().left});                as.eq(clickIndex).css("color", "#fff");            });            $(".rightBar").click(function() {                contents.finish();                slidebar.stop(true);                var temp = clickIndex;                clickIndex++;                if (clickIndex == 5) {                    clickIndex = 0;                }                contents.eq(clickIndex)                .css("left", -700)                .animate({left : 0});                                contents.eq(temp).animate({left : 700});                as.css("color", "#009797");                slidebar.animate({left : as.eq(clickIndex).position().left});                as.eq(clickIndex).css("color", "#fff");            });            as.hover(function() {                contents.finish();                slidebar.stop(true);                as.css("color", "#009797");                slidebar.animate({left : $(this).position().left}, function() {                    $(this).css("color", "#fff");                });                var index =$(this).index(".topLine a");                hoverIndex = index;                if (clickIndex == hoverIndex) {                    return;                } else if (clickIndex < hoverIndex) {                    contents.eq(hoverIndex).css("left", 700).animate({left : 0});                    contents.eq(clickIndex).animate({left : -700});                } else if (clickIndex > hoverIndex) {                    contents.eq(hoverIndex).css("left", -700).animate({left : 0});                    contents.eq(clickIndex).animate({left: 700});                }                clickIndex = hoverIndex;                hoverIndex = "";            });        });    </script></head><body><div class="container">    <div class="topLine">        <a style="color:#fff;">1</a>        <a>2</a>        <a>3</a>        <a>4</a>        <a>5</a>        <div class="slidebar"></div>    </div>    <div class="content">        <div class="content1" style="left:0;">page1</div>        <div class="content2">page2</div>        <div class="content3">page3</div>        <div class="content4">page4</div>        <div class="content5">page5</div>    </div>    <div class="Bar leftBar"><</div>    <div class="Bar rightBar">></div></div></body></html>
0 0