焦点图轮播特效_技术问答

weixin_慕莱坞3168337

index打不出来: 换键盘; 2019-12-03 1回答·843浏览

精慕门4131044

为什么要加附属图: 2019-10-15 2回答·951浏览

qq_慕侠6439089

left值得修改以及后续数据的得出逻辑如何计算？: 你好，很高兴能看到你提出的问题，对于你代码的主体逻辑我没有完全看懂，不过我也曾遇到你这样的问题，你看下是否是某个方法没有调用，或者参数设置错误等，参考一下老师的源码，兴许对你会有些帮助。; 2019-01-13 1回答·1095浏览

慕函数845114

图片不滚动: 贴代码呀直接问这谁顶得住啊; 2018-12-17 1回答·1028浏览

qq_小比克_0

如果每张图片的宽度要占满浏览器，也就是设置的父容器宽度为100%，图片宽度也为100%该怎么做

举个列子

#banner{

width: 100%;

height: 460px;

position: relative;

overflow: hidden;

}父容器

#box{

width: 500%;

height: 460px;

position: absolute;

z-index: 1;

}放置图片的div

#box img{

height: 460px;

width: 20%;

float: left;

cursor: pointer;

} img的格式

这是我在做百分比布局时的一点心得

上述是假设你放置五张图片时，为了让每一张都百分之百显示出来所以box的宽度设为500%

由于继承，但每一张的img由于500%的20%，刚好是100%，这样图片就可以完全显示出来

2018-06-12 1回答·2704浏览

慕用7707969

改了一种形式请问为什么imglist.style.left=-1520*index+"px";无法执行图片切换: 你打开控制台，看看浏览器报错信息是什么；你的this.num 是什么？估计出错在这里; 2018-05-26 1回答·1225浏览

潜狸

为什么把left改成正600px整个list消失不见了？？？: 2018-03-11 2回答·1493浏览

慕粉3461685

焦点图下面的小圆点没有出来: span是内联元素，设置宽高、内边距、外边距都没有效果，将它的display="inline-block"，这样设置就好了; 2018-02-25 3回答·1332浏览

qq_特_3

完整的代码: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-decoration: none;
}

body {
padding: 20px;
}

#container {
position: relative;
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
}

#list {
position: absolute;
z-index: 1;
width: 4200px;
height: 400px;
}

#list img {
float: left;
width: 600px;
height: 400px;
}
#buttons {
position: absolute;
left: 250px;
bottom: 20px;
z-index: 2;
height: 10px;
width: 100px;
}

#buttons span {
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
cursor: pointer;
}

#buttons .on {
background: orangered;
}

.arrow {
position: absolute;
top: 180px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
}

.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}

#container:hover .arrow {
display: block;
}

#prev {
left: 20px;
}

#next {
right: 20px;
}
</style>
</head>
<body>

