TJS1.JavaScript轮播图

最新推荐文章于 2022-02-08 11:42:59 发布

guqigongzi

最新推荐文章于 2022-02-08 11:42:59 发布

阅读量154

点赞数

文章标签： JS原生组件练手

本文链接：https://blog.csdn.net/guqigongzi/article/details/88618749

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

所有代码

<!--HTML-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript轮播图</title>
<!--调用外部css样式-->
<link rel="stylesheet" href="css/css.css"/>
<!--调用外部的js样式-->
<script src="js/js.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">
    	<!--轮播图片-->
        <div id="list" onmouseover="stop()" onmouseout="play()">
        	<div class="picture"><img src="img/1.jpg"/></div>
            <div class="picture"><img src="img/2.jpg"/></div>
            <div class="picture"><img src="img/3.jpg"/></div>
            <div class="picture"><img src="img/4.jpg"/></div>
        </div>
        <!--轮播图片对应小圆点-->
        <div id="button">
        	<span class="dot" onclick="dots(0)"></span>	
            <span class="dot" onclick="dots(1)"></span>
            <span class="dot" onclick="dots(2)"></span>
            <span class="dot" onclick="dots(3)"></span>
        </div>
        <!--轮播图左右按钮-->
        <a id="prev" onclick="prev_next(-1)"><</a>
 		<a id="next" onclick="prev_next(1)">></a>
    </div>
</body>
</html>

/*CSS*/
/* CSS Document */
*{  margin: 0;
    padding: 0;
}
/*图片的位置*/
#container{
	margin:auto;
	margin-top:20px;
	width: 600px;
    height: 300px;
}
/*图片的大小*/
.picture img{
	z-index:1;
	width: 600px;
    height: 300px;
}
#prev,#next{

    /*按钮大小、背景色、透明度*/
    width:40px;
	height:40px;
    background-color:#333;
	opacity: 0.7;

    /*字体大小、形状、颜色*/
	font-size:23px;
	font-weight:bold;
    color:white;
	
	/*层数、div的绝对定位、文本的位置*/
	z-index:2;
	position:absolute;
	top:140px;
	padding-top:5px;
	text-align:center;
	
	
}
/*鼠标悬浮响应*/
#prev:hover,#next:hover{
	opacity: 0.9;
}
/*右按钮的div绝对定位的调整*/
#next{
	margin-left:560px;
}
/*小圆点所在块位置的绝对定位*/
#button{
	position:absolute;
	top:290px;
	margin-left:227px
}
#button span{
    /*小圆点形状*/
	width:14px;
	height:14px;
	border-radius:7px;	
	/*背景色、透明度*/
	background-color:#000;
	opacity: 0.2;
	/*层数*/	
	z-index:2;
    /*小圆点具体位置*/
	margin-right:30px;
	float:left;
}

// JavaScript Document
var picture=document.getElementsByClassName("picture");
var dot=document.getElementsByClassName("dot");
var prev = document.getElementById("prev");
var now=0;
var timer;
window.onload=function(){
	show(now);
}
//图片的切换
function show(n){
    //播放到最后一张图
	if (n>=picture.length) {
		now=0;
	}
    //第一张图
	if(n<0){
		now=picture.length-1;
	}
    //确保只有一张图片显示和其对应圆点变亮
	for(var i=0;i<picture.length;i++){
		picture[i].style.display = "none";
		dot[i].style.opacity = 0.6;
	}
	picture[now].style.display = "block";
	dot[now].style.opacity =1;
}
//定时播放
function play() {
   timer = setInterval(function () {
        prev_next(1)
    }, 1000)
}
//小圆点响应事件
function dots(n){
	show(now=n);
}
//左右按钮响应事件
function prev_next(n){
	show(now+=n);
}
//悬浮停止--清除定时器
function stop() {
	clearInterval(timer);
}

主要思路

1.HTML布局（轮播图片+左右按钮+小圆点）

2.CSS排版

（1）轮播图片的大小和位置

（2）左右按钮（符号大小、形状、颜色+背景色+鼠标悬浮）

（3）小圆点（形状、颜色、位置）

3.JavaScript的事件响应

（1）图片的切换

（2）左右按钮

（3）小圆点

（4）自动播放--定时器

（5）悬浮暂停---清除的定时器

