演示地址：http://dabaixiaowo2015.freehost4u.org/
html代码：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link href="indexjscss/horizontal.css" rel="stylesheet" />
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div id="app">
<div id="wrapper-sliderTv">
<!-- sliderTV html-->
<div id="sliderTV" class="sliderTV">
<!-- slidable items in carousel -->
<div id="item-0" class="sliderTV__item">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Amélie</h1>
</div>
<div id="item-1" class="sliderTV__item">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Django Unchained</h1>
</div>
<div id="item-2" class="sliderTV__item">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Fight Club</h1>
</div>
<div id="item-3" class="sliderTV__item">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Forrest Gump</h1>
</div>
<div id="item-4" class="sliderTV__item">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>学 多 多</h1>
</div>
<div id="item-5" class="sliderTV__item">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Gump Forrest</h1>
</div>
<div id="item-6" class="sliderTV__item">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Interstellar</h1>
</div>
<div id="item-7" class="sliderTV__item">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Léon: The Professional</h1>
</div>
<div id="item-8" class="sliderTV__item">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>San Andreas</h1>
</div>
<div id="sliderTV__mask-left"></div>
<div id="sliderTV__mask-right"></div>
<!-- optional navigational arrows -->
<div class="sliderTV__prev">❰</div>
<div class="sliderTV__next">❱</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="indexjscss/sliderTV.js"></script>
<script src="indexjscss/horizontal.js"></script>
</body>
</html>
链接直接加就行。打开链接看这个，你这个网址还不给外链资源，外链返回空白内容。。。o(╥﹏╥)o
$('body').keydown(function (e) {
switch (e.keyCode) {
case 37:
// keypad arrow left
$('#sliderTV').trigger('move:prev');
break;
case 39:
// keypad arrow right
$('#sliderTV').trigger('move:next');
break;
case 13:
window.open($('#sliderTV').find('.sliderTV--focus a').attr('href'));
break;
}
});
显示保持一致的话要将a链接的下划线去掉，加链接后默认有个下划线，将下面加粗的css放到horizontal.css文件里面，或者直接内嵌到html中也行
<style>
#sliderTV a{text-decoration:none}
</style>
<body>
<div id="app">
<div id="wrapper-sliderTv">
<!-- sliderTV html-->
<div id="sliderTV" class="sliderTV">
<!-- slidable items in carousel -->
<div id="item-0" class="sliderTV__item">
<a href="http://news.163.com">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Amélie</h1>
</a>
</div>
<div id="item-1" class="sliderTV__item">
<a href="http://www.baidu.com">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Django Unchained</h1>
</a>
</div>
<div id="item-2" class="sliderTV__item">
<a href="http://news.163.com">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Fight Club</h1>
</a>
</div>
<div id="item-3" class="sliderTV__item">
<a href="http://www.baidu.com">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Forrest Gump</h1>
</a>
</div>
<div id="item-4" class="sliderTV__item">
<a href="http://www.baidu.com">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>学 多 多</h1>
</a>
</div>
<div id="item-5" class="sliderTV__item">
<a href="http://news.163.com">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Gump Forrest</h1>
</a>
</div>
<div id="item-6" class="sliderTV__item">
<a href="http://www.baidu.com">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Interstellar</h1>
</a>
</div>
<div id="item-7" class="sliderTV__item">
<a href="http://news.163.com">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>Léon: The Professional</h1>
</a>
</div>
<div id="item-8" class="sliderTV__item">
<a href="http://www.baidu.com">
<img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg">
<h1>San Andreas</h1>
</a>
</div>
<div id="sliderTV__mask-left"></div>
<div id="sliderTV__mask-right"></div>
<!-- optional navigational arrows -->
<div class="sliderTV__prev">❰</div>
<div class="sliderTV__next">❱</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>
/*! SliderTV | The MIT License (MIT) | Copyright (c) 2016 GibboK */
!function (t, i, s) { "use strict"; function e(t, i) { this._id = null, this._midPoints = { x: null, y: null }, this._itemDoms = [], this._focus = null, this._prevDom = null, this._nextDom = null, this._canCheckMovePrevNext = !0, this._isAnimationOn = !1, this.init(t, i) } var n = "sliderTV", o = { animation: { duration: 400, easing: "linear", isVertical: !1 }, bullets: { canShow: !0 } }; e.prototype = { init: function (i, s) { this.element = i, this.defaults = o, this.options = t.extend({}, o, s), this._getId(), this._listen(this), this._getItemDoms(), this._setItemPositions(), this._calculateMidPoint(), this._setFocus(0), this._createBullets(), this._getBullets(), this._updateBullets(), this._getNavigation(), this._showHidePrevNext() }, _getId: function () { this._id = t(this.element).attr("id") }, _listen: function () { t(this.element).on("move:next", function (t) { this._moveTo({ to: "move:next" }) }.bind(this)), t(this.element).on("move:prev", function (t) { this._moveTo({ to: "move:prev" }) }.bind(this)), t(this.element).on("move:jump", function (t, i) { this._moveTo(i) }.bind(this)) }, _calculateMidPoint: function () { var i = t(this.element), s = t(i).offset(); this._midPoints.x = s.left + i.outerWidth() / 2, this._midPoints.y = s.top + i.outerHeight() / 2 }, _getItemDoms: function () { this._itemDoms = t(this.element).find(".sliderTV__item") }, _setItemPositions: function () { if (this.options.animation.isVertical === !1) { var i = 0, s = 0; this._itemDoms.each(function (e, n) { s = t(n).width(); var o = { position: "absolute", left: i, width: s }; t(n).css(o), i += s }) } else { var e = 0, n = 0; this._itemDoms.each(function (i, s) { n = t(s).height(); var o = { position: "absolute", top: e, height: n }; t(s).css(o), e += n }) } }, _setFocus: function (i) { this._removeFocus(), this._focus = i, this._itemDoms.each(function (i, s) { i === this._focus && t(s).addClass("sliderTV--focus") }.bind(this)) }, _removeFocus: function () { null !== this._focus && (t(this._itemDoms[this._focus]).removeClass("sliderTV--focus"), this._focus = null) }, _createBullets: function () { if (this.options.bullets.canShow !== !1) { var i = ""; i += '<div id="' + this._id + '__bullets" class="sliderTV__bullets">', this._itemDoms.each(function (t, s) { i += '<div class="sliderTV__bullet"></div>' }.bind(this)), i += "</div>", this._bulletsDom = t(i), t(this.element).append(this._bulletsDom) } }, _getBullets: function () { this.options.bullets.canShow !== !1 && (this._bulletsDoms = t(this.element).find(".sliderTV__bullet")) }, _updateBullets: function () { if (this.options.bullets.canShow !== !1) { this._deactiveBullets(); var i = "sliderTV__bullet--active"; this._bulletsDoms.each(function (s, e) { if (s === this._focus) t(e).addClass(i); else { var n = t(e).hasClass(); n && t(e).removeClass(i) } }.bind(this)) } }, _deactiveBullets: function () { if (this.options.bullets.canShow !== !1) { var i = "sliderTV__bullet--active"; this._bulletsDoms.each(function (s, e) { var n = t(e).hasClass(i); n && t(e).removeClass(i) }.bind(this)) } }, _getNavigation: function () { var i = t(this.element).find(".sliderTV__next"), s = t(this.element).find(".sliderTV__prev"), e = i.length > 0, n = s.length > 0; e && (this._nextDom = i[0]), n && (this._prevDom = s[0]), e && n && (this._canCheckMovePrevNext = !0) }, _showHidePrevNext: function () { if (this._canCheckMovePrevNext) { var i = "visibility", s = "hidden", e = "visible", n = this._itemDoms.length; 0 === n ? (this._prevDom.css(i, s), this._nextDom.css(i, s)) : 0 === this._focus ? (t(this._prevDom).css(i, s), t(this._nextDom).css(i, e)) : this._focus === n - 1 ? (t(this._prevDom).css(i, e), t(this._nextDom).css(i, s)) : (t(this._prevDom).css(i, e), t(this._nextDom).css(i, e)) } }, _isItemExists: function (t) { return Boolean(this._itemDoms[t]) }, _moveTo: function (i) { this._calculateMidPoint(); var s, e = i.to, n = "canAnimate" in i ? i.canAnimate : !0, o = n ? this.options.animation.duration : 0, h = this.options.animation.easing, l = !0, a = this._focus; if ("move:next" === e ? a++ : "move:prev" === e ? a-- : "number" == typeof e ? a = e : l = !1, s = this._isItemExists(a), l && s && !this._isAnimationOn) { var _, m, u = t(this._itemDoms[a]), c = "move:next" === e ? 1 : -1, r = 1 === c ? "-=" : "+="; this.options.animation.isVertical === !1 ? (_ = u.outerWidth() / 2, m = (u.offset().left - this._midPoints.x + _) * c) : (_ = u.outerHeight() / 2, m = (u.offset().top - this._midPoints.y + _) * c), this._setFocus(a), this._updateBullets(), this._showHidePrevNext(), t(this.element).trigger("animation:start"), this.options.animation.isVertical === !1 ? this._itemDoms.each(function (i, s) { this._isAnimationOn = !0, t(s).animate({ left: r + m }, o, h, function () { this._isAnimationOn = !1, t(this.element).trigger("animation:end") }.bind(this)) }.bind(this)) : this._itemDoms.each(function (i, s) { this._isAnimationOn = !0, t(s).animate({ top: r + m }, o, h, function () { this._isAnimationOn = !1, t(this.element).trigger("animation:end") }.bind(this)) }.bind(this)), this._showHidePrevNext() } } }; t.fn[n] = function (i) { return this.each(function () { t.data(this, "plugin_" + n) || t.data(this, "plugin_" + n, new e(this, i)) }) }, t.fn[n].defaults = o }(jQuery, window, document);
</script>
<script>
$(function () {
/*
* Example for a horizontal slider for Smart TV apps using jQuery plugin SliderTV.
*/
// you can optionally change sliderTV plugin defaults here
//$.fn.sliderTV.defaults.animation.isVertical = true; // animation direction
//$.fn.sliderTV.defaults.animation.duration = 250; // animation duration
//$.fn.sliderTV.defaults.animation.easing = 'swing'; // animation type
//$.fn.sliderTV.defaults.bullets.canShow = true; // show bullet elements
// let's initiate sliderTV plugin
$('#sliderTV').sliderTV();
// at first focus on the fifth item sliding the carousel,
// notice canAnimate: false, which prevents the animation after initialization
$('#sliderTV').trigger('move:jump', { to: 4, canAnimate: false });
// in your real world smart tv application you can listen to events from remote control,
// in this demo we just listen to keypad arrow left and right
$('body').keydown(function (e) {
switch (e.keyCode) {
case 37:
// keypad arrow left
$('#sliderTV').trigger('move:prev');
break;
case 39:
// keypad arrow right
$('#sliderTV').trigger('move:next');
break;
case 13:
window.open($('#sliderTV').find('.sliderTV--focus a').attr('href'));
break;
}
});
// listen to click events for particular html elements,
// as for example the navigation arrows (useful when implementing lg magic control)
$('.sliderTV__next').click(function () {
// slide to next item
$('#sliderTV').trigger('move:next');
});
$('.sliderTV__prev').click(function () {
// slide to previous item
$('#sliderTV').trigger('move:prev');
});
$('#help__input').change(function (event) {
// slide to a specific item, useful to slide the carousel programmatically
$('#sliderTV').trigger('move:jump', { to: parseInt(event.target.value) });
});
// listen to events emitted by sliderTV plugin,
// in this code below, we are "listening" to whenever the sliding animation starts and ends
$('#sliderTV').on('animation:start', function () {
console.clear();
console.log('sliderTV animation has started');
});
$('#sliderTV').on('animation:end', function () {
console.clear();
console.log('sliderTV animation has finished');
});
});
</script>
</body>
你给img图片外加一层a标签就行href设置好地址，然后监听键盘事件，在事件里获取当前选中图片的dom。然后模拟点击
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps: 问答会员年卡【8折】购 ，限时加赠IT实体书，即可 享受50次 有问必答服务，了解详情>>>https://t.csdnimg.cn/RW5m