jquery实现京东淘宝首页的轮番效果图

主要是绑定事件以及实现自动滚轮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
            height:650px;
            width: 500px;
            border: dashed cadetblue 5px;
            margin: 0 auto;
            position: relative;
        }
        /*.num{*/
            /*position: absolute;*/
            /*left:0;*/
            /*top:0;*/
        /*}*/
        .num li{
            height:24px;
            width: 24px;
            background-color: grey;
            border-radius:80%;
            /*使每个数字在圈圈之内显示*/
            text-align: center;
            display: inline-block;
            font-size: 20px;
            margin: 5px;
            cursor: pointer;
        }

        ul li{
            list-style: none;
        }
        .outer .img li{
            position: absolute;
            left:0;
            top:0;
            
        }
        .num{
            position: absolute;
            left:0;
            /*top:0;*/
            bottom: 10px;
            font-size: 0;
            /*情况num下面文本内容*/
            text-align: center;
            width: 100%;

            /*告诉按照宽度的100%来居中*/
        }
        .button{
            height: 60px;
            width: 40px;
            background-color: darkgoldenrod;
            position: absolute;
            /*left:0;*/
            top:50%;
            margin-top: -30px;
            /*移动正中间*/
            opacity: 0.6;
            font-size: 40px;
            text-align: center;
            line-height:60px;
            display: none;
            /*默认隐藏起来这个框框*/
        }
        .btn_right{
            right:0;
            /*把另外一个标签移动到右边*/
        }
        .outer:hover .button{
            display: block;
        }
        .outer .num li.current{
            background-color: red;
        }
    </style>
</head>
<body>
<div class="outer">
    <ul class="img">
        <li><img src="11.jpg"></li>
        <li><img src="22.jpg"></li>
        <li><img src="33.jpg"></li>
        <li><img src="44.jpg"></li>
        <li><img src="55.jpg"></li>
        <!--会先显示最后一张，因为在加载中，后面的内容可以理解为离我们更近，就先显示出来了-->
    </ul>
    <ul class="num">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>

    </ul>
    <div class="btn_left button" ><</div>
    <div class="btn_right button">></div>
</div>


<script src="jquery-3.1.1.js"></script>
<script>
$(function () {
    $('.num li').first().addClass('current');
    $('.num li').mouseover(function () {
        $(this).addClass('current').siblings().removeClass('current');
//       当鼠标悬浮上去就触发该事件
        var index = $(this).index();
        i=index;
        //根据索引值取到对应图片的索引值，fadein后面的参数表示过1秒显示出来，fadeout表示隐藏
        $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
    });

//    自动播放图片
    i = 0;
    var time = setInterval(move, 1500);

    function move() {
        i++;
        if (i == 5) {
            i = 0;
        }
        $('.num li').eq(i).addClass('current').siblings().removeClass('current');
        $('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
//每1.5秒执行一次，改变数字框框的颜色以及控制图片的显示以及隐藏
    }

    $('.outer').hover(function () {
        clearInterval(time)
    }, function () {
        time = setInterval(move, 1500);
    });

    $('.btn_right').click(function(){
        move()
    });
    //点击有边框直接往右边走
    $('.btn_left').click(function(){
        if(i==0){
            i=3
        }else {i=i-2;}

        move();
    });
});
//触碰div则接触自动更换图片，鼠标离开则继续自动滚动图片




</script>
</body>
</html>

　　效果如图

 

posted @ 2017-03-29 19:14  蜗牛仔  阅读(403)  评论(0)    收藏  举报