JavaScript实现简单轮播图效果
(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
本文实例为大家分享了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">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：jQuery-ui插件sortable实现自由拖动排序