Question

它再次成为我:)今天我正在尝试使用文本导航开发滑动div，我的意思是我可以编辑nav不仅生成的子弹。假设我们有三个div包含图像和文本，我需要将三个不同链接的导航菜单居中...如果你可以帮助我，如果当前滑块是3号并且我点击了{ {1}}项目编号1我希望它在滚动期间跳转到1而不会看到2

这是我需要学习如何开发它的原始代码http://www.alfaromeo.co.uk/models/giulietta#dynamism

链接到类似文章或任何一般帮助将非常感激

＆＃13;

nav

＆＃13;

.item--mobile .slider-item__wrap{height:300px;overflow:hidden}
.row-slide,.row-wrap{*zoom:1;clear:both;position:relative}
.row-slide:before,.row-slide:after,.row-wrap:before,.row-wrap:after{content:" ";display:table}
.row-slide:after,.row-wrap:after{clear:both}
.row-slide .content__text .animated-line,.row-wrap .content__text .animated-line{top:12px}

@media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
@media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}

＆＃13;

Answer 1

看起来你想开发一个 carousel 。

有几个javascript和jQuery轮播，例如Slick和 jCarousel

使用插件或其他人的解决方案会更容易。下载其中一个示例，并按照网站的说明将其集成到您自己的网站中。

否则，使用浏览器的开发人员工具或脚本调试功能来研究您指向的网站的脚本。您还可以学习jCarousel和Slick的代码，例如，或任何库。

这是一个非常简单的自定义轮播示例，我将它放在一起，你可以学习。它使用渐进增强并利用滚动功能，即使没有javascript用户仍然可以获得体面的体验，并可以翻阅内容。（例如，您可以轻松地通过交换图像来定制它以隐藏滚动条。）

主要部分是：1）样式，以便一次只显示一个内容面板，以及2）用户导航时动画面板滑动动画的逻辑。

select ip, group_concat(user_name) as users
from ips
group by ip
having count(*) > 1

$(".slider-menu a").on("click", function() {
  var $current = $(".slide.current");
  var $li = $(this).closest("li");
  var idx = $li.index();
  if (idx !== $current.index()) {
    $(".slider-menu li.current").removeClass("current");
    $li.addClass("current");
    var $next = $(".slide").eq(idx);
    $current.removeClass("current");
    $next.addClass("current");
    var $carousel = $(".slider-item-wrap");
    var left = $carousel[0].scrollLeft + $next.position().left;
    $carousel.animate({
      scrollLeft: left
    }, 500);
  }
});

html,
body,
.row-slide,
.slider-item-wrap {
  margin: 0;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0;
  color: #fff;
  overflow: hidden;
}
.row-slide {} .slider-item-wrap {
  white-space: nowrap;
  overflow: auto;
  overflow-y: hidden;
}
.slide {
  width: 100%;
  height: 100%;
  font-size: 24px;
  display: inline-block;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.red {
  background-color: red;
}
.slider-menu {
  position: absolute;
  margin: 0 auto;
  width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  bottom: 20px;
}
.slider-menu ul {
  list-style: none;
  overflow: auto;
  margin: 0 auto;
  border: 0;
  padding: 20px;
  text-align: center;
}
.slider-menu li {
  padding: 4px 20px;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.slider-menu li:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: #222;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.slider-menu li.current,
.slider-menu li.current:hover {
  background-color: rgba(0, 0, 0, .2);
  color: #333;
  box-shadow: 0 0;
}

用文本导航滑动div

1 个答案: