61,112
社区成员
发帖
与我相关
我的任务
分享求大佬教！！！怎么写几个图片并列加滚动，点击之后弹出一个窗口，窗口可以是视频可以是图片
怎么写几个图片并列加滚动，点击之后弹出一个窗口，窗口可以是视频可以是图片
类似这样的并列滚动
类似这样的并列滚动
...全文
请发表友善的回复…
发表回复
jjuugk 2018-08-04
- 打赏
- 举报
还有那个弹出小窗口怎么写呢？，滚动大概懂了
winzond 2018-08-04
- 打赏
- 举报
http://www.runoob.com/bootstrap4/bootstrap4-carousel.htmlwinzond 2018-08-03
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<title>Photomatic Test</title>
<link rel="stylesheet" type="text/css"
href="../../styles/core.css">
<link rel="stylesheet" type="text/css" href="photomatic.css">
<script type="text/javascript"
src="../../scripts/jquery-1.4.js"></script>
<script type="text/javascript"
src="jquery.jqia.photomatic.js"></script>
<script type="text/javascript">
$(function(){
$('#thumbnailsPane img').photomatic({
photoElement: '#photoDisplay',
previousControl: '#previousButton',
nextControl: '#nextButton',
firstControl: '#firstButton',
lastControl: '#lastButton',
playControl: '#playButton',
delay: 1000
});
});
</script>
</head>
<body class="fancy">
<div id="pageContainer">
<div id="pageContent">
<h1>Photomatic Tester</h1>
<div id="thumbnailsPane">
<img src="thumbnails/IMG_2212.jpg"/>
<img src="thumbnails/IMG_2222.jpg"/>
<img src="thumbnails/IMG_2227.jpg"/>
<img src="thumbnails/IMG_2235.jpg"/>
<img src="thumbnails/IMG_2259.jpg"/>
<img src="thumbnails/IMG_2269.jpg"/>
<img src="thumbnails/IMG_2273.jpg"/>
<img src="thumbnails/IMG_2287.jpg"/>
<img src="thumbnails/IMG_2292.jpg"/>
<img src="thumbnails/IMG_2296.jpg"/>
<img src="thumbnails/IMG_2298.jpg"/>
<img src="thumbnails/IMG_2302.jpg"/>
<img src="thumbnails/IMG_2310.jpg"/>
<img src="thumbnails/IMG_2319.jpg"/>
<img src="thumbnails/IMG_2331.jpg"/>
<img src="thumbnails/IMG_2335.jpg"/>
</div>
<div id="photoPane">
<img id="photoDisplay" src=""/>
</div>
<div id="buttonBar">
<img src="button.placeholder.png" id="firstButton"
alt="First" title="First photo"/>
<img src="button.placeholder.png" id="previousButton"
alt="Previous" title="Previous photo"/>
<img src="button.placeholder.png" id="playButton"
alt="Play/Pause" title="Play or pause slideshow"/>
<img src="button.placeholder.png" id="nextButton"
alt="Next" title="Next photo"/>
<img src="button.placeholder.png" id="lastButton"
alt="Last" title="Last photo"/>
</div>
</div>
</div>
</body>
</html>(function($){
$.fn.photomatic = function(options) {
var settings = $.extend({
photoElement: 'img.photomaticPhoto',
transformer: function(name) {
return name.replace(/thumbnail/,'photo');
},
nextControl: null,
previousControl: null,
firstControl: null,
lastControl: null,
playControl: null,
delay: 3000
},options||{});
function showPhoto(index) {
$(settings.photoElement)
.attr('src',
settings.transformer(settings.thumbnails$[index].src));
settings.current = index;
}
settings.current = 0;
settings.thumbnails$ = this.filter('img');
settings.thumbnails$
.each(
function(n){ $(this).data('photomatic-index',n); }
)
.click(function(){
showPhoto($(this).data('photomatic-index'));
});
$(settings.photoElement)
.attr('title','Click for next photo')
.css('cursor','pointer')
.click(function(){
showPhoto((settings.current+1) % settings.thumbnails$.length);
});
$(settings.nextControl).click(function(){
showPhoto((settings.current+1) % settings.thumbnails$.length);
});
$(settings.previousControl).click(function(){
showPhoto((settings.thumbnails$.length+settings.current-1) %
settings.thumbnails$.length);
});
$(settings.firstControl).click(function(){
showPhoto(0);
});
$(settings.lastControl).click(function(){
showPhoto(settings.thumbnails$.length-1);
});
$(settings.playControl).toggle(
function(event){
settings.tick = window.setInterval(
function(){ $(settings.nextControl).triggerHandler('click'); },
settings.delay);
$(event.target).addClass('photomatic-playing');
$(settings.nextControl).click();
},
function(event){
window.clearInterval(settings.tick);
$(event.target).removeClass('photomatic-playing');
});
showPhoto(0);
return this;
};
})(jQuery);
#pageContainer {
width: 900px;
background-color: transparent;
border-width: 0;
}
h1 {
margin: 0 0 32px 64px !important;
}
#thumbnailsPane {
float: left;
width: 175px;
height: 462px;
overflow: auto;
border: 2px ridge #00457b;
margin-right: 10px;
background-color: black;
}
#buttonBar {
clear: both;
text-align: center;
margin-left: 188px;
}
#buttonBar img {
cursor: pointer;
}
#photoDisplay {
border: 1px solid black;
background-color: white;
padding: 16px 16px 24px 16px;
}
img#firstButton {
background: url(button.first.png) no-repeat;
}
img#lastButton {
background: url(button.last.png) no-repeat;
}
img#previousButton {
background: url(button.previous.png) no-repeat;
}
img#nextButton {
background: url(button.next.png) no-repeat;
}
img#playButton {
background: url(button.play.png) no-repeat;
}
img#playButton.photomatic-playing {
background: url(button.pause.png) no-repeat;
}
jjuugk 2018-08-03
- 打赏
- 举报
各位大佬可以写个例子我看看么，自己来有点逻辑不通
葉幺 2018-08-03
- 打赏
- 举报
首先弄个数组叫图片放进去，然后点击左右按钮的时候数组里面的下标++或--，加到最后一个的时候就等于第一个，减到第一个的时候就等于最后的一个。 然后设一个div放点击后显示的，先把这个div隐藏，点击后显示 然后把点击那张图片放进去，点击关闭按钮的时候隐藏div
winzond 2018-08-03
- 打赏
- 举报
单纯的JS很难写，建议你用jQuery，买本jQuery实战，里面有类似案例
