JavaScript實現簡單輪播圖效果

來源：懂視網責編：小OO 時間：2020-11-27 22:03:04

JavaScript實現簡單輪播圖效果

本文實例為大家分享了js實現簡單輪播圖效果的具體代碼，可以實現左右翻轉，圖片切換顯示等效果，供大家參考，具體內容如下：效果展示。代碼展示。<。doctype html>；<；html>；<。--學習功能：使用JavaScript實現圖片輪播，左右翻轉，圖片切換顯示等

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了js實現簡單輪播圖效果的具體代碼，可以實現左右翻轉，圖片切換顯示等效果，供大家參考，具體內容如下：效果展示。代碼展示。<。doctype html>；<；html>；<。--學習功能：使用JavaScript實現圖片輪播，左右翻轉，圖片切換顯示等

本文實例為大家分享了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="./image/1.jpg" /></li>
 <li><img src="./image/3.jpg" /></li>
 <li><img src="./image/2.jpg" /></li>
 <li><img src="./image/4.jpg" /></li>
 </ul>
 <ul id="shidian_nav">
 <li class="active" onmouseover="show_img1(this);">1</li>
 <li class="active" onmouseover="show_img1(this);">2</li>
 <li class="active" onmouseover="show_img1(this);">3</li>
 <li class="active" onmouseover="show_img1(this);">4</li>
 </ul>
 <div class="img_nav">
 <span class="left" onclick="left_img()"><<</span>
 <span class="right" onclick="right_img()">>></span>
 </div>
 </div>
 
 <script>
 index = 0;
 imgs = document.getElementById("shidian_img").children; //獲得圖片節點
 navs = document.getElementById("shidian_nav").children; // 獲得右下圖片導航的節點
 
 //下一張輪播圖片
 function next_img() {
 index++;
 if (index >= imgs.length) {
 index = 0;
 }
 show_log();
 }
 
 //正常顯示圖片
 function show_log() {
 for (i = 0; i < imgs.length; i++) {
 imgs[i].style.display = "none";
 imgs[i].className = "";
 }
 //console.log(index)
 if (index >= imgs.length) {
 index = 0;
 }
 imgs[index].style.display = "block";
 imgs[index].className = "active";
 }
 show_log();
 timer = setInterval(next_img, 1000);
 
 function stop_img() {
 clearInterval(timer);
 }
 
 function start_img() {
 timer = setInterval(next_img, 1000);
 }
 
 //隨機切換顯示圖片
 function show_img1(obj) {
 stop_img();
 index = getIndex(obj.parentNode, obj);
 show_log();
 
 }
 
 //向左翻圖片
 function left_img() {
 stop_img();
 index--;
 if (index < 0) index = imgs.length - 1;
 show_log();
 start_img();
 }
 
 //向右翻圖片
 function right_img() {
 stop_img();
 index++;
 if (index > imgs.length) index = 0;
 show_log();
 start_img();
 }
 
 //獲得當前的節點
 function getIndex(parent, obj) {
 //console.log(obj.innerHTML);
 e = parent.children;
 for (i = 0; i < e.length; i++) {
 if (e[i] == obj) {
 return i;
 }
 }
 }
 </script>
 </div>
</body>
 
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript實現簡單輪播圖效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：簡單實現 js

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

JavaScript實現簡單輪播圖效果

JavaScript實現簡單輪播圖效果

JavaScript實現簡單輪播圖效果

最新推薦

猜你喜歡

熱門推薦