原生js點選輪播 點選切換圖片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>點選輪播圖</title> </head> <style> .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 40%; bottom:20px; z-index: 2; } .container .buttons span { margin-left: 10px; display: inline-block; width: 7px; height: 7px; background-color: #D4D4D4; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: #558949; } .container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } </style> <body> <div class="container"> <div class="wrap" style="left:-600px;"> <img alt=""> <img src="./img/jd_app3.png" alt=""> <img src="./img/jd_app4.png" alt=""> <img src="./img/jd_app5.png" alt=""> <img src="./img/jd_app6.png" alt=""> <img src="./img/jd_app7.png" alt=""> </div> <div class="buttons"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script> var wrap = document.querySelector(".wrap"); var index = 0; var dots = document.getElementsByTagName("span"); function showCurrentDot () { for(var i = 0, len = dots.length; i < len; i++){ dots[i].className = ""; } dots[index].className = "on"; } index++; if(index > 4){ index = 0; } index--; if(index < 0){ index = 4; } showCurrentDot(); for (var i = 0, len = dots.length; i < len; i++){ (function(i){ dots[i].onclick = function () { var dis = index - i; if(index == 4 && parseInt(wrap.style.left)!==-3000){ dis = dis - 5; } //和使用prev和next相同,在最開始的照片5和最終的照片1在使用時會出現問題,導致符號和位數的出錯,做相應地處理即可 if(index == 0 && parseInt(wrap.style.left)!== -600){ dis = 5 + dis; } wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px"; index = i; showCurrentDot(); } })(i); } </script> </body> </html>
相關推薦
原生js點選輪播 點選切換圖片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>點選輪播圖</title> </head> <
原生js實現無縫輪播
cli spl city ive ont eve 通過 動畫 change 原生js實現無縫輪播 因為要做到無縫,所以就要把第一張圖片和最後一張連接起來,在此處采用js克隆了第一張圖片的節點,添加到最後,顯示圖片序號的小圓按鈕也是使用js動態添加的。 html部分
原生js實現簡單輪播圖效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <style> .father{
原生JS實現旋轉輪播圖+文字內容切換
window.onload = function () { var arr = [ { // 1 width:120, top:11, left:87, opacity:20,
原生JS例項之輪播圖《由簡單到炫酷》系列二
本文主要講述JavaScript原生輪播圖例項,如需JavaScript基礎請到菜鳥教程自己補習。 目錄結構 目標與思路 本文講述最基礎的版本: 頁面載入完成後自動輪播 實現思路: 思路: 1、獲取圖
原生JS例項之輪播圖《由簡單到炫酷》系列一
本文主要講述JavaScript原生輪播圖例項,如需JavaScript基礎請到菜鳥教程自己補習。 目錄結構 目標與思路 本文講述最基礎的版本: 點選圖片切換到下一張圖片 實現思路: 思路: 1、獲取圖片標
用原生JS寫無縫輪播
琢磨了幾個小時終於寫出來了,上程式碼 這是佈局結構 <div id="box"><ul><li><a href="javascript:;"><img src="images/1.jpg" alt=""></
焦點輪播圖(7)原生JS實現焦點輪播圖--完整程式碼
輪播圖終於更完了,附上完整程式碼: <html> <head> <meta charset="utf-8" /> <title>焦點輪播圖</title> <style type=
用原生JS實現旋轉輪播圖
html程式碼<div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#"
Android 輪播圖Banner切換圖片的效果
Android XBanner使用詳解 2018年03月14日 08:19:59 AND_Devil 閱讀數:910 前言:現如今的很多APP都
js點選輪播或者自動輪播圖程式碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk"> <tit
小程式點選輪播圖跳轉到tab導航介面
需求:小程式點選輪播圖跳轉到tab導航介面,效果如下所示 點選輪播圖的圖片,跳轉到我的介面上 先實現以下的程式碼,在以下的基礎上,開始實現需求 微信小程式底部導航欄https://www.jianshu.com/p/89a63dc99839 微信小程式輪播
仿小紅書圖片-橫條-文字聯動點選輪播
"大三暑假找了個做APP的公司實習,當時說好有大牛帶著做Android,工作內容卻變成了前端,並且技術主管要求我儘可能用Vue.js來做網站。那時候我只會一點點HTML,CSS也只會一些很基礎的內容,別說Vue了,JS我都不懂,並且整個公司的前端就只有我一個人,遇到不會的
點選輪播圖片左右按鈕,實現輪播效果
點選左右按鈕,實現圖片輪播效果,js程式碼如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_c
仿京東首頁點選輪播圖進入唱片頁面
* tuijian : {"list":[{"bargainPrice":11800,"createtime":"2017-10-10T17:33:37","detailUrl":"https://item.m.jd.com/product/4338107.html?utm#_source=andr
類似酷狗主頁面的輪播點選效果
第一步,實現自動輪播 var index = 0; var stop = false; function xianshi() { if (stop) { return; } if (index < 3) { index++; }
JS原生帶小白點輪播圖
adding 完成 ext == 毫秒 oat auto margin add 咱們剛剛說了js原生輪播圖,現在給他加上可以隨著一起走動的小圓點吧! css代碼: *{ margin:0px; padding: 0px; } ul{ widt
vue2.x實戰移動端音樂app的better-scroll 使用1.10.0版本遇到的坑設定dot的輪播點和輪播圖片不對應(二)
1.dots的長度//這裡不變 console.log(this.dots)長度為5 _initDots(){ this.dots=new Array(this.children.length) console.log(this.dots)
圖片輪播、自動輪播、點擊輪播(一)
新的 set ttr n) settime document .get offset span HTML部分 <div id="slide_two" class="slide"> <ul style="transform: translateX(-
圖片輪播點擊輪播(二)
-s pad mat gin += col urn 圖片輪播 輪播 自定義點擊左右滾動 HTML部分 <div id="img-slider"> <button id="prev"><img src="image/left