整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、什么是JavaScript中的window？
JavaScript中window是一个全局对象，代表浏览器中一个打开的窗口，每个窗口都是一个window对象。
2、什么是document？
document是window的一个属性，这个属性是一个对象；
document代表当前窗口中的整个网页；
document对象保存了网页上所有的内容，通过document对象就可以操作网页上的内容。
3、什么是JavaScript中的DOM？
DOM定义了访问和操作HTML文档(网页)的标准方法；
DOM全称：Document Object Model，即文档模型对象；
学习DOM就是学习如何通过document对象操作网页上的内容。
4、JavaScript中如何通过选择器获取DOM元素？
querySelector：只会返回根据指定选择器找到的第一个元素，例子：
let oDiv=document.querySelector("div");
console.log("oDiv"); //输出：<div></div>
querySelectorAll：会返回指定选择器找到的所有元素，例如：
let oDivs=document.querySelectorAll("div");
console.log("oDivs"); //输出：NodeList由所有div元素组成的为数组。
5、JavaScript如何获取和设置元素内容？
获取元素内容：
1）innerHTML获取的内容包含标签，innerText/textContent获取的内容不包含标签；
2）innerHTML/textContent获取的内容不会去除两端的空格，innerText获取的内容会去除两端的空格。
设置元素内容：
共同点：无论通过innerHTML/innerText/textContent设置内容，新的内容都会覆盖原有的内容；
区别：1）通过innerHTML设置数据，数据中包含标签，会转换成标签之后再添加；
2）通过innerText/textContent设置数据，数据中包含标签，不会转换成标签，会当做一个字符串直接设置。
6、什么是JavaScript中的事件？ 如何给元素绑定事件？
用户和浏览器之间的交互行为被称为事件，比如：鼠标的点击/移入/移出。
在JavaScript中所有的HTML标签都可以添加事件；
元素.事件名称=function(){}；
当对应事件被触发时候就会自动执行function中的代码。
掌握了以上JavaScript，就可以做某宝里面的轮播图片了！
代码的格式可能有点乱，需要复制到编辑器上看。
<div class="container">
<div class="content-list">
</div>
<div class="content-body">
<div class="content-right-top">
<div class="slider">
<div class="slider-img">
<a href="#">
<img src="images/ads/1.jpg" alt=""/>
<img src="images/ads/2.jpg" alt=""/>
<img src="images/ads/3.jpg" alt=""/>
<img src="images/ads/4.jpg" alt=""/>
<img src="images/ads/5.jpg" alt=""/>
</a>
</div>
<div class="slider-dot">
<a href="#">
<ul>
<li>
相约情人节
<p>全场115元起</p>
</li>
<li>
新款上线
<p>全场357元起</p>
</li>
<li>
愤怒小鸟特卖
<p>全场89元起</p>
</li>
<li>
男鞋促销第一
<p>全场3.1折起</p>
</li>
<li>
春季新品发布
<p>全场4.1折起</p>
</li>
</ul>
</a>
</div>
</div>
<div class="slider-right">
<div class="slier-right-top">
</div>
<div class="slier-right-bottom">
</div>
</div>
</div>
<div class="content-right-bottom">
<div class="list-tittle">
<ul class="tabs">
<li>家用电器</li>
<li>日常美食</li>
</ul>
</div>
<div class="list-content">
<ul>
</ul>
</div>
</div>
</div>
</div>
css的代码：
.content-list{
width:20%;
height:560px;
border:1px solid #ccc;
float:left;
}
.content-body{
width:79%;
height:560px;
border:1px solid #ccc;
float: right;
}
.content-body,.content-list{
margin-top: 10px;
}
.content-right-top{
width:100%;
height:320px;
border:1px solid #ccc;
}
.content-right-bottom{
width:100%;
height:220px;
border:1px solid #ccc;
}
.slider{
width:69%;
height:320px;
border:1px solid #ccc;
float:left;
position: relative;
}
.slider-right{
float: left;
width: 30%;
height:320px;
border:1px solid #ccc;
}
.slier-right-top{
height:160px;
border: 1px solid #ccc;
}
.content-right-bottom{
margin-top:5px;
}
.list-title{
height:30px;
border: 1px solid #ccc;
}
.footer{
text-align: center;
}
.slider-img>a>img{
width: 100%;
height:320px;
position: absolute;
z-index:9;
top:0;
left:0;
}
.slider-img>a>img:first-child{
z-index:11;
}
.slider-dot{
position: absolute;
z-index: 13;
bottom: 0;
width: 100%;
}
.slider-dot>a{
text-decoration: none;
}
.slider-dot>a>ul{
width: 100%;
bottom:0;
}
.slider-dot>a>ul>li{
display: inline-block;
list-style: none;
width:19.4%;
height:35px;
text-align: center;
font-size: 12px;
color:#fff;
background-color: rgba(0,0,0,0.5);
}
.slider-dot>a>ul>li:hover,.active{
background-color: rgba(0,200,0,0.8) !important;
}
.list-tittle>ul>li{
list-style: none;
display: inline-block;
color: white;
width: 80px;
height: 20px;
text-align: center;
border: 1px solid #ccc;
margin-left: 10px;
background-color: red;
}
js的代码：
$(function(){
var index=0;
var timer=setInterval(slider,2000);
var $img=$(".slider-img>a>img");
var $li=$(".slider-dot>a>ul>li");
function slider(){
if(index>4){
index=0;
}
/*第二张显示其他张隐藏*/
$img.eq(index).fadeIn().siblings().fadeOut();
/*对应图片滚动，对应说明也要加上active样式*/
$li.eq(index).addClass("active").siblings().removeClass("active");
index++;
}
/*当鼠标悬停时候停止轮播*/
$(".slider").hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(slider,2000);
})
/*鼠标悬停到那个说明就要显示哪一张图片*/
$li.hover(function(e){
e.stopPropagation();
e.preventDefault();
index=$(this).index();
$img.eq(index).fadeIn().siblings().fadeOut();
$(this).addClass("active").siblings().removeClass("active");
},function(e){
e.stopPropagation();
e.preventDefault();
})
$.ajax({
url:'../data/product_1.json',
type:'get',
success:function(data){
var pro=data;
var list='';
$(pro).each(function(index,elem){
list+='<li id="'+elem.id+'"><a href=""><img src="'+elem.src+'"/></a></li>'
});
$(".list-content>ul").append(list);
}
})
})
技术交流群里面，有人冒出来问，谁有轮播插件，因为我也没用过，但是我觉得轮播这个功能其实蛮简单的，可以自己创造，我觉得编程的乐趣就在于创造，创造出属于你的东西，编程才有了灵魂。
下面不多说，由于代码有几部分，所以图片方式进行代码演示：
首先准备一下材料：我使用的是jquery写的，所以需要准备这个插件就可以了：
主要HTML代码
解释：整个轮播会分为3部分：一个大的div,包含了图片、轮播节点、动画插入。其中轮播节点与动画展示使用绝对位置定位，使得它从流中脱离出来，具体样式如下图：
主要的样式设计
解释：轮播节点就是图片地址一样，轮到哪一张就亮哪一张。节点使用绝对位置，并设置位于第三层。
接下来就是使得它开始动起来，动起来需要使用什么方法呢？当然了有两种方法，一种是CSS3，另一种是使用计时器配合动画方法animate。CSS3这种属于纯样式设计，对于固定的来说，还是可以的，至于动态的，后期不断增加更改的，暂时没去了解过，所以下面使用定时器这种方法：
代码如下：
主要js代码
上面的代码，主要逻辑都有注释，imglabel(i)用来实时跟踪图片，跟着图片走；divanimate(i)用来每一张图片插入动画，里面的html属于变量相当于组件复用，可以往里面传入你要说的话，和其他内容。
那么整个轮播就出来，效果如下
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
创造是编程的乐趣，所以欢迎小伙伴们留言，一起讨论提提升。
*请认真填写需求信息，我们会在24小时内与您取得联系。
