JavaScript實現(xiàn)簡單輪播圖效果

更新時間：2018年12月01日 14:53:16 作者：莉莎的腦瓜疼呀腦瓜疼~

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)圖片輪播，左右翻轉(zhuǎn)，圖片切換顯示等效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)簡單輪播圖效果的具體代碼，可以實現(xiàn)左右翻轉(zhuǎn)，圖片切換顯示等效果，供大家參考，具體內(nèi)容如下

效果展示：

代碼展示：

<!doctype html>
 
<html>
<!-- 
 學(xué)習(xí)功能：使用JavaScript實現(xiàn)圖片輪播，左右翻轉(zhuǎn)，圖片切換顯示等。
 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; //獲得圖片節(jié)點
 navs = document.getElementById("shidian_nav").children; // 獲得右下圖片導(dǎo)航的節(jié)點
 
 //下一張輪播圖片
 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();
 }
 
 //獲得當(dāng)前的節(jié)點
 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: