轮播代码参考

主要是css和JS 的代码编打，在测量像素的时候主要是看宽度，在html里面要给图片一个class和id方便设置js代码，在自动轮播的效果下要设置图片的方向和每一次移动的位置（即像素）；在css里要给最外层的‘盒子’设置宽和高和位置的所在位置，然后再给装图片的‘盒子’设置每一张图片加起来的总宽度…

开发工具与关键技术：DW（js 、 css）
作者：邱慧敏
撰写时间：2019.01.17
知识总结轮播的基本样式
HTML 代码部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播效果</title>
<link rel="icon"  type="image/x-icon" href="images/微信图片14.jpg">
<link rel="stylesheet" href="baobao-5.css">
</head>

<body>
		<!--轮播 先设置两大个div；大的div里面在放两个小的div 分别用来装img span；
		然后在外层再放 <a></a>标签用来装左右按钮,记得不能遗漏 hrdf=""javascript:;"> -->
<div class="left_div" id="left_div">
	<div id="container" class="container">
		<div id="list" class="list" style="left: -1080px;"><!--像素不可缺少 且为负数-->
			<img src="images/微信图片17.jpg" alt="">
			<img src="images/微信图片15.jpg" alt="">
			<img src="images/微信图片4.jpg" alt="">
			<img src="images/微信图片16.jpg" alt="">
			<img src="images/微信图片11.jpg" alt="">
			<img src="images/微信图片17.jpg" alt="">
			<img src="images/微信图片15.jpg" alt="">
		</div>
		<div id="buttons" class="buttons"><!--页码-->
			<span index="1" class="on">1</span>
			<span index="2">2</span>
			<span index="3">3</span>
			<span index="4">4</span>
			<span index="5">5</span>
		</div>
		<a id="prev" class="prev" href="javascript:;">&lt;</a><!--按钮-->
		<a id="next" class="next" href="javascript:;">&gt;</a>
	</div>
</div>
<script src="baobao-5.js"></script>
</body>
</html>

CSS 样式代码

@charset "utf-8";
/* CSS Document */
.left_div{
	width: 1000px;
	height: 100%;
	margin: 0 auto;
}
.container{
	width: 1080px;/*图片的宽*/
	height: 1920px;/*高*/
	margin: 0 auto;
	overflow: hidden;/*超出部分隐藏*/
	position: relative;
}
.container .list{
	width: 7560px;/*五张图片的宽的总像素*/
	height: 100%;
	position: absolute;
}
.container img{/*图片的浮动和宽高*/
	float: left;
	width: 1080px;
	height: 1920px;
}
.container a{
	width: 60px;
	line-height: 60px;
	font-size: 45px;
	text-align: center;
	color: red;
	background: #C3C3C3;
	position: absolute;
	top: 40%;
	display: none;
	text-decoration: none;
}
.container a.prev{
	left: 0px;
}
.container a.next{
	right: 0px;
}
.container .buttons{
	position: absolute;
	bottom: 8px;
	right: 25px;
}
.container .buttons span{
	width: 23px;
	line-height: 23px;
	border-radius: 50%;/*圆形的效果*/
	float: left;
	text-align: center;
	background: #c3c3c3;
	margin-left: 8px;
	font-size: 18px;
	color: red;
}
.container .buttons span.on{
	color: green;/*发生移动的图片 伪类on 颜色发生改变*/
	background-color: #8D7D7D;
}
.container:hover a{
	display: block;
}
.left_div .list img{
	cursor: pointer;
}
.left_div .buttons span{
	cursor: pointer;/*手的图标出现*/
}

JS 代码部分

// JavaScript Document
var blswitch=false;
var index=1;
var timer=null;
window.function(){
	var container=document.getElementById("container");
	var prev=document.getElementById("prev");
	var next=document.getElementById("next");
	var buttons = document.getElementById("buttons").getElementsByTagName("span");
	next.onclick=function(){/*右边按钮的点击事件*/
		if(blswitch){
			return false;
		}
		if(index===5){
			index=1;
		}else{
			index++;/*向右移动*/
		}
		animate(-1080);/*图片的像素*/
		showButton();/*每次图片的位置发生变化，底部的页码数也随之变化*/
	};
	prev.onclick=function(){/*左边按钮的点击事件*/
		if(blswitch){
			return false;
		}
		if(index===1){
			index=5;
		}else{
			index--;/*向左移动*/
		}
		animate(1080);/*像素*/
		showButton();/*每次图片的位置发生变化，底部的页码数也随之变化*/
	};
	for(var i=0;i<buttons.length;i++){
		buttons[i].onclick=function(){
			if(this.className==="on"){
				return;
			}
			var myindex=this.getAttribute("index");
			var offset=-1080*(myindex-index);
			if(!blswitch){
				animate(offset);
			}
			index=myindex;
			showButton();
		}
	}
	function play(){
		timer=setInterval(function(){
			next.onclick();
		},3000)/*以毫秒为单位*/
	}
	play();
	function stoptime(){
		clearInterval(timer);
	}
	container.onmousemove = stoptime;/*鼠标移到图片上，轮播停止*/
	container.onmouseout = play;/*移开继续开始*/
};
function animate(offset){
	var list=document.getElementById("list");
	var time=1080;
	var interval=10;
	var speed=offset/(time/interval);
	var newleft=parseInt(list.style.left)+offset;
	blswitch=true;
	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<-(1080*5)){
				list.style.left=-1080+"px";
			}
			if(newleft>-1080){
				list.style.left=-(1080*5)+"px";
			}
			blswitch=false;
		}
	}
	go();/*不可少*/
}
function showButton(){
	var buttons=document.getElementById("buttons").getElementsByTagName("span");
	for(var i=0;i<buttons.length;i++){
		if(buttons[i].className==="on"){
			buttons[i].className="";
			break;
		}
	}
	buttons[index-1].className="on";/*给伪类class为on的一个高亮效果*/
}

猜你喜欢