前端jq轮播图无缝切换

2018web前端开发框架
ui java web前端开发框架有哪些
前端开发框架 exitjs

html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>banner</title>
    <style>
        body{margin:0;padding: 0;}
.main{position:relative;width:1200px;height:490px;margin:auto;overflow:hidden;}
.box{position:absolute;overflow:hidden;height:490px;top:0;left:0;}
.box>div{float:left;}
.box>divimg{width:1200px;height:490px;}
.btn{position:absolute;bottom:10px;left:50%;margin-left:-52px;;}
.btn>span{width:15px;height:15px;background:#FFF;display:inline-block;border-radius:50%;cursor:pointer;margin-left:12px;}
.btn.active{background:none;border-radius:50%;border:solid1px#fff}
.prev{width:40px;height:40px;background:#000000;opacity:0.7;position:absolute;top:50%;left:0;color:#fff;text-align:center;
line-height:40px;margin-top:-20px;font-weight:bold;font-size:18px;cursor:pointer;display:none;z-index:111;}
.next{width:40px;height:40px;background:#000000;opacity:0.7;position:absolute;top:50%;right:0;color:#fff;text-align:center;
line-height:40px;margin-top:-20px;font-weight:bold;font-size:18px;cursor:pointer;display:none;z-index:111;}
</style>
</head>
<body>
    <div class=”main”>
        <div class=”box”>
            <div class=”img”><img src=”https://www.rokub.com/wp-content/uploads/2018/03/timg-2-520×245.jpeg”></div>
            <div class=”img”><img src=”https://www.rokub.com/wp-content/uploads/2018/03/timg-2-520×245.jpeg”></div>
            <div class=”img”><img src=”https://www.rokub.com/wp-content/uploads/2018/03/timg-2-520×245.jpeg”></div>
            <div class=”img”><img src=”https://www.rokub.com/wp-content/uploads/2018/03/timg-2-520×245.jpeg”></div>
        </div>
        <div class=”btn”>
        </div>
        <div class=”prev”>
            <</div> <div class=”next”>>
        </div>
    </div>
    <script type=”text/javascript” src=”http://s.thsi.cn/js/jquery-1.7.2.min.js”></script>
    <script>
        var timer = null;//定时器
        var index = 0;//索引值
        $(function () {
            $(“.main”).hover(function () {//鼠标移入关闭定时器
                clearInterval(timer);
                $(“.prev”).fadeIn();
                $(“.next”).fadeIn();
            }, function () {//鼠标移出开启定时器
                timer = setInterval(function () {
                    index++;
                    autoplay();
                }, 1500);
                $(“.prev”).fadeOut();
                $(“.next”).fadeOut();
            })
            var clone = $(“.box>div”).eq(0).clone();//克隆第一张图片
            $(“.box”).append(clone);//复制到列表最后
            var size = $(“.box>div”).size();//获取到图片的总数量
            for (var i = 0; i < size – 1; i++) {//循环添加跟图片数量相等按钮数量
                $(“.btn”).append(“<span></span>”);
            }
            $(“.btn”).children().eq(0).addClass(“active”);//给第一个按钮添加当前的样式
            var $imgWidth = $(“.box>div”).eq(0).width();
            $(“.box”).width($imgWidth * size);//box的总宽度
            timer = setInterval(function () {
                index++;
                autoplay();
            }, 1500);
            function autoplay() {
                if (index == size) {
                    $(“.box”).css({ “left”: 0 });
                    index = 1;
                }
                if (index == size – 1) {//当index等于图片的数量-1的时候第一个按钮的样式为当前样式
                    $(“.btn”).children(“span”).eq(0).addClass(“active”).siblings().removeClass(“active”);
                } else {
                    $(“.btn”).children(“span”).eq(index).addClass(“active”).siblings().removeClass(“active”);
                }
                $(“.box”).stop().animate({ “left”: -$imgWidth * index }, 500)//图片向右切换
            }
            //下一张
            $(“.next”).on(“click”, function () {
                index++
                autoplay();
            })
            //上一张
            $(“.prev”).on(“click”, function () {
                index–;
                if (index == -1) {//当index<0的时候就走最后面那张
                    $(“.box”).css({ “left”: -(size – 1) * $imgWidth });
                    index = size – 2;
                }
                autoplay();
            })
            $(“.btn>span”).on(“click”, function () {
                var $index = $(this).index();//当前的索引值
                index = $index;//把当前的索引值赋值给index以便鼠标移出的时候接着走后面那张图片
                $(this).addClass(“active”).siblings().removeClass(“active”);
                $(“.box”).stop().animate({ “left”: -$imgWidth * $index });
            })
        })
    </script>
</body>
</html>
web前端开发框架搭建视频教程
前端h5开发框架
前端开发有哪几大框架
» 本文来自:前端开发者 » 《前端jq轮播图无缝切换》
» 本文链接地址:https://www.rokub.com/6257.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!