Jquery超完美滚动轮播图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超完美滚动轮播图</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
	margin:0px;
	padding:0px;
}
.banner {
	width:500px;
	height:300px;
	margin:150px auto;
	position:relative;
	overflow:hidden;
	cursor:pointer;
}
.banner ul {
	list-style:none;
	width:700%;
	height:300px;
	position:absolute;
}
.banner ul li {
	width:500px;
	height:300px;
	float:left;
}
.banner ul li img {
	width:100%;
	height:100%;
}
.banner .arrow .left,.banner .arrow .right {
	width:40px;
	height:80px;
	background:#000000;
	opacity:0.3;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	font-family:"宋体";
	font-size:52px;
	color:#fff;
	line-height:80px;
	text-align:center;
}
.arrow .left {
	left:0px;
}
.arrow .right {
	right:0px;
}
.banner .arrow {
	display:none;
}
/*鼠标经过盒子,让箭头显示出来*/
		    .banner:hover .arrow {
	display:block;
	cursor:pointer;
}
/*小圆点样式*/
		   .banner ol {
	list-style:none;
	width:200px;
	height:20px;
	background:#222222;
	position:absolute;
	bottom:50px;
	left:50%;
	transform:translateX(-50%);
	/*opacity:0.3;
	*/
		    border-radius:10px;
}
.banner ol li {
	width:10px;
	height:10px;
	background:#fff;
	border-radius:50%;
	float:left;
	margin-left:21px;
	margin-top:5px;
	cursor:pointer;
}
.banner ol .now {
	background:aqua;
}
</style>
</head>
<body>
<div class="banner">
    <ul>
        <li><img src="http://www.jq22.com/img/cs/500x300-1.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x300-2.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x300-3.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x300-4.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x300-5.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x300-6.png"></li>
        <!--在轮播图的最后面加上一张假的图片,就是第一张。目的,最后一张换成第一张的时候,用户察觉不到-->
        <li><img src="http://www.jq22.com/img/cs/500x300-7.png"></li>
    </ul>
    <div class="arrow">
        <span class="left"><</span>
        <span class="right">></span>
    </div>
    <!--存放小圆点的图片-->
    <ol>
        <li class="now"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>

<script>
$(function() {
    // 把要操作的对象先获取到
    var banner = $('.banner');
    var Left = $('.left'); // alert(Left.length);
    var Right = $('.right');
    var Ul = $('.banner ul'); // alert(Ul.length);
    var Width = $('.banner ul li').width(); //alert(Width);
    var Point = $('.banner ol li'); // alert(Point.length);
    var Index = 0; //用于记录点击的次数,图片的张数(计数器,记录了图片移动的张数)

    //点击小圆点让图片移动
    $.each(Point, function(index, value) { //如果此处我没有用each循环来写,那么我便需要用$(this).index()方法来获取图片的下标
        //让点击的小圆点有class样式,其他li没有class样式
        Point.eq(index).on('click', function() {
            $(this).addClass('now').siblings().removeClass('now');
            Ul.stop().animate({
                'left': -index * Width
            });
            Index = index;
            console.log(Index);
            //alert(Index);
        })
    });

    //	点击右箭头,ul往左跑
    Right.on('click', function() {
        //需要做一个判断,如果发现此时图片是最后一张图片,就不能继续执行了
        //让index是图片的张数减一的时候,让index不继续加
        if (Index >= 6) {
            //让index变成0
            Index = 0;
            //              	让ul的left值瞬间变成0
            Ul.css('left', 0);
        }
        Index++;
        Ul.stop().animate({
            'left': -Index * Width
        });

        if (Index == 6) {
            //因为在图片最后面添加了一张假图片,其实最后一张图片的时候,需要对应的是索引0的小圆点
            Point.eq(0).addClass('now').siblings().removeClass('now');

        } else {
            Point.eq(Index).addClass('now').siblings().removeClass('now');
        }

    })

    //点击左箭头,让Ul往右跑
    Left.on('click', function() {
        if (Index <= 0) {
            //return; 此时不应该return,应该让index变成最大的值,left也变成最大的left
            Index = 6;
            Ul.css('left', -Index * Width);
        }
        Index--;
        Ul.stop().animate({
            'left': -Index * Width
        });

        if (Index == 6) {
            //因为在图片最后面添加了一张假图片,其实最后一张图片的时候,需要对应的是索引0的小圆点
            Point.eq(0).addClass('now').siblings().removeClass('now');
        } else {
            Point.eq(Index).addClass('now').siblings().removeClass('now');
        }

    })



    //调取Right方法,使其自动播放
    var time = setInterval(function() {
        Right.click();
    }, 2000);

    //鼠标移到banner中,自动播放停止
    banner.mouseenter(function() {
        clearInterval(time);
    });

    // 鼠标移出banner中,自动播放开始
    banner.mouseleave(function() {
        time = setInterval(function() {
            Right.click();
        }, 2000);
    })
})
</script>

</body>
</html>

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