简单的图片轮播

最新推荐文章于 2022-08-20 16:01:04 发布

wk199351

最新推荐文章于 2022-08-20 16:01:04 发布

阅读量369

点赞数

分类专栏： jquery 文章标签： jquery 图片轮播-jquery

本文链接：https://blog.csdn.net/wk199351/article/details/70171372

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这里写图片描述只是简单的布局，没有美化，时间有限，做了个大致的意思，后面会做一个好看点的，以及使用translate的原理做一个。能够实现选择间隔时间，图片与小图相对应的功能。
css代码
`.img-contain{
margin: 20px auto;
width: 400px;
overflow: hidden;
position: relative;
}
.inner {
position: relative;
width: 9999px;
left: 0;
top: 0;
}
.innerwraper {
float: left;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
display: block;
clear: both;
visibility: hidden;
content: “”;
height: 0;
}
a {
text-decoration: none;
}
.left-arrow {
position: absolute;
left: 0;
top: 40%;
width: 10%;
height: 20px;
text-align: center;
line-height: 30px;
font-size: 30px;
}
.right-arrow {
position: absolute;
right: 0;
top: 40%;
width: 10%;
height: 20px;
font-size: 30px;
text-align: center;
line-height: 30px;
}
.page-corner{
position: absolute;
bottom: 5px;
left:0;
width: 100%;
text-align: center;
}
.page-corner span{
display: inline-block;
width: 20px;
height: 20px;
background-color: yellow;
line-height: 30px;
border-radius: 50%;
cursor: pointer;
}
.page-corner .active{
background-color: red;
color: #FFFFFF;
}
.control{
width:400px;
overflow:hidden;
margin:10px auto;
}
.sm-img-container{
width:1024px;
overflow:hidden;
margin:10px auto;

}
.sm-img-container ul{
width:1024px;
padding:0px;
margin:0px;
list-style-type:none;
}
.sm-img-container ul li{
border:1px solid transparent;
float:left;
}
.sm-img-container ul li.img-active{
border-color:yellow;
}`

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="">
</head>
<body>
    <div id="wrapper">
        <div class="row wrapper">
        <div class="img-contain">
            <div class="inner clearfix">
                <div class="innerwraper"><img src="static/onlineservice/img/p1.jpg" alt="" /></div>
                <div class="innerwraper"><img src="static/onlineservice/img/p2.jpg" alt="" /></div>
                <div class="innerwraper"><img src="static/onlineservice/img/p3.jpg" alt="" /></div>
                <div class="innerwraper"><img src="static/onlineservice/img/p4.jpg" alt="" /></div>
                <div class="innerwraper"><img src="static/onlineservice/img/p5.jpg" alt="" /></div>
                <div class="innerwraper"><img src="static/onlineservice/img/p6.jpg" alt="" /></div>
                <div class="innerwraper"><img src="static/onlineservice/img/p7.jpg" alt="" /></div>
                <div class="innerwraper"><img src="static/onlineservice/img/p8.jpg" alt="" /></div>
                <div class="innerwraper"><img src="static/onlineservice/img/p1.jpg" alt="" /></div>

            </div>
            <div class="page-corner">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <a href="javascript:void(0)" class="left-arrow">&lt;</a>
            <a href="javascript:void(0)" class="right-arrow">&gt;</a>
        </div>
        <div class="control">
        <form>
            <select id="time">
                <option>1s</option>
                <option>3s</option>
                <option>5s</option>
            </select>
            <button type="button" class="btn">播放</button>
        </form>
        </div>
        <div class="sm-img-container">
        <ul>
            <li class="img-active"><img src="static/onlineservice/img/a1.jpg"></li>
            <li><img src="static/onlineservice/img/a2.jpg"></li>
            <li><img src="static/onlineservice/img/a3.jpg"></li>
            <li><img src="static/onlineservice/img/a4.jpg"></li>
            <li><img src="static/onlineservice/img/a5.jpg"></li>
            <li><img src="static/onlineservice/img/a6.jpg"></li>
            <li><img src="static/onlineservice/img/a7.jpg"></li>
            <li><img src="static/onlineservice/img/a8.jpg"></li>
        </ul>
        </div>  
        </div>
    </div>
    <script src="static/onlineservice/js/jquery-2.1.1.js"></script>
    <script type="text/javascript">
    var innerGroup = $(".innerwraper");
    var leftArrow = $(".left-arrow");
    var rightArrow = $(".right-arrow");
    var spanGroup = $(".page-corner span");
    var imgWidth = $(".innerwraper img:first-child").eq(0).width();
    var lis=$(".sm-img-container ul li");
    var _index = 0;
    var timer = null;
    setTime();
    rightArrow.on("click", function() {
        //右箭头
        clearInterval(timer);
        _index++;
        if(_index==innerGroup.length){
            _index=1;
        }
        selectPic(_index);
    })
    leftArrow.on("click", function() {
        //左箭头
        clearInterval(timer);
        if (_index == 0) {
            _index = innerGroup.length-1;
        }
        _index--;
        selectPic(_index);
    })
    spanGroup.on("click", function() {
        //导航切换
        _index = spanGroup.index($(this));
        selectPic(_index);
    })
    //图片切换
    lis.on("click",function(){
        _index=lis.index($(this));
        selectPic(_index);
    })
    $(".img-contain").hover(function() {
        //鼠标移入
        clearInterval(timer);
    }, function() {
        setTime();
    });
    $(".sm-img-container ul").hover(function() {
        //鼠标移入
        clearInterval(timer);
    }, function() {
        setTime();
    });
    function setTime(){
        //设置时间间隔
        var timeout=parseInt($("#time option:selected").text())*1000;
        console.log(timeout);
         timer = setInterval(go, timeout);
    }
    function go() {
        //计时器的函数
        _index++;
        if(_index==innerGroup.length){
            _index=1;

        }
        selectPic(_index);
    }
    function selectPic(num) {
        $(".page-corner span").eq(num).addClass("active").siblings().removeClass("active");
        $(".sm-img-container ul li").eq(num).addClass("img-active").siblings().removeClass("img-active");
        $(".inner").animate({
            left: -num * imgWidth,
        }, 100,function(){
            if(num==innerGroup.length-1){
                $(".inner").css("left","0");
                $(".sm-img-container ul li").eq(0).addClass("img-active").siblings().removeClass("img-active");
                $(".page-corner span").eq(0).addClass("active").siblings().removeClass("active");
            }
        });
    }

    </script>

</body>