换灯片、轮播图---详细说明

花费一天时间详细搞懂的幻灯片制作，参考资料：http://www.cnblogs.com/LIUYANZUO/p/5679753.html

直接上代码，自己仔细看注释已经是最简单了，细细看绝对能看懂

html部分：

 <!DOCTYPE html>
<html>
<head>
	<title>轮播图效果</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/index.css">
	<script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
	<div id = "container">
	<!-- 图片界面 -->
		<div id="list" style="left: -600px;">
			<img src="images/5.jpg" alt="1" />
			<img src="images/1.jpg" alt="1" />
			<img src="images/2.jpg" alt="2" />
			<img src="images/3.jpg" alt="3" />
			<img src="images/4.jpg" alt="4" />
			<img src="images/5.jpg" alt="5" />
			<img src="images/1.jpg" alt="5" />
		</div>
	<!-- 底部小圆点 -->
		<div id="buttons">
			 <span index="1" class="on"></span>
			 <span index="2"></span>
			 <span index="3"></span>
			 <span index="4"></span>
			 <span index="5"></span>
	    </div>
	<!-- 左右跳转按键 -->
	    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
		<a href="javascript:;" id="next" class="arrow">&gt;</a>
	</div>
 
</body>
</html>

css部分：

 * {
    margin: 0;
    padding: 0;
    text-decoration: none;
}
 
body {
    padding: 20px;
}
 
/*图片div的大小和定位方式*/
#container {
    position: relative;
    width: 600px;
    height: 400px;
    border: 3px solid #333;
    overflow: hidden;/*内容溢出的时候隐藏内容*/
}
 
/*所有图片的横向大小*/
#list {
    position: absolute;
    z-index: 1;
    width: 4200px;
    height: 400px;
}
 
#list img {
    float: left;
    width: 600px;
    height: 400px;
}
 
/*图片下部的小圆点*/
#buttons {
    position: absolute;
    left: 250px;
    bottom: 20px;
    z-index: 2;
    height: 10px;
    width: 100px;
}
 
#buttons span {
    float: left;
    margin-right: 5px;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    border-radius: 50%;/*圆角标签*/
    background: #333;
    cursor: pointer;/*鼠标移动上去小手标签出现*/
}
 
/*class为on的显示橘红色*/
#buttons .on {  
    background: orangered;
}
 
/*左右箭头标签*/
.arrow {
    position: absolute;
    top: 180px;
    z-index: 2;
    display: none; /*一般不被显示*/
    width: 40px;
    height: 40px;
    font-size: 36px;
    font-weight: bold;
    line-height: 39px;
    text-align: center;
    color: #fff;
    background-color: RGBA(0, 0, 0, .3);
    cursor: pointer;  /*移动上出现小手*/
}
 
.arrow:hover {
    background-color: RGBA(0, 0, 0, .7);
}
 
/*移动上去左右标签显示*/
#container:hover .arrow {
    display: block;
}
 
#prev {
    left: 20px;
}
 
#next {
    right: 20px;
}

js部分：

 window.onload = function() {
            var list = document.getElementById('list');
            var prev = document.getElementById('prev'); //前进按键
            var next = document.getElementById('next'); //后退按键
 
            function animate(offset) {
                var newLeft = parseInt(list.style.left) + offset;  //parseInt是将字符串解析成int整数, 再加后面的600的值
                list.style.left = newLeft + 'px';
 
                //判断循环
                if(newLeft<-3000){
                    list.style.left = -600 + 'px';
                }
                if(newLeft>-600){
                    list.style.left = -3000 + 'px';
                }
            }
 
            //图片循环
            var timer;
            function play(){
                timer = setInterval(function(){  //setInterval()执行多次，setTimeout()只执行一次
                    next.onclick()
                },1500);
            }
            play();
 
            //鼠标移动到图片,图片不在跳动
            var container = document.getElementById('container');
 
            function stop() {
                clearInterval(timer);
            }
            container.onmouseover = stop;
            container.onmouseout = play;
 
            /*********************************************************/
 
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var index = 1;
 
            function buttonsShow() {
                //循环清除圆点样式
                for (var i = 0; i < buttons.length; i++) {
                    //className获取类属性名
                    if (buttons[i].className == 'on') {  
                        buttons[i].className = '';
                    }
                }
                //数组从0开始，故index需要-1
                buttons[index - 1].className = 'on';
            }
 
 
            //点击小点跳转指定图片
            //使用了匿名函数执行的语法()表示执行, ()()写法是立即执行
            //闭包: 函数里面放一个匿名函数就叫闭包
            for (var i = 0; i < buttons.length; i++) {
 
                (function(i) {
                    buttons[i].onclick = function() {
                        console.log(i);
                        // getAttribute 获取属性值
                        var clickIndex = parseInt(this.getAttribute('index'));
                        var offset = 600 * (index - clickIndex); 
                        animate(offset);
                        index = clickIndex;
                        buttonsShow();
                    }
                })(i)
            }
 
 
            //点击左键事件, 调用方法
            //function(){   } 书写格式可以做到, js代码和方法一起写
            prev.onclick = function() {
                index -= 1;
                if (index < 1) {
                    index = 5;
                }
                buttonsShow();
                animate(600);
            }
 
            //点击右键事件, 调用方法
            next.onclick = function() {
                //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
                index += 1;
                if (index > 5) {
                    index = 1;
                }
                buttonsShow();
                animate(-600);
            }
 
            /*********************************************************/
 
        }

