码迷,mamicode.com
首页 > 其他好文 > 详细

简单轮播图效果

时间:2018-04-26 14:36:06      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:tps   pos   orange   int   read   this   .sh   .so   top   

 一、效果1

  技术分享图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    ul{margin:0;padding:0;}
    li{list-style:none;}
    img{display:block;border:none 0;}
    .banner{width:400px;height:300px;margin:0 auto;border:1px solid orange;}
    .banner img{display:none;}
    .bannerCtrl{width:60px;margin:0 auto;overflow:hidden;}
    .bannerCtrl li{width:10px;height:10px;float:left;margin:5px 5px;background-color:skyblue;}
</style>
</head>
<body>
    <div class="banner">
        <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px">
        <img src="http://www.google.cn/landing/cnexp/google-search.png" width="400px" height="300px">
        <img src="https://img04.sogoucdn.com/app/a/100520122/6b53c9d0_pc.gif" width="400px" height="300px">
    </div>
    <ul class="bannerCtrl">
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script type="text/javascript">
        $(document).ready(function(){
            $(".banner img:first").css("display","block");
            $(".bannerCtrl li:first").css("background-color","pink");
        });
        $(function(){
            $(".bannerCtrl li").mouseover(function(){
                var n=$(".bannerCtrl li").index($(this));
                $(".banner img").hide();
                $(".banner img").eq(n).show();
                $(this).css("background-color","pink");
                $(this).siblings("li").css("background-color","skyblue");
            });
        });
    </script>
</body>
</html>

二、效果2

  技术分享图片  技术分享图片  技术分享图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    img{display:block;border:none 0;}
    .outBox{border:2px solid orange;width:400px;height:300px;overflow:hidden;position:relative;}
    .imgBox{width:1200px;height:300px;position:absolute;left:0;top:0;}
    .imgBox img{float:left;}
</style>
</head>
<body>
    <div class="outBox">
        <div class="imgBox">
            <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px">
            <img src="http://www.google.cn/landing/cnexp/google-search.png" width="400px" height="300px">
            <img src="https://img04.sogoucdn.com/app/a/100520122/6b53c9d0_pc.gif" width="400px" height="300px">
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
            function run(){
                /*滚动一次*/
                $(".imgBox").animate({left:"-400px"},500,function(){
                    /*将第一张图放在最后一张图的后面*/
                    $(".imgBox img:first").insertAfter($(".imgBox img:last"));
                    /*将图像框归位*/
                    $(".imgBox").css({left:"0"});
                });
            }
            /*定时器*/
            setInterval(run,2000);
        });
    </script>
</body>
</html>

 

简单轮播图效果

标签:tps   pos   orange   int   read   this   .sh   .so   top   

原文地址:https://www.cnblogs.com/zhouwanqiu/p/8952038.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!