banner轮播图片的设计【纯js】
在safari下，图片之间依然会有间隙【尽管设置了font-size:0px;但是只适用于大部分浏览器，并非所有】。
解决方案（1）：
<img />之间不要空格，不要换行，连起来写。
解决方案（2）：
不使用img的内联属性，使用block.将浮动设置为float:left;就彻底解决这个问题了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://www.zhenyinginvestment.com/admin/css/reset.css" >
<title></title>
<style type="text/css">
#banner{
width: 600px;
height: 265px;
background-color: white;
margin: 0px auto;
position: relative;
font-size: 0px;/*清除img图片间的回车符产生的间隔*/
overflow: hidden;
}
#banner #bannerImg{
width: 100%;
height: 100%;
position: relative;
top: 0px;
left: 0px;
white-space: nowrap; /*使这个图片能一行显示*/
transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
}
/*
transition-property:all|none;all表示所有属性改变
transition-duration:3s;时间
transition-timing-function:linear|ease-in;匀速，加速，贝塞尔曲线等
合并起来就是transition:all 1s linear;这种写法
*/
#banner #bannerImg .img{/*img默认是inline，同时使用nowrap实现图片在同一行*/
width: 100%;
height: 100%;
font-size:0px;
}
#banner #bannerButton{
font-size: 14px;
color: white;
position: absolute;
bottom: 10px;
left: 250px;
background-color: #eae5e557;
border-radius: 9px;
}
#banner #bannerButton .banner-button{
border-radius: 9px;
border: none;
outline: none;
cursor: pointer;
background-color: #c7bdbd;
width: 18px;
height: 18px;
color: rgba(0,0,0,0);
margin-left:4px;
margin-right:4px;
}
#banner #bannerButtonAside .aside-right{
position: absolute;
right: 10px;
top: 50%;
margin-top: -32px;
cursor: pointer;
width: 20px;
height: 30px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* Internet Explorer */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */
}
#banner #bannerButtonAside .aside-left{
position: absolute;
left: 10px;
top: 50%;
margin-top: -32px;
cursor: pointer;
width: 20px;
height: 30px;
}
#banner #bannerButtonAside img{
width:100%;
height: 100%;
}
</style>
</head>
<body>
<section id="banner" onmouseover="bannerShiftStop()" onmouseout="bannerShiftStart()">
<div id="bannerImg">
<img class="img" src="http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg"/><img class="img" src="http://n.sinaimg.cn/default/1_img/upload/3933d981/w800h521/20171212/kwEX-fypnsip9310109.jpg"/><img class="img" src="http://n.sinaimg.cn/default/1_img/upload/3933d981/w800h517/20171212/VBAU-fypnsip9310475.jpg"/>
</div>
<div id="bannerButton">
<button class="banner-button" onclick="bannerIndexChangeTo(0)">0</button>
<button class="banner-button" onclick="bannerIndexChangeTo(1)">1</button>
<button class="banner-button" onclick="bannerIndexChangeTo(2)">2</button>
</div>
<div id="bannerButtonAside">
<div class="aside-left" onclick="bannerPrevious()">
<img src="http://pic33.photophoto.cn/20141210/0007020186465408_b.png"/>
</div>
<div class="aside-right" onclick="bannerNext()">
<img src="http://pic33.photophoto.cn/20141210/0007020186465408_b.png"/>
</div>
</div>
</section>
</body>
<script type="text/javascript">
'use strict';
var bannerImg=document.getElementById("bannerImg");
var Button=document.getElementsByClassName("Button");
var bannerIndex = 0;//当前banner图片位置
var bannerNumber = 3;//banner图片张数
var bannerWidth = 600;//banner图片宽度
var numberBannerInterval = 0;//定时器对象，number
function bannerShiftStart(){
console.log("bannerShiftStart");
numberBannerInterval = setInterval(function(){
bannerNext();
},3000);
}
function bannerShiftStop(){
console.log("bannerShiftStop...");
clearInterval(numberBannerInterval);
}
function bannerIndexChangeTo(idx){
bannerIndex = idx;
// bannerImg.style.transition="all .2s linear";
// bannerImg.style.-moz-transition="all .2s linear";
// bannerImg.style.-webkit-transition="all .2s linear";
// bannerImg.style.-o-transition="all .2s linear";
bannerImg.style.left = ""+(-bannerWidth)*(bannerIndex)+"px";
pageIndexTo(idx);
}
function bannerNext(){
if (bannerIndex < bannerNumber - 1) {
bannerIndex++;
bannerIndexChangeTo(bannerIndex);
}else{
bannerIndex = 0;
bannerIndexChangeTo(bannerIndex);
}
}
function bannerPrevious(){
if (bannerIndex > 0) {
bannerIndex--;
bannerIndexChangeTo(bannerIndex);
}else{
bannerIndex = bannerNumber - 1;
bannerIndexChangeTo(bannerIndex);
}
}
function pageIndexTo(idx){
var parentPage = document.getElementById("bannerButton");
var arrPages = parentPage.getElementsByClassName("banner-button");
for(let loop = 0;loop < arrPages.length;loop++){
if(loop == idx){
arrPages[loop].style.backgroundColor = 'blue';
}
else{
arrPages[loop].style.backgroundColor = 'red';
}
}
}
pageIndexTo(0);
bannerShiftStart();
</script>
</html>
...
...
...
,...
