JavaScript实现简单轮播图效果

(编辑：jimmy 日期: 2024/11/19 浏览：2)

本文实例为大家分享了js实现简单轮播图效果的具体代码，可以实现左右翻转，图片切换显示等效果，供大家参考，具体内容如下

效果展示：

代码展示：

<!doctype html>
 
<html>
<!-- 
 学习功能：使用JavaScript实现图片轮播，左右翻转，图片切换显示等。
 author: lisa于2018-5-30
 -->
<title>
 <meta charset="utf-8">
</title>
 
<body>
 <div class="maindiv">
 <style>
 * {
 margin: 0px;
 padding: 0px;
 }
 
 .shidian {
 width: 600px;
 height: 300px;
 position: relative;
 }
 
 .shidian>#shidian_img {
 width: 100%;
 height: 100%;
 
 }
 
 .shidian>#shidian_img li {
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0px;
 top: 0px;
 }
 
 .shidian>#shidian_img img {
 width: 100%;
 height: 100%;
 }
 
 .shidian>#shidian_nav li {
 float: left;
 width: 20px;
 height: 20px;
 background: #ffffff;
 border: 1px #ffff00 solid;
 margin-left: 10px;
 text-align: center;
 line-height: 20px;
 list-style: none;
 }
 
 .shidian>#shidian_nav {
 position: absolute;
 right: 10px;
 bottom: 10px;
 }
 
 .shidian>#shidian_nav .active {
 background: 0000ff;
 color: black;
 cursor: pointer;
 }
 
 .shidian .img_nav {
 position: absolute;
 top: 140px;
 width: 100%
 }
 
 .shidian .img_nav .left {
 cursor: pointer;
 }
 
 .shidian .img_nav .right {
 cursor: pointer;
 float: right;
 }
 </style>
 <div class="shidian">
 <ul id="shidian_img" onmouseover="stop_img()" onmouseout="start_img()">
 <li><img src="/UploadFiles/2021-04-02/1.jpg">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：GOJS+VUE实现流程图效果

下一篇：jQuery-ui插件sortable实现自由拖动排序