如何将控件添加到相对于幻灯片位置向左/向右滚动的自动Jquery幻灯片中
How to add controls to a automatic Jquery slideshow scrolling left/right relative to the slide position
function SlideDivSection(){
var items = ['banner1', 'banner2', 'banner3', 'banner4', 'banner5'];
var container = $('#banner');
var root = document.compatMode == 'BackCompat' ? document.body:document.documentElement;
var isVerticalScrollbar = root.scrollHeight > root.clientHeight;
if(isVerticalScrollbar == false){
var item_width = window.screen.availWidth - 17;
} else {
var item_width = window.screen.availWidth;
}
window.setInterval(function(){
var first = $('.banner:first', container);
var faux_id = first.attr('id')+'faux';
var faux_elem = $($('<div/>').append(first.clone()).html()).attr('id', faux_id).css({
left:item_width * items.length
})
container.append(faux_elem);
faux_elem = $('#'+faux_id, container);
$('.banner', container).animate({
left:'-='+item_width
}, 2000, function(){
first.remove();
faux_elem.attr('id', faux_elem.attr('id').replace('faux', ''))
})
}, 3000)
}
$(function(){
SlideDivSection();
});img, video, canvas{
max-width:100%;
}
.menu{
width:20%;
height:100%;
float:left;
align-self:center;
font:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
.menu a{
color:#FFFFFF;
text-decoration:none;
}
.menu a:hover{
color:#CCCCCC;
}
.submenu{
width:11%;
height:100%;
float:left;
align-self:center;
text-align:center;
}
.submenu a{
text-decoration:none;
}
.submenu a:hover{
}
.banner_botoes{
width:18%;
height:100%;
float:left;
z-index:2;
border-style:solid;
border-width:thin;
border-color:#000000;
border-radius:25px;
}
.banner_botoes:hover{
cursor:pointer;
border-color:#99FFFF;
background-color:#FFFFFF;
}
.banner{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.destaque{
top:0px;
width:25%;
height:100%;
float:left;
}
#container{
position:absolute;
width:100%;
height:1350px;
}
#cabecalho{
top:0px;
width:100%;
height:4%;
display:flex;
justify-content:center;
background-color:rgba(0, 0, 0, 0.8);
}
#cabecalho2_produtos{
position:relative;
width:100%;
height:8%;
display:flex;
justify-content:center;
background-color:#CCCCCC;
}
#cabecalho2_fragrancias{
position:relative;
width:100%;
height:5%;
display:flex;
background-color:#FFFFFF;
}
#cabecalho2_clientes{
position:relative;
width:100%;
height:5%;
display:flex;
background-color:#FFFFFF;
}
#menu{
margin:auto;
width:80%;
}
#conteudo_produtos{
position:relative;
width:100%;
height:68%;
}
#conteudo_fragrancias{
position:relative;
width:100%;
height:65%;
}
#conteudo_clientes{
position:relative;
width:100%;
height:65%;
}
#conteudo_suporte{
position:relative;
width:100%;
height:70%;
}
#banner{
position:relative;
width:100%;
height:47%;
overflow:hidden;
}
#banner_botoes{
position:relative;
left:45%;
top:85%;
width:10%;
height:2%;
z-index:1;
}
#banner2{
left:100%;
background-color:#000000;
}
#banner3{
left:200%;
background-color:#333333;
}
#banner4{
left:300%;
background-color:#666666;
}
#banner5{
left:400%;
background-color:#999999;
}
#destaques{
position:relative;
width:100%;
height:15%;
}
#faixa{
position:relative;
width:100%;
height:6%;
}
#rodape{
position:relative;
width:100%;
height:28%;
background-color:#CCCCCC;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="cabecalho">
<div id="menu">
<div id="menu1" class="menu"><a href="index.php"><b>Home</b></a></div>
<div id="menu2" class="menu"><a href="produtos.php">Produtos</a></div>
<div id="menu3" class="menu"><a href="fragrancias.php">Fragrâncias</a></div>
<div id="menu4" class="menu"><a href="clientes_atividades.php">Clientes e Atividades</a></div>
<div id="menu5" class="menu"><a href="suporte.php">Suporte</a></div>
</div>
</div>
<div id="banner">
<div id="banner_botoes">
<div id="banner_botao1" class="banner_botoes"></div>
<div id="banner_botao2" class="banner_botoes"></div>
<div id="banner_botao3" class="banner_botoes"></div>
<div id="banner_botao4" class="banner_botoes"></div>
<div id="banner_botao5" class="banner_botoes"></div>
</div>
<div id="banner1" class="banner"><img width="100%" height="100%" src="" /></div>
<div id="banner2" class="banner"><img width="100%" height="100%" src="" /></div>
<div id="banner3" class="banner"><img width="100%" height="100%" src="" /></div>
<div id="banner4" class="banner"><img width="100%" height="100%" src="" /></div>
<div id="banner5" class="banner"><img width="100%" height="100%" src="" /></div>
</div>
<div id="destaques">
<div id="destaque1" class="destaque"><img width="100%" height="100%" src="" /></div>
<div id="destaque2" class="destaque"><img width="100%" height="100%" src="" /></div>
<div id="destaque3" class="destaque"><img width="100%" height="100%" src="" /></div>
<div id="destaque4" class="destaque"><img width="100%" height="100%" src="" /></div>
</div>
<div id="faixa"><img width="100%" height="100%" src="" /></div>
<div id="rodape"></div>
</div>我有以下Jquery幻灯片：
function SlideDivSection(){
var items = ['banner1', 'banner2', 'banner3', 'banner4', 'banner5'];
var container = $('#banner');
var root = document.compatMode == 'BackCompat' ? document.body:document.documentElement;
var isVerticalScrollbar = root.scrollHeight > root.clientHeight;
if(isVerticalScrollbar == false){
var item_width = window.screen.availWidth - 17;
} else {
var item_width = window.screen.availWidth;
}
window.setInterval(function(){
var first = $('.banner:first', container);
var faux_id = first.attr('id')+'faux';
var faux_elem = $($('<div/>').append(first.clone()).html()).attr('id', faux_id).css({
left:item_width * items.length
})
container.append(faux_elem);
faux_elem = $('#'+faux_id, container);
$('.banner', container).animate({
left:'-='+item_width
}, 2000, function(){
first.remove();
faux_elem.attr('id', faux_elem.attr('id').replace('faux', ''))
})
}, 3000); }// end of SlideDivSection
$(function(){ SlideDivSection(); });
HTML：
<div id="banner">
<div id="banner_botoes">
<div id="banner_botao1" class="banner_botoes"></div>
<div id="banner_botao2" class="banner_botoes"></div>
<div id="banner_botao3" class="banner_botoes"></div>
<div id="banner_botao4" class="banner_botoes"></div>
<div id="banner_botao5" class="banner_botoes"></div>
</div>
<div id="banner1" class="banner"><img width="100%" height="100%" src="" /></div>
<div id="banner2" class="banner"><img width="100%" height="100%" src="" /></div>
<div id="banner3" class="banner"><img width="100%" height="100%" src="" /></div>
<div id="banner4" class="banner"><img width="100%" height="100%" src="" /></div>
<div id="banner5" class="banner"><img width="100%" height="100%" src="" /></div>
</div>
和CSS：
#banner{
position:relative;
width:100%;
height:47%;
overflow:hidden; }
#banner_botoes{
position:relative;
left:45%;
top:85%;
width:10%;
height:2%;
z-index:1; }
#banner2{
left:100%;
background-color:#000000; }
#banner3{
left:200%;
background-color:#333333; }
#banner4{
left:300%;
background-color:#666666; }
#banner5{
left:400%;
background-color:#999999; }
.banner_botoes{
width:18%;
height:100%;
float:left;
z-index:2;
border-style:solid;
border-width:thin;
border-color:#000000;
border-radius:25px; }
.banner_botoes:hover{
cursor:pointer;
border-color:#99FFFF;
background-color:#FFFFFF; }
.banner{
position:absolute;
left:0;
top:0;
width:100%;
height:100%; }
它还可以。但是，我想让div"banner_botoes"成为这个幻灯片的控件，让它相对于"banner"位置向左或向右滑动，然后继续幻灯片放映。
更准确地说，我希望它与Apple BR网站上的幻灯片完全一样：www.Apple.com/BR
非常感谢大家的关注，很抱歉在我的问题中有任何英语问题。
var items="";
var container ="";
var root="";
var isVerticalScrollbar="";
var autoSlide="";
function SlideDivSection(){
items = ['banner1', 'banner2', 'banner3', 'banner4', 'banner5'];
container = $('#banner');
root = document.compatMode == 'BackCompat' ? document.body:document.documentElement;
isVerticalScrollbar = root.scrollHeight > root.clientHeight;
if(isVerticalScrollbar == false){
var item_width = window.screen.availWidth - 17;
} else {
var item_width = window.screen.availWidth;
}
autoSlide = window.setInterval(function(){
slideChange(0);
}, 3000); }// end of SlideDivSection
function slideChange(slideDir){
var first = $('.banner:first', container);
var faux_id = first.attr('id')+'faux';
var faux_elem = $($('<div/>').append(first.clone()).html()).attr('id', faux_id).css({
left:item_width * items.length
})
container.append(faux_elem);
faux_elem = $('#'+faux_id, container);
if(slideDir==1){
$('.banner', container).animate({
left:'+='+item_width
}, 2000, function(){
first.remove();
faux_elem.attr('id', faux_elem.attr('id').replace('faux', ''))
})
}else{
$('.banner', container).animate({
left:'-='+item_width
}, 2000, function(){
first.remove();
faux_elem.attr('id', faux_elem.attr('id').replace('faux', ''))
})
}
}
function slideControl(strAction){
if(slideControl=="Stop"){
clearInterval(autoSlide);
}else if(slideControl=="Play"){
autoSlide = window.setInterval(function(){
slideChange(0);
}, 3000); }
}else if(slideControl=="Next"){
slideChange(0);
}else if(slideControl=="Back"){
slideChange(1);
}
}
$(function(){ SlideDivSection(); });幻灯片上方控制（"下一步"）进行1；slideControl（"返回"）返回1；slideControl（"停止"）停止间隔，而slideControl"播放"）开始间隔。
相关文章：
- 幻灯片滚动javascript不起作用
- jm按下停止步骤进入滚动的下一张幻灯片
- 滚动水平幻灯片
- 使用 javascript 暂停背景滚动以允许固定元素进行幻灯片放映
- 自动滚动JS幻灯片不起作用
- 带有鼠标滚轮的垂直滚动幻灯片
- jQuery 滚动幻灯片
- 滚动浏览幻灯片等页面
- 自动滚动幻灯片脚本
- 在fullpage.js中使用幻灯片切换向下滚动图像
- 在中心模式下滑动转盘会导致幻灯片滚动无法正常工作
- 向幻灯片放映添加滚动显示样式
- 如何制作一个内容滑块，当用户垂直滚动或单击底部导航选项卡时显示下一张幻灯片
- 如何将控件添加到相对于幻灯片位置向左/向右滚动的自动Jquery幻灯片中
- Swiper API -如何阻止幻灯片过度滚动
- 尝试在window上设置offsetTop.滚动，然后根据被触摸的幻灯片遍历DOM
- 如何制作垂直幻灯片滚动
- 移动幻灯片菜单可滚动
- 幻灯片滚动速度在整页.js插件
- 使用幻灯片，如导航和本地滚动
