Website focus map is a form of display of website content. It can be simply understood as one or more pictures displayed on a web page, which is the website focus map. In a very obvious position on the website, it is played in the form of a combination of pictures, which is similar to the focus news but with pictures added. It is generally used on the homepage of the website or the homepage of the channel. Because it is in the form of pictures, it has a certain degree of attractiveness and visual appeal. It is easy to cause visitors to click. According to the survey statistics of foreign design agencies, the click-through rate of website focus images is significantly higher than that of pure text, and the conversion rate is 5 times higher than that of text titles. From this point of view, focus pictures can greatly improve visitors’ first impression of the company. Let me introduce to you a beautiful and atmospheric full-screen focus picture packaged and used in our project. As shown below:
You can add multiple pictures, set picture links, and navigate to switch pictures as you move the mouse. When publishing an article, the pictures will be compressed and distorted.
To use this special effect, you first need to introduce the use of jquery. The plug-in has been encapsulated into a jquery function. The code is as follows:
/*
* jQuery图片轮播(焦点图)插件
*/
(function ($) {
$.fn.slideBox = function (options) {
var defaults = {
direction: 'left',
duration: 0.6,
easing: 'swing',
delay: 3,
startIndex: 0,
hideClickBar: true,
clickBarRadius: 5,
hideBottomBar: false
};
var settings = $.extend(defaults, options || {});
var wrapper = $(this),
ul = wrapper.children('ul.items'),
lis = ul.find('li'),
firstPic = lis.first().find('img');
var li_num = lis.size(),
li_height = 0,
li_width = 0;
var order_by = 'ASC';
var init = function () {
if (!wrapper.size()) return false;
li_height = lis.first().height();
li_width = lis.first().width();
wrapper.css({
width: li_width + 'px',
height: li_height + 'px'
});
lis.css({
width: li_width + 'px',
height: li_height + 'px'
});
if (settings.direction == 'left') {
ul.css('width', li_num * li_width + 'px')
} else {
ul.css('height', li_num * li_height + 'px')
};
ul.find('li:eq(' + settings.startIndex + ')').addClass('active');
if (!settings.hideBottomBar) {
var tips = $('
').css('opacity', 0.6).appendTo(wrapper);
var title = $('
').html(function () {
var active = ul.find('li.active').find('a'),
text = active.attr('title'),
href = active.attr('href');
return $('
').attr('href', href).text(text)
}).appendTo(tips);
var nums = $('').hide().appendTo(tips);
lis.each(function (i, n) {
var a = $(n).find('a'),
text = a.attr('title'),
href = a.attr('href'),
css = '';
i == settings.startIndex && (css = 'active');
$('').attr('href', href).text(text).addClass(css).css('borderRadius',
settings.clickBarRadius 'px').mouseover(function () {
$(this).addClass('active').siblings().removeClass('active');
ul.find('li:eq(' $(this).index() ')').addClass('active').siblings
().removeClass('active');
start();
stop()
}).appendTo(nums)
});
if (settings.hideClickBar) {
tips.hover(function () {
nums.animate({
top: '0px'
},
'fast')
},
function () {
nums.animate({
top: tips.height() 'px'
},
'fast')
});
nums.show().delay(2000).animate({
top: tips.height() 'px'
},
'fast')
} else {
nums.show()
}
};
lis.size() > 1 && start()
};
var start = function () {
var active = ul.find('li.active'),
active_a = active.find('a');
var index = active.index();
if (settings.direction == 'left') {
offset = index * li_width * -1;
param = {
'left': offset 'px'
}
} else {
offset = index * li_height * -1;
param = {
'top': offset 'px'
}
};
wrapper.find('.nums').find('a:eq(' index ')').addClass('active').siblings().removeClass
('active');
wrapper.find('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr
('title'));
ul.stop().animate(param, settings.duration * 1000, settings.easing,
function () {
active.removeClass('active');
if (order_by == 'ASC') {
if (active.next().size()) {
active.next().addClass('active')
} else {
order_by = 'DESC';
active.prev().addClass('active')
}
} else if (order_by == 'DESC') {
if (active.prev().size()) {
active.prev().addClass('active')
} else {
order_by = 'ASC';
active.next().addClass('active')
}
}
});
wrapper.data('timeid', window.setTimeout(start, settings.delay * 1000))
};
var stop = function () {
window.clearTimeout(wrapper.data('timeid'))
};
wrapper.hover(function () {
stop()
},
function () {
start()
});
var imgLoader = new Image();
imgLoader.onload = function () {
imgLoader.onload = null;
init()
};
imgLoader.src = firstPic.attr('src')
}
})(jQuery);
下面是图片焦点图的css样式;
div.slideBox{ position:relative;height:300px; overflow:hidden; margin:0 auto;}
div.slideBox ul.items{ position:absolute; float:left; background:none; list-style:none; padding:0px; margin:0px;}
div.slideBox ul.items li{ float:left; background:none; list-style:none; padding:0px; margin:0px;}
div.slideBox ul.items li a{ float:left; line-height:normal !important; padding:0px !important; border:none/*For IE.ADD.JENA.201206300844*/;}
div.slideBox ul.items li a img{ margin:0px !important; padding:0px !important; display:block; border:none/*For IE.ADD.JENA.201206300844*/;}
div.slideBox div.tips{ position:absolute; bottom:0px; width:100%; height:50px; background-color:#000; overflow:hidden;}
div.slideBox div.tips div.title{ position:absolute; left:0px; top:0px; height:100%;}
div.slideBox div.tips div.title a{ color:#FFF; font-size:18px; line-height:50px; margin-left:10px; text-decoration:none;}
div.slideBox div.tips div.title a:hover{ text-decoration:underline !important;}
div.slideBox div.tips div.nums{ position:absolute; right:0px; top:0px; height:100%;}
div.slideBox div.tips div.nums a{ display:inline-block; >float:left/*For IE.ADD.JENA.201206300844*/; width:20px; height:20px; background-color:#FFF; text-indent:-99999px; margin:15px 10px 0px 0px;}
div.slideBox div.tips div.nums a.active{ background-color:#093;}
页面配置：
只需引入js并在页面中调用$(选择器).slideBox();便可实现如上效果，同时我们也可以在sliebox({})里面指定操作，比如起始图片，方向等。
这个是在前段时间一个项目中用到的图片轮播器插件，感觉还可以的可以直接拿来用。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
