如何实现图片轮换的效果

最新推荐文章于 2021-12-05 08:53:50 发布

纯心物语

最新推荐文章于 2021-12-05 08:53:50 发布

阅读量733

点赞数 2

本文链接：https://blog.csdn.net/fanxiaokun526/article/details/46409937

版权

实现上面的效果图：

HTML代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>-->
    <title>3A</title>
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">-->
    <script src="jquery-2/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="js/style.js"></script>
    <!--<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
</head>
<body>
<div class="homeWraper">
    <div id="focus">
        <ul>
            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
        </ul>
    </div>
    </div>
</body>
</html>

css代码如下：

#focus{
     width: 1239px;
     height: 370px;
     overflow: hidden;
     position: relative;
     margin: 25px auto;
 }
#focus ul {
    position: absolute;
}
#focus ul li{
    float: left;
    width: 1239px;
    height: 370px;
    overflow: hidden;
    position: relative;
}

#focus ul li div {
    position: absolute;
    overflow: hidden;
}
#focus .btn {
    position: absolute;
    height: 18px;
    right: 19px;
    bottom: 11px;
}
#focus .btn span{
    display: inline-block;
    _display: inline;
    _zoom: 1;
    width: 19px;
    height: 18px;
    line-height: 18px;
    margin-left: 10px;
    _font-size: 0;
    cursor: pointer;
    background-color: #ffffff;
}
#focus .btn span.on {
    background: #0593d3;
}
.proHotsLeft ol.proHotsLeftList{
    float: left;
}
.proHotsLeftList li{
    position: relative;
    cursor: pointer;
    width: 355px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #ffffff;
    background-color: #e5e4e4;
    border-bottom: 1px solid #fff;
}
.proHotsLeftList li .proHotsLeftNum{
    font-size: 30px;
    padding-left: 18px;
    padding-right: 32px;
    color: #b5b4b4;
}
.proHotsLeftList li.hover{
    background-color: #0593d3;
    border-bottom: 1px solid #91d0ec;
}
.proHotsLeftList li.hover span.arrow{
    background-image: url("../images/icon01.png");
    background-repeat: no-repeat;
}
.proHotsLeft li.hover span.proHotsLeftNum{
    color: #ffffff;
}

js代码如下：

$(function(){
    var sWidth = $("#focus").width();
    var len = $("#focus ul li").length;
    var index = 0;
    var picTimer;
    var $listItem = $(".proHotsLeft>ol>li");
    var $divs = $('.itemRight>div');
    var btn = "<div class='btn'>";
    for( var i = 0; i < len; i++){
        btn +="<span></span>";
    }
    btn +="</div>";
    $("#focus").append(btn);
    $("#focus .btn span").mouseenter(function(){
        index = $("#focus .btn span").index(this);
        showPics(index);
    }).eq(0).trigger("mouseenter");

    $("#focus ul").css("width",sWidth * (len));

    $("#focus").hover(function(){
        clearInterval(picTimer);
    },function(){
        picTimer = setInterval(function(){
            showPics(index);
            index++;
            if(index == len) {index = 0;}
        },1000)
    }).trigger('mouseleave');

    function showPics(index){
        var nowLeft = -index*sWidth;
        $("#focus ul").stop(true,false).animate({"left":nowLeft},300);
        $("#focus .btn span").eq(index).addClass('on').siblings().removeClass('on');
    }

    $listItem.on("mouseenter",function(){
        index = $(this).index();
        $(this).addClass('hover').siblings().removeClass("hover");
        $divs.eq(index).show().siblings().hide();
    })
    $(".itemCar").on('mouseenter',function(){
        var $mask =$("<div class='shadow'></div>");
//        $mask.appendTo($(this).find('.itemImgs'));
        $mask.appendTo($(this).children('.itemImgs'));
    })
    $(".itemCar").on("mouseleave",function(){
//        $(this).find(".shadow").remove();
        //children鐨勯€熷害姣攆ind锛堟ā绯婃煡璇級瑕佸揩
        $(this).children('.itemImgs').children(".shadow").remove();
    })

})

纯心物语

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何实现图片轮换的效果

实现上面的效果图：HTML代码如下：html>html>head lang="en"> meta charset="UTF-8"> --> title>3Atitle> link href="css/reset.css" rel="stylesheet"> link href="css/style.css" rel="stylesheet">
复制链接

扫一扫