轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

timelessmemoryli

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量322

点赞数

分类专栏： js jquery html+css/html5 文章标签：轮播图

本文链接：https://blog.csdn.net/u014788227/article/details/53116072

版权

js 同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

html+css/html5

14 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

<!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>