Jquery实现轮播效果图

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>jquery轮播</title>
    <script type="text/javascript" src="js/jquery.js">
        
    </script>
</head>
<style>
    *{ padding:0px; margin:0px;list-style:none;}
            .ad { 
                width:586px; 
                height:150px; 
                margin:5px auto;
                border:1px solid #808080; 
                position:relative; 
                overflow:hidden;
                }
            .ad .slider{
                width:5860px; 
                position:absolute; 
                left:0px;
                top:0px;
                }
            .ad .slider img{
                width:586px; 
                height:150px;}
            .ad .slider li{
                float:left;
                }
            .ad .num { 
                position:absolute; 
                width:100%; 
                bottom:10px; 
                left:0px; 
                text-align:center; 
                font-size:0px;
                }
            .ad .num li { 
                width:10px; 
                height:10px; 
                background-color:#888; 
                border-radius:50%;
                display:inline-block; 
                margin:0px 3px; 
                cursor:pointer;}
            .ad .num li.on {
                background-color: #ff6a00;
                }
            .ad .btn {
                width: 30px;
                height: 50px;
                background-color: #808080;
                opacity: 0.5; 
                filter:alpha(opacity:0.5); 
                position:absolute;
                top:50%; 
                margin-top:-25px;
                cursor:pointer;
                text-align:center;
                line-height:50px;
                font-size:40px;
                color:#fff;
                font-family:"宋体";
                display:none;
                }
             .ad .btn_l { 
                left:0px;
                }
             .ad .btn_r {
                right:0px;
                }
             .ad:hover .btn { 
                display:block;
                }
    
</style>
<body>
    <div class="ad">
            <ul class="slider">
                     <li><img src="img/s1.png" alt="" /></li>
                     <li><img src="img/s2.png" alt="" /></li>
                     <li><img src="img/s3.png" alt="" /></li>
                     <li><img src="img/u0.jpg" alt="" /></li>
                     <li><img src="img/user2.jpg" alt=""/></li>
            </ul>
            <ul class="num">
                
            </ul>
            <div class="btn btn_l">&lt;</div>     
            <div class="btn btn_r">&gt;</div>
  </div>
  <script type="text/javascript">
      $(document).ready(function () {
                var i = 0;
                var clone = $(".ad .slider li").first().clone();//克隆第一张图片
                $(".ad .slider").append(clone);//复制到列表最后
                var size = $(".ad .slider li").size();
                for (var j = 0; j < size-1; j++) {
                    $(".ad .num").append("<li></li>");
                }
                $(".ad .num li").first().addClass("on");

                /*自动轮播*/
                var t = setInterval(function () { i++; move();},2000);

                /*鼠标悬停事件*/
                $(".ad").hover(function () {
                    clearInterval(t);//鼠标悬停时清除定时器
                }, function () {
                    t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时清除定时器
                });

                /*鼠标滑入原点事件*/
                $(".ad .num li").hover(function () {
                    var index = $(this).index();//获取当前索引值
                    i = index;
                    $(".ad .slider").stop().animate({ left: -index * 586 }, 500);                   
                    $(this).addClass("on").siblings().removeClass("on");
                });

                /*向左按钮*/
                $(".ad .btn_l").click(function () {
                    i++;
                    move();
                })
   
                /*向右按钮*/
                $(".ad .btn_r").click(function () {
                    i--;
                    move();
                })

                /*移动事件*/
                function move() {
                    if (i == size) {
                        $(".ad .slider").css({ left: 0 });
                        i = 1;
                    }
                    if (i == -1) {
                        $(".ad .slider").css({ left: -(size - 1) * 586 });
                        i = size - 2;
                    }
                    $(".ad .slider").stop().animate({ left: -i * 586 }, 500);

                    if (i == size - 1) {
                        $(".ad .num li").eq(0).addClass("on").siblings().removeClass("on");
                    } else {
                        $(".ad .num li").eq(i).addClass("on").siblings().removeClass("on");
                    }
                }
            });
  </script>
</body>
</html>
Jquery实现轮播效果图

猜你喜欢
