如何添加单击事件以将您带到幻灯片上的某个图像
How can I add a click event to take you to a certain image on a slide
我有一张幻灯片，里面有一本数码书的图像，分为三章。滑块正在工作，但我如何在html中的"Chapter"div上添加单击事件，以便当我单击它们时，它滚动到滑块中的正确位置。即，如果您点击第2章，它将带您进入第2章开始的幻灯片。这是使用jquery。
HTML
<div class="chapters">
<div class="chapterOne">
<h3>Stony Brook Medicine</h3>
<h4>Chapter 1</h4>
</div>
<div class="chapterTwo">
<h3>Stony Brook Childrens</h3>
<h4>Chapter 2</h4>
</div>
<div class="chapterThree">
<h3>Working together while standing out</h3>
<h4>Chapter 3</h4>
</div>
</div>
</div>
<div class="sliderContainer">
<ul>
<li class="chapterOneSlide">
<img src="http://placehold.it/875x369/F44D5E"><a class="arrow next">⟩</a>
</li>
<li class="chapterOneSlide">
<img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterOneSlide">
<img src="http://placehold.it/875x369/56DC28"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterOneSlide">
<img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterOneSlide">
<img src="http://placehold.it/875x369/56DC28"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterOneSlide">
<img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterOneSlide">
<img src="http://placehold.it/875x369/56DC28"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterOneSlide">
<img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterOneSlide">
<img src="http://placehold.it/875x369/56DC28"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterTwoSlide">
<img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterTwoSlide">
<img src="http://placehold.it/875x369/56DC28"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterTwoSlide">
<img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterTwoSlide">
<img src="http://placehold.it/875x369/56DC28"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterTwoSlide">
<img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterThreeSlide">
<img src="http://placehold.it/875x369/56DC28"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterThreeSlide">
<img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterThreeSlide">
<img src="http://placehold.it/875x369/56DC28"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterThreeSlide">
<img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">⟩</a><a class="arrow prev">⟨</a>
</li>
<li class="chapterThreeSlide">
<img src="http://placehold.it/875x369/E5A470"><a class="arrow prev">⟨</a>
</li>
</ul>
</div>
和jquery
$(window).load(function () {
var theImage = $('ul li img');
var theWidth = theImage.width()
//wrap into mother div
$('ul').wrap('<div id="mother" />');
//assign height width and overflow hidden to mother
$('#mother').css({
width: function () {
return theWidth;
},
height: function () {
return theImage.height();
},
position: 'relative',
overflow: 'hidden'
});
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$('ul').css({
width: function () {
return totalWidth;
}
});
$(theImage).each(
function (intIndex) {
$(this).nextAll('a')
.bind("click", function () {
if ($(this).is(".next")) {
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex + 1) * theWidth)
}, 1000)
} else if ($(this).is(".prev")) {
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex - 1) * theWidth)
}, 1000)
} else if ($(this).is(".startover")) {
$(this).parent('li').parent('ul').animate({
"margin-left": (0)
}, 1000)
}
}); //close .bind()
}); //close .each()
});
CSS
.sliderContainer {
border: 2px solid black;
width: 875px;
height: 369px;
position: relative
}
.sliderContainer:hover .arrow {
opacity: 1;
transition: all .5s ease-out;
-webkit-transition: all .5s ease-out;
}
.arrow {
text-align: center;
line-height: 50px;
color: #fff;
width: 50px;
height: 50px;
background-color: rgba(183,3,3,0.5);
cursor: pointer;
z-index: 99;
top: 162px;
position: absolute;
}
.next {
right: 0;
opacity: 0;
}
.prev {
left: 0;
opacity: 0;
}
ul {
padding: 0;
margin:0;
}
ul li {
float:left;
list-style:none;
position:relative;
}
您也可以只使用CSS来完成JS Fiddle，只需将.chapters内部div更改为a标签，并在每张幻灯片的第一张幻灯片中设置目标a href="#foo" li id="foo"，它就会跳到那个章节，并具有轻微的褪色效果
CSS:
:target {
animation: slideFadeIn 2s ease;
}
@keyframes slideFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
相关文章：
- 我可以使此幻灯片图像自动播放吗?
- 在滑块内动态添加幻灯片图像
- 幻灯片图像在页面加载时弹出
- 来自数据库的幻灯片图像
- 如何在Javascript中用URL链接不同的幻灯片图像
- JavaScript渐变幻灯片-图像链接
- 将特定html文件上的幻灯片图像调整为移动屏幕
- 设置幻灯片图像间隔
- 如何在加载时隐藏幻灯片图像
- 背景轮播，用于在幻灯片图像中包含 DIV
- 使用nivoSlider，如何确定当前的幻灯片图像或索引
- 什么是开始使用交互式Javascript幻灯片/图像查看器的简单方法
- Jquery，添加上一个/下一个链接对幻灯片图像的效果
- 幻灯片图像可以在本地使用，但不能在我的网站上使用
- 单击幻灯片图像以强制执行一步
- 使幻灯片图像从第一个到最后
- IE8解决方案的圆角幻灯片图像
- 有没有办法保护我的幻灯片图像?
- 为什么此幻灯片图像没有't跑?这很奇怪
- jQuery幻灯片图像转换
