天猫轮播图
HTML代码
<body>
<div class="box" id="scorr">
<div class="slider" id="sl">
<ul id="sl_ul">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
</ul>
</div>
<ul class="scorr_nav" id="sc_nav">
<!-- <li class="a">0</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> -->
</ul>
<span class="arr arr_prev" id="prev"><</span>
<span class="arr arr_next" id="next">></span>
</div>
</body>
css代码
<style type="text/css">
*{
margin : 0;
padding: 0;
}
.box{/*这个用来做容器*/
width: 600px;
height: 400px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.box .slider{
width: 100%;
height: 100%;
}
.box .slider ul{
list-style: none;
width: 800%;
position: absolute;
top: 0;
left: 0;
}
.box .slider ul li{
float: left;
}
.box ul img{
vertical-align: top;
}
.box .scorr_nav{
list-style: none;
position: absolute;
bottom: 10px;
right: 20px;
}
.box .scorr_nav li{
width: 20px;
height: 20px;
float: left;
color: white;
background-color: #000;
font-size: 12px;
cursor: pointer;
border-radius: 50%;
text-align: center;
line-height: 20px;
margin-right: 5px;
}
.box .scorr_nav li.a{
background-color: #356acb;
}
.box .arr{
width: 40px;
height: 50px;
font-size: 35px;
font-family: "黑体";
font-weight: bold;
color: white;
background-color:rgba(0,0,0,0.2);
text-align: center;
line-height: 50px;
cursor: pointer;
position: absolute;
top : 150px;
display: none;
}
.box .arr_prev{
left: 5px;
}
.box .arr_next{
right: 5px;
}
</style>
js代码
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload=function(){
//鼠标进入轮播图显示左右两侧箭头
$("scorr").onmousemove=function(){
var arr=$("scorr").getElementsByTagName("span");
for (var i = 0; i < arr.length; i++) {
arr[i].style.display="block";
}
}
//鼠标离开轮播图隐藏左右两侧箭头
$("scorr").onmouseout=function(){
var arrs=$("scorr").getElementsByTagName("span");
for (var i = 0; i < arrs.length; i++) {
arrs[i].style.display="none";
}
}
//动态生成小图标的个数
//1.拿到图片个数,目的是看有几个图片
var imgcount=$("sl").getElementsByTagName("img").length;
// var imgcount=$("scorr").children[0].children[0].children.length;
// alert(imgcount);6
for (var i = 0; i < imgcount; i++) {
var b=document.createElement("li");//挨个创建li标签
b.innerHTML=i+1;//然后设置里面的值
if(i==0){
b.setAttribute("class", "a");//设置类的class属性
}
b.setAttribute("index",i);
//注册每个选中的事件，用排他思想
//直接在里面注册了
b.onclick=function(){
var lis= $("sc_nav").getElementsByTagName("li")
for (var i = 0; i < lis.length; i++) {
lis[i].className="";//循环清空类名
}
this.className="a";//然后设置当前对象的类名为a
end=this.getAttribute("index")*-600;
}
$("sc_nav").appendChild(b);//根据id去添加到里面，记得是id不是类，傻逼
};
var start =0;
var end =0;
setInterval(function(){
start+=(end-start)/10;
$("sl_ul").style.left=end +"px";
//这个地方应该是让那个大盒子去移动，所以获取的是那个ul的id！！！
}, 30)
//给左右箭头注册点击事件
$("prev").onclick=function(){
if(end>-3000)
end+=-600;
else{
end=0;
}
seta();
}
$("next").onclick=function(){
if(end >-3000){
end-=600;
}
else{
end=0;//如果是最后一张图，回到第一张
}
seta();
}
function seta(){
var index=Math.abs(end/600);//M记得大写，因为是一个类！！
lis=$("sc_nav").getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className="";
}
lis[index].className="a";
}
}
</script>