<div id="container">
<div id="list" style="left: -600px">
<img src="img/05.jpg" alt="1">
<img src="img/01.jpg" alt="1">
<img src="img/02.jpg" alt="2">
<img src="img/03.jpg" alt="3">
<img src="img/04.jpg" alt="4">
<img src="img/05.jpg" alt="5">
<img src="img/01.jpg" alt="5">
</div>
<div id="buttons">
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
</div>
<script>
window.onload=function (){
var container =document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');//获取5个按钮
var prev=document.getElementById('prev');//上一个
var next=document.getElementById('next');//下一个
var index=1;
var timer;
/*点亮小圆点*/
function showButton(){

for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';
}

/*箭头点击事件**/
function animate(offset){//封装按钮左右点击，传参offset
var newLeft=parseInt(list.style.left)+offset;
var time=300;//位移总时间
var interval=10;//位移间隔
var speed=offset/(time/interval);//每次位移量

function go(){
if((speed<0 && parseInt(list.style.left)>newLeft) || (speed >0&&parseInt(list.style.left)<newLeft)){
list.style.left=parseInt(list.style.left)+speed+'px';

/*定时器*/
setTimeout(go,interval);
}
else{

list.style.left=newLeft+'px';
/* 判断是否滚动到附属图上，滚动到附属图上归位*/
if(newLeft> -600){
list.style.left = -3000 + 'px';
}
if(newLeft< -3000){
list.style.left = -600 + 'px';
}
}
}

go();

}

function play(){

timer=setInterval(function (){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
next.onclick=function (){
if(index==5){
index=1;
}
else{
index +=1;
}

showButton();
animate(-600);//点击右箭头-600
}
prev.onclick=function (){
if(index==1){
index=5;
}
else{
index -= 1;
}

showButton();
animate(-600);//点击左箭头600
}

for(var i=0;i<buttons.length;i++){
//原始值
buttons[i].onclick=function (){
if(this.className=='on'){
return;
}

var myIndex=parseInt(this.getAttribute('index'));
var offset=-600 *(myIndex -index);
animate(offset);
index=myIndex;
showButton();
}
}
container.onmouseover=stop;
container.onmouseout=play;

}
</script>
</body>
</html>; 2017-12-25 1回答·1579浏览

ZoeyZoeyZoey

图片自适应100%宽度: width:100%;意思是让图片占据父容器100%，这里面图片假设比父容器大，倒是不会影响，如果比父容器小，图片会模糊，假设图片比例与父容器比例相差比较大，设置：height:100%图片是会发生变形的。假设把图片设定为背景图片，需要background-size：100% 100%;前面一个是宽度100%，后面一个是高度100%。; 2017-12-21 1回答·1759浏览

慕运维7130634

谁能解释下布局下面五个index啥意思: 已采纳 GonyMaster 的回答; index是自定义属性在后面JS控制的时候需要用到index和图片的left来控制轮播图的移动; 2017-09-29 1回答·1323浏览

慕仔037281

请问全屏轮播div怎么实现: 如果仅仅只是全屏轮播，可以将高度宽度设置为视口的大小; 2017-09-20 1回答·1857浏览

慕妹1226619

图片宽度是按比例百分之几，怎么设置每次的left值

已采纳 Csunnnnn 的回答

相当于动态设置图片宽。不论怎么设置宽度百分比，最终图片宽度都会落到具体的像素值上。

找到你图片所在的标签，获取到这个标签的宽度属性就行了。

2017-08-01 3回答·2250浏览

宝慕林5251960

无线滚动

因为包含它的容器有宽度所以你看不到全部而且容器设置了overflow：hidden；属性这就只能看见一张图片了

之所以看到跳转是因为轮播图要实现无限滚动就需要无限的图片要让5张图片接连起来在看到最后一张图片的时候会有一张过渡图片也就是第一张图片拿到里面显示效果是感觉五张图片真的接连起来了不会产生空白过渡

这里说不太清楚自己在浏览器里面多多调试以及看代码样式里面overflow：hidden；看看隐藏掉是什么效果

2017-07-06 2回答·798浏览

qq_其实我是一只喵_0

图片列表list使用absolute是什么作用，不写的话不进行切换: 已采纳网瘾骚年的回答; 用absolute使图片列表相对于父元素进行绝对定位，并且脱离文档，好做移动; 2017-07-05 1回答·1233浏览

一枚码农

求解答求解答: ctrl + shift +f; 2017-06-24 1回答·986浏览

浮若绊笙

为什么做的两边的箭头好丑啊: 都是这样的; 2017-06-05 1回答·1115浏览

慕田峪2423336

求解求解: 2017-05-11 3回答·721浏览

慕田峪2423336

求解答求解答: 的看源码; 2017-05-11 2回答·711浏览

小草的小梦想00

焦点图轮播: 这种方式我也用到过，用意是这样的，假设有6张图，焦点图的方式是从1-6的顺序滚动播放图片，之后要从6回到1直接跳转的话就显得很突兀，一下从6跳到1人眼可以很明显分辨出，就没有一种一直在向后滚动的感觉，这个时候在6号图后面再加一张1号图，以1234561的顺序排列，实际上最后一张也是1号图，这样跳转到第一张图的话就好像图片未动，实际上你的位置已经从最后到了最前，但是又不显得突兀，给人一种一直在向后滚动播放的视觉上错觉，所以这种做法并不多余。; 2017-04-21 2回答·788浏览

芷1

方法不是很好: 来读读这个 http://www.cnblogs.com/LIUYANZUO/p/5679753.html; 2017-03-08 1回答·652浏览

慕雪8133966

大神们看看，看看错在哪里了，为什么左右的箭头不出现？？？急急急: 跟我一样，吗的把那个display：none 删除就有了，但是后面的又不行; 2016-12-18 2回答·1010浏览

dky

怎么定每张图片的width都是600px？: 已采纳慕粉3914370 的回答; 设置原来图片的大小根据图片大小设置外面DIV的大小; 2016-12-11 1回答·1442浏览

越努力越幸运ydq

代码文图: 初始值啊，为了显示真正的第一张图片; 2016-11-23 1回答·466浏览

申请You专利

5个小圆点的位置设定: 已采纳 Walk_ 的回答; 小圆点的父容器绝对定位，left:50% margin-left= - （容器宽度的一半）; 2016-11-17 1回答·881浏览

申请You专利

list宽度为什么是4200px: 已采纳扎克悟空的回答; 因为需要模拟无限滚动的效果，就会在整个list中前后各插一张图片，那么5张就变成7张了！也就是3000+2*600=4200 ...具体原理可以再看看原理介绍和无限滚动这两课程。; 2016-11-17 2回答·1007浏览

苏陌浅

按钮布局问题: 2016-10-27 1回答·594浏览

qq_你可以闭嘴了_04053243

急！很急！特别急！: 已采纳 Kian_ 的回答; <a> 标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。

这里的href="javascript:;"，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现a标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好。; 2016-10-26 1回答·697浏览

qq_浅夏丶_03823444

求全部的代码: 可以再教程右边下载源码; 2016-10-12 1回答·576浏览

慕粉3775934

为什么圆点不加float:left就显示不出来，加了float:left就可以正常显示？

已采纳 wang_hao__ 的回答

span是内联元素，宽度高度设置无效；而且在<span></span>，没有内容情况下当然不显示。

float不紧可以左浮动使其在一行显示，而且会转化为块级元素使得宽高设置生效

大致这个意思，可以看一下http://www.imooc.com/learn/121 张鑫旭关于浮动的深入讲解 5-3 float与display：block化，

2016-10-12 1回答·1726浏览