（6）页面显示不会同时出现所有照片或没有照片

详细讲解

1.HTML布局（轮播图片+左右按钮+小圆点）

<div id="containt">
    	<!--轮播图片-->
        <div id="list" onmouseover="stop()" onmouseout="play()">
        	<div class="picture"><img src="img/1.jpg"/></div>
            <div class="picture"><img src="img/2.jpg"/></div>
            <div class="picture"><img src="img/3.jpg"/></div>
            <div class="picture"><img src="img/4.jpg"/></div>
        </div>
        <!--轮播图片对应小圆点-->
        <div id="button">
        	<span class="dot" onclick="dots(0)"></span>	
            <span class="dot" onclick="dots(1)"></span>
            <span class="dot" onclick="dots(2)"></span>
            <span class="dot" onclick="dots(3)"></span>
        </div>
        <!--轮播图左右按钮-->
        <a id="prev" onclick="prev_next(-1)"><</a>
 		<a id="next" onclick="prev_next(1)">></a>
    </div>

2.CSS排版

（1）轮播图片的大小和位置

/*图片的位置*/
#containt{
	margin:auto;
	margin-top:20px;
	width: 600px;
    height: 300px;
}
/*图片的大小*/
.picture img{
	z-index:1;
	width: 600px;
    height: 300px;
}

（2）左右按钮（符号大小、形状、颜色+背景色+鼠标悬浮）

#prev,#next{

    /*按钮大小、背景色、透明度*/
    width:40px;
	height:40px;
    background-color:#333;
	opacity: 0.7;

    /*字体大小、形状、颜色*/
	font-size:23px;
	font-weight:bold;
    color:white;
	
	/*层数、div的绝对定位、文本的位置*/
	z-index:2;
	position:absolute;
	top:140px;
	padding-top:5px;
	text-align:center;
	
	
}
/*鼠标悬浮响应*/
#prev:hover,#next:hover{
	opacity: 0.9;
}
/*右按钮的div绝对定位的调整*/
#next{
	margin-left:560px;
}

（3）小圆点（形状、颜色、位置）

/*小圆点所在块位置的绝对定位*/
#button{
	position:absolute;
	top:290px;
	margin-left:227px
}
#button span{
    /*小圆点形状*/
	width:14px;
	height:14px;
	border-radius:7px;	
	/*背景色、透明度*/
	background-color:#000;
	opacity: 0.2;
	/*层数*/	
	z-index:2;
    /*小圆点具体位置*/
	margin-right:30px;
	float:left;
}

3.JavaScript的事件响应

（1）图片的切换

function show(n){
    /*播放到最后一张图*/
	if (n>=picture.length) {
		now=0;
	}
    /*第一张图 */
	if(n<0){
		now=picture.length-1;
	}
    /*确保只有一张图片显示和其对应圆点变亮*/
	for(var i=0;i<picture.length;i++){
		picture[i].style.display = "none";
		dot[i].style.opacity = 0.6;
	}
	picture[now].style.display = "block";
	dot[now].style.opacity =1;
}

（2）左右按钮

function prev_next(n){
	show(now+=n);
}

（3）小圆点

function dots(n){
    show(now=n);
}

（4）自动播放--定时器

function play() {
   var timer = setInterval(function () {
        prev_next(1)
    }, 5000)
}

（5）悬浮暂停---清除的定时器

function stop() {
	clearInterval(timer);
}

（6）页面显示不会同时出现所有照片或没有照片

window.onload=function(){
	show(now);
}

学习知识点

1. CSS水平居中:https://blog.csdn.net/guqigongzi/article/details/88604456

2. CSS透明度:https://blog.csdn.net/guqigongzi/article/details/88620814

3. CSS鼠标悬停:https://blog.csdn.net/guqigongzi/article/details/88620829

4. CSS绝对定位与相对定位:https://blog.csdn.net/guqigongzi/article/details/88620842

5. CSS叠加层数:https://blog.csdn.net/guqigongzi/article/details/88620851

6.JavaScript鼠标移入移出：https://blog.csdn.net/guqigongzi/article/details/88622218

参考网址

通过在以下网址学习，特此感谢！！！

http://www.runoob.com/w3cnote/javascript-slideshow.html

https://www.cnblogs.com/LIUYANZUO/p/5679753.html

guqigongzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录