轮播图jQuery版带导航点

Html

Css

 * {
	padding:0px;
	margin:0px;
}
a {
	text-decoration:none;
}
ul {
	list-style:outside none none;
}
.slider,.slider-panel img,.slider-extra {
	width:650px;
	height:413px;
}
.slider {
	text-align:center;
	margin:30px auto;
	position:relative;
}
.slider-panel,.slider-nav,.slider-pre,.slider-next {
	position:absolute;
	z-index:8;
}
.slider-panel {
	position:absolute;
}
.slider-panel img {
	border:none;
}
.slider-extra {
	position:relative;
}
.slider-nav {
	margin-left:-51px;
	position:absolute;
	left:50%;
	bottom:4px;
}
.slider-nav li {
	background:#3e3e3e;
	border-radius:50%;
	color:#fff;
	cursor:pointer;
	margin:0 2px;
	overflow:hidden;
	text-align:center;
	display:inline-block;
	height:18px;
	line-height:18px;
	width:18px;
}
.slider-nav .slider-item-selected {
	background:blue;
}
.slider-page a {
	background:rgba(0,0,0,0.2);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
	color:#fff;
	text-align:center;
	display:block;
	font-family:"simsun";
	font-size:22px;
	width:28px;
	height:62px;
	line-height:62px;
	margin-top:-31px;
	position:absolute;
	top:50%;
}
.slider-page a:HOVER {
	background:rgba(0,0,0,0.4);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
	left:100%;
	margin-left:-28px;
}

$(document).ready(function() {
    // length变量获取图片标签个数, currentIndex变量为当前显示图片下标,起始值为0.
    var length, currentIndex = 0,
        // interval变量为定时器,hasStarted为定时器开关,起始值false.
        interval, hasStarted = false,
        // 定时器循环单位时间,默认值3秒.
        t = 3000;
    // 获取图片标签的个数.
    length = $('.slider-panel').length;
    // 隐藏除第一个以外的其他图片标签
    $('.slider-panel:not(:first)').hide();
    // 给第一个导航点标签添加“选中样式”的class.
    $('.slider-item:first').addClass('slider-item-selected');
    // 隐藏左右翻页标签
    $('.slider-page').hide();
    // 给显示区及翻页标签添加悬停事件函数.
    $('.slider-panel, .slider-pre, .slider-next').hover(function() {
        // 第一个函数(鼠标悬停时),停止循环定时器并显示翻页标签
        stop();
        $('.slider-page').show()
    }, function() {
        // 第二个函数(鼠标离开时),隐藏翻页标签并开启循环定时器
        $('.slider-page').hide();
        start()
    });
    // 给导航点添加悬停事件.
    $('.slider-item').hover(function(e) {
        // 第一个函数(鼠标悬停时),停止循环定时器,定义变量preIndex获取当前正在显示的图片索引位,并给鼠标悬停的导航点的索引值赋给变量currentIndex,执行play()函数隐藏preIndex索引位标签,显示currentIndex索引位标签.
        stop();
        var preIndex = $(".slider-item").filter(".slider-item-selected").index();
        currentIndex = $(this).index();
        play(preIndex, currentIndex)
    }, function() {
        // 第二个函数(鼠标离开时),开始循环定时器.
        start()
    });
    // 取消上一页标签的点击事件(???不理解,此事尚未绑定何来解绑?)
    $('.slider-pre').unbind('click');
    // 给上一页标签绑定点击事件.
    $('.slider-pre').bind('click', function() {
        pre()
    });
    // 同上 取消再绑定点击事件
    $('.slider-next').unbind('click');
    $('.slider-next').bind('click', function() {
        next()
    });
    // 创建翻上页事件中需要执行的函数体.
    function pre() {
        // 创建变量preIndex并获取当前显示图片的索引值下标.
        var preIndex = currentIndex;
        // 改变当前下标变量currentIndex的值为,上一页的索引值,此公式为(当前下标数-1 + 图片总数4) %余 图片总数4.
        // 如当前下标为0,新的下标位应该是3,也就是第四张图片, （0-1+4）%4 = 3,其他位置也可用此公式推算出来.
        // 取余公式 a % b, 如果a大于b,余为a-b的整倍数所剩余的数,粒：10%3 = 1, 10-3*3 = 1.
        // 如a小于b,则余为a自身,粒：2%3 = 2, 如等于则余0.
        currentIndex = (--currentIndex + length) % length;
        // 执行play()函数隐藏preIndex索引位标签,显示currentIndex索引位标签.
        play(preIndex, currentIndex)
    }
    // 创建翻下页事件中需要执行的函数体.
    function next() {
        // 与上一页类似
        var preIndex = currentIndex;
        currentIndex = ++currentIndex % length;
        play(preIndex, currentIndex)
    }
    // 创建play()函数
    function play(preIndex, currentIndex) {
        // 形参preindex为旧坐标,currentIndex为需要更新的新坐标位.
        // fadeOut淡出旧坐标位图片标签,速度500毫秒,链式调用继续寻找就坐标父级的全部子集标签后选中新坐标位标签,并fadeIn渐入显示区,速度1000毫秒.
        // 找就坐标父级再找子级是因为其他方法只能选中自身或除自身外的标签,如此寻找新坐标位时基数不对.
        $('.slider-panel').eq(preIndex).fadeOut(500).parent().children().eq(currentIndex).fadeIn(1000);
        // 移除导航点标签的‘选中’样式的类属性.
        $('.slider-item').removeClass('slider-item-selected');
        // 给新坐标位的对应导航点添加"选中"样式的类属性.
        $('.slider-item').eq(currentIndex).addClass('slider-item-selected')
    }
    // 创建开始循环定时器函数.
    function start() {
        // 如果定时器开关为false.修改定时器开关为ture,并给定时器interval设置循环体,函数为翻下页使用的函数,间隔时间t.
        if (!hasStarted) {
            hasStarted = true;
            interval = setInterval(next, t)
        }
    }
    // 创建停止循环函数.
    function stop() {
        // 取消循环定时器interval.并修改定时器开关为false,供开始循环函数判断使用.
        clearInterval(interval);
        hasStarted = false
    }
    // 执行开始循环函数.
    start()
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

轮播图jQuery版带导航点



代码描述：转发学明白的代码，并添加自己的理解，方便记录

此轮播图代码翻阅自 ‘凌未风’的作品,发布只是增加了一些自己的注释，方便日后查看理解.

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Destiny_Raymond

相关代码