轮播图

HTML结构

<div id="all">
		//图片
		<div class="pic">
			<img src="timg1.jpg">
			<img src="timg2.jpg">
			<img src="timg3.jpg">
			<img src="timg4.jpg">
			<img src="timg5.jpg">
			<img src="timg1.jpg">
			
		</div>
		//底部圆点切换图片
			<ul>
				<li class="changeStyle" >1</li>
				<li class="reset">2</li>
				<li class="reset">3</li>
				<li class="reset">4</li>
				<li class="reset">5</li>
		    </ul>
		    //左右切换图片
		    <a href="#" class="left"></a>
		    <a href="#" class="right"></a>
	</div>

注意

• 布局：将图片无缝排列一行
• 外层两层div，外层div为显示的窗口（width为一张图片的width），内层为图片的横向排列（width为所有图片的width）
• 底部圆点使用相应的布局横向排列（由于是图片的切换最好是使用a标签）
• 左右的切换使用a标签

CSS样式

a,div,img,body,ul,li{
		padding: 0px;
		margin:0px;
	}
		img{
			width: 512px;
			height: 300px;
		}
		//最外层的div  
		#all{
			width: 512px;
			height: 300px;
		//超出部分影藏
			overflow: hidden;
		//父级元素设置相对定位
			position: relative;
		}
		//内层div
		.pic{
			float: left;
			height: 300px;
			width: 3072px;
		//图片的无缝拼接
			font-size: 0;
		//子代绝对定位
			position: absolute;
		}
		li{
		//底部的圆点格式
			list-style: none;
		    width: 15px;
		    height: 15px;
		    border-radius: 50%;
            display: inline-block;
            font-size: 12px;
		    line-height: 15px;
            margin-left: 15px;
		    text-align: center;
		    cursor: pointer;
		    position: relative;
		    top: 255px;
		}
		.reset{
		//圆点的未触发的样式
			 background-color: plum;
			 color: white;
			 border:1px solid transparent;
		}
		.changeStyle{
		//触发圆点的图片切换的格式
			color: plum;
			border: 1px solid plum;
			background-color: white;
			transform: scale(1.25);//放大效果
		}
		//左右按钮鼠标hover的样式
		#all>a.left{
			left: 5px;
			background-image: url(banner_1.png);
		}
	    #all>a.left:hover{
	    	 background-image: url(banner_2.png);
	    }
		#all>a.right{
			right: 5px;
			background-image: url(banner_3.png);
		}
		#all>a.right:hover{
            background-image: url(banner_4.png);
		}
	//左右按钮正常的样式
		#all>a{
            width: 35px;
            display: inline-block;
            height: 60px;
            z-index: 999;
            position: absolute;
            font-size: 50px;
            text-decoration: none;
            top: 36%;
		}

注意

• 注意定位的用法，父级相对定位，子级绝对定位
• 注意选择器的优先级显示（ID：100，class：10，标签：1）
• 注意在统一样式使用class名
• css3里面的放大效果：transform: scale(1.25) ;//放大效果

JS行为

图片的移动

• 将五张图片横向排列，注意，在最后一张图后面添加第一张图片
• 根据计时器（比如2000毫秒）2秒执行一次move() 函数
• 每一秒让图片left：-512px图片距离左边的距离减少一张图片的width
• 每移动一次就重置底部圆点的格式
• 定义一个i,计数移动的次数，同时作为底部圆点的移动标准，大于图片的个数就重置为-1，从而进行++

    var all = document.getElementById("all");
	var pic = document.getElementsByClassName("pic")[0];
	var li = document.getElementsByTagName("li");
	var left_a = document.getElementsByClassName("left")[0];
	var right_a = document.getElementsByClassName("right")[0];
	// 重置下标样式
	 function reset(){
	 	for(var i = 0;i<li.length;i++){
	 		li[i].className = "reset"
	 	}
	 }
	var left1 = 0 ,i = 0 ;
	// 图片移动方法
	function move(){
		i ++;
        left1 -= 512;
        pic.style.left = left1 + "px";
        if(left1 <= -2560){
           left1 = 0;
        }
        reset()
		li[i].className = "changeStyle";
		if(i >= 4){
        	i = -1;   //下标从0开始
        }
	}
	
	

小圆点点击事件

注意

• 点击小圆点，切换到相应的图片，首先计算每个小圆点对应的left值
• 其次重置圆点的样式
• 再将触发的样式附到该圆点上
• 圆点点击事件，最后给圆点的下标做了一个判断i = j if(j == 4){ i = -1 }，让圆点的下标同圆点的点击一起变化，但是由于，图片自身的移动，所以，让i=j，最后的if判断是，不让下标越界

// 小标点击事件
	var time = setInterval(move,3000);
	for(let j = 0;j<li.length;j++){
		li[j].onclick = function(){ 
		   left1 = (j)*(-512);
		   pic.style.left = left1 + "px";
           reset();
		   li[j].className = "changeStyle";
		   // move的方法要根据当前的点击之后继续执行，要重置i
		   i = j
		   if(j == 4){
		   	i = -1
		   }
		}
	}

左右点击事件

注意

• 每点击一次，图片就要移动一次，底下的圆点的样式，也会改变
• 右移的事件，相当于图片的移动move()
• 左移的事件，就相当于左移left += 512px同样也要注意底部小圆点的样式的变化
• 当左侧点击事件触发时，再次点击底部小圆，要注意头尾部分圆点下标的变化，要做判断
• 圆点点击事件，最后给圆点的下标做了一个判断if(j == 4){ i = -1 }，当点击左移动时，下标减一，点击最后一个，会触发圆点的最后一个判断，因此，首先对i做一个判断，判断点击的时最后一个，还是第一个（因为第一个和最后一个的赋值不同，要分开讨论）

// 左右点击事件
    right_a.onclick = function(){
           move();
	}
	left_a.onclick = function(){
		// 当点击最后一个时，点击事件里面将i赋值为-1（方便move，里面i++），在左移事件的时候，i此时要变为上一个即为3，当i在第一个的时候，左移，i = 4
		if(i < 0){
        	i = 3;  
        }else if (i == 0) {
        	i = 4; 
        }else{
        	i -- ;
        }
		reset()
		li[i].className = "changeStyle"; 
        left1 += 512;
        if(left1 > 0){
           left1 = -2048;
            pic.style.left = left1 + "px";
        }else{
        	pic.style.left = left1 + "px";
        }  
	}
	// 鼠标移入移出事件
    all.onmouseover=function(){
		clearInterval(time)
	}
	all.onmouseout=function(){
		time = setInterval(move,3000)
	}