全屏焦点图展示

Html

Css

* {
	margin:0;
	padding:0
}
#banner {
	width:100%;
	height:380px;
	position:relative;
	overflow:hidden;
}
#banner ul {
	width:1000%;
	height:380px;
	position:absolute;
	left:0%;
	top:0;
}
#banner li {
	width:10%;
	height:380px;
	list-style-type:none;
	background:url('images/74/1.jpg') no-repeat center top;
	float:left;
}
#banner span {
	width:100px;
	height:100px;
	font-size:100px;
	color:white;
	position:absolute;
	left:100px;
	top:140px;
	text-align:center;
	line-height:100px;
	font-weight:bold;
	cursor:pointer;
	display:none;
}
#banner span.next-btn {
	right:100px;
	left:auto;
}

$(function() {
    var index = 0; //当前播放图片的索引值
    var timer;

var bgs = [
        'http://www.jq22.com/img/cs/500x300-1.png',
        'http://www.jq22.com/img/cs/500x300-2.png',
        'http://www.jq22.com/img/cs/500x300-3.png',
        'http://www.jq22.com/img/cs/500x300-4.png'
    ];
    var bgColors = ['#00aeff', '#00ab48', '#9c5dae', '#ae895d'];

$('#banner li').each(function(index, el) {
        $(el).css({
            'background-image': 'url(' + bgs[index] + ')',
            'background-color': bgColors[index]
        });
    });

//当鼠标移动到banner上面的时候，显示左右按钮
    $('#banner').mouseenter(function() {
        //按钮淡入
        $('#banner span').stop(true).fadeIn();

//图片的工作
        clearInterval(timer);
    });

$('#banner').mouseleave(function() {
        //按钮淡出
        $('#banner span').stop(true).fadeOut();

//重启定时器
        timer = setInterval(function() {
            index++;
            index %= $('#banner li').length;

$('#banner ul').animate({
                left: '-' + (index * 100) + '%'
            }, 1000);
        }, 3000);
    });

//向后按钮的功能
    $('#banner .next-btn').click(function() {
        index++;
        index %= $('#banner li').length;
        $('#banner ul').animate({
            left: '-' + (index * 100) + '%'
        }, 1000);
    });

//向前按钮的功能
    $('#banner .prev-btn').click(function() {
        index--;
        if (index < 0) {
            index = $('#banner li').length - 1;
        }
        $('#banner ul').animate({
            left: '-' + (index * 100) + '%'
        }, 1000);
    });

//图片自动播放
    timer = setInterval(function() {
        index++;
        index %= $('#banner li').length;

$('#banner ul').animate({
            left: '-' + (index * 100) + '%'
        }, 1000);
    }, 3000);
})

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

立即下载

全屏焦点图展示



代码描述：这个全屏焦点图，思路清晰，代码易懂，为你写代码节省好多时间

该全屏焦点图有以下特点：
1. 焦点图的路径保存在一个数组里，这样比较容易控制图片的，进行后台管理的时候也比较方便，而且在一定程度上对页面来说是一种优化。
2. 该焦点图为了保证图片一定是整屏显示给页面加了一点保险，就是把图片相对应的盒子的背景色设置为和图片相同颜色的背景色，这样能保证当图片不够大的时候也能完美显示。
3. 全屏焦点图最重要的一点是盒子宽度设置成n+1的宽度。

5

最新

发表评论全部评论

暂时没有评论！

@@空灵@@0

2017/9/5 17:41:11

能问下在你的代码中，加代码会乱，链接错位。该怎么解决啊
回复

bill0

2017/6/16 19:08:02

有一个地方不大好，就是我可以一直点，那么他就一直滑

Sylss0

2017/7/21 9:31:36

这个确实是没做防流氓操作

回复

bill0

2017/6/16 19:06:23

就是把图片相对应的盒子的背景色设置为和图片相同颜色的背景色，
我觉得这点没多大用处，谁的轮播图会是单色的

Sylss0

2017/7/21 9:39:14

首先很感谢您宝贵的意见，之所以要设置一下背景色是因为这个代码是全屏焦点图，更要考虑到全屏，为了防止图片有时过小会造成四周有空隙，所以我认为设置一下背景色也是蛮好的。确实轮播图的图片很多时候不是单色的，但是我们可以参考UI的色彩搭配给搭配一个看起来不错的颜色啊。您觉得呢

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Sylss

相关代码

全屏焦点图展示

该全屏焦点图有以下特点：

最新