仔细看，这已经是最简单的说明啦，还是看不懂就从js 基础开始重学吧。

源代码下载：链接：http://pan.baidu.com/s/1ge2kACr 密码：l8yj

上一篇服务器：同域名搭建多个项目

下一篇文字省略出现 box-orient

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961510.html

posted @ 2022-12-06 22:22 轻风细雨_林木木阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

轻风细雨_林木木

做最优秀的自己。

换灯片、轮播图---详细说明

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html>
	<head>
	<title>轮播图效果</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/index.css">
	<script type="text/javascript" src="./js/index.js"></script>
	</head>
	<body>
	<div id = "container">
	<!-- 图片界面 -->
	<div id="list" style="left: -600px;">
	<img src="images/5.jpg" alt="1" />
	<img src="images/1.jpg" alt="1" />
	<img src="images/2.jpg" alt="2" />
	<img src="images/3.jpg" alt="3" />
	<img src="images/4.jpg" alt="4" />
	<img src="images/5.jpg" alt="5" />
	<img src="images/1.jpg" alt="5" />
	</div>
	<!-- 底部小圆点 -->
	<div id="buttons">
	<span index="1" class="on"></span>
	<span index="2"></span>
	<span index="3"></span>
	<span index="4"></span>
	<span index="5"></span>
	</div>
	<!-- 左右跳转按键 -->
	<a href="javascript:;" id="prev" class="arrow"><</a>
	<a href="javascript:;" id="next" class="arrow">></a>
	</div>

	</body>
	</html>

	* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	}

	body {
	padding: 20px;
	}

	/图片div的大小和定位方式/
	#container {
	position: relative;
	width: 600px;
	height: 400px;
	border: 3px solid #333;
	overflow: hidden;/内容溢出的时候隐藏内容/
	}

	/所有图片的横向大小/
	#list {
	position: absolute;
	z-index: 1;
	width: 4200px;
	height: 400px;
	}

	#list img {
	float: left;
	width: 600px;
	height: 400px;
	}

	/图片下部的小圆点/
	#buttons {
	position: absolute;
	left: 250px;
	bottom: 20px;
	z-index: 2;
	height: 10px;
	width: 100px;
	}

	#buttons span {
	float: left;
	margin-right: 5px;
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	border-radius: 50%;/圆角标签/
	background: #333;
	cursor: pointer;/鼠标移动上去小手标签出现/
	}

	/class为on的显示橘红色/
	#buttons .on {
	background: orangered;
	}

	/左右箭头标签/
	.arrow {
	position: absolute;
	top: 180px;
	z-index: 2;
	display: none; /一般不被显示/
	width: 40px;
	height: 40px;
	font-size: 36px;
	font-weight: bold;
	line-height: 39px;
	text-align: center;
	color: #fff;
	background-color: RGBA(0, 0, 0, .3);
	cursor: pointer; /移动上出现小手/
	}

	.arrow:hover {
	background-color: RGBA(0, 0, 0, .7);
	}

	/移动上去左右标签显示/
	#container:hover .arrow {
	display: block;
	}

	#prev {
	left: 20px;
	}

	#next {
	right: 20px;
	}

	window.onload = function() {
	var list = document.getElementById('list');
	var prev = document.getElementById('prev'); //前进按键
	var next = document.getElementById('next'); //后退按键

	function animate(offset) {
	var newLeft = parseInt(list.style.left) + offset; //parseInt是将字符串解析成int整数, 再加后面的600的值
	list.style.left = newLeft + 'px';

	//判断循环
	if(newLeft<-3000){
	list.style.left = -600 + 'px';
	}
	if(newLeft>-600){
	list.style.left = -3000 + 'px';
	}
	}

	//图片循环
	var timer;
	function play(){
	timer = setInterval(function(){ //setInterval()执行多次，setTimeout()只执行一次
	next.onclick()
	},1500);
	}
	play();

	//鼠标移动到图片,图片不在跳动
	var container = document.getElementById('container');

	function stop() {
	clearInterval(timer);
	}
	container.onmouseover = stop;
	container.onmouseout = play;

	/*********************************************************/

	var buttons = document.getElementById('buttons').getElementsByTagName('span');
	var index = 1;

	function buttonsShow() {
	//循环清除圆点样式
	for (var i = 0; i < buttons.length; i++) {
	//className获取类属性名
	if (buttons[i].className == 'on') {
	buttons[i].className = '';
	}
	}
	//数组从0开始，故index需要-1
	buttons[index - 1].className = 'on';
	}


	//点击小点跳转指定图片
	//使用了匿名函数执行的语法()表示执行, ()()写法是立即执行
	//闭包: 函数里面放一个匿名函数就叫闭包
	for (var i = 0; i < buttons.length; i++) {

	(function(i) {
	buttons[i].onclick = function() {
	console.log(i);
	// getAttribute 获取属性值
	var clickIndex = parseInt(this.getAttribute('index'));
	var offset = 600 * (index - clickIndex);
	animate(offset);
	index = clickIndex;
	buttonsShow();
	}
	})(i)
	}


	//点击左键事件, 调用方法
	//function(){ } 书写格式可以做到, js代码和方法一起写
	prev.onclick = function() {
	index -= 1;
	if (index < 1) {
	index = 5;
	}
	buttonsShow();
	animate(600);
	}

	//点击右键事件, 调用方法
	next.onclick = function() {
	//由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
	index += 1;
	if (index > 5) {
	index = 1;
	}
	buttonsShow();
	animate(-600);
	}

	/*********************************************************/

	}