JavaScript实现自动轮播

最新推荐文章于 2024-07-26 11:41:15 发布

hongchen_lian

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量504

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/hongchen_lian/article/details/103905072

版权

JavaScript实现自动轮播

实现效果

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
	<style>
	        *{
   
	            padding:0;
	            margin: 0;
	        }
	        div{
   
	            position: relative;
	            width: 800px;
	            height: 400px;
	            margin: 100px auto 0 auto;
	        }
	        #view{
   
	            width: 800px;
	            height: 400px;
	            margin: 0 auto;
	        }
	        img{
   
	            width: 800px;
				height: 400px;
	            display: none;
	        }
	        #dote{
   
	            position: absolute;
	            bottom:40px;
	            left:350px;
	            
	        }
	        #dote li{
   
	            list-style: none;
	            margin: 0 5px;
	
	            width: 15px;
	            height: 15px;
	            border-radius: 50%;
	            background-color: #dedede;
	            float: left;
	        }
	        #left{
   
	            position: absolute;
	            background-color: #333333

最低0.47元/天解锁文章

hongchen_lian

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现自动轮播

JavaScript实现自动轮播实现效果代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图</title> <style> *{ padding:0; ...
复制链接

扫一扫