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

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

JS輪播圖實現(xiàn)簡單代碼

來源：懂視網(wǎng) 責編：小OO 時間：2020-11-27 22:31:48
文檔

JS輪播圖實現(xiàn)簡單代碼

本文實例為大家分享了js輪播圖實現(xiàn)代碼，供大家參考，具體內(nèi)容如下：思路。1、首先要有個盛放圖片的容器，設置為單幅圖片的寬高，且overflow：hidden，這樣保證每次可以只顯示一個圖片。2、Container內(nèi)有個放圖片的list進行position的定位 ，其中的圖片采用float的方式，同時當圖片進行輪播時，改變list的Left值使得其顯示的圖片發(fā)生變化。3、圖片的輪播使用定時器，通過定時器改變list的Left值是的圖片循環(huán)展示。4、當鼠標滑動到圖片上時，清除定時器，圖片停止輪播，當鼠標移出時繼續(xù)進行輪播。5、圖片上有一組小圓點用于與當前顯示的圖片相對應，同時可以通過點擊的方式查看對應的圖片。6、圖片可以通過點擊進行左右滑動顯示。代碼。
推薦度：
導讀本文實例為大家分享了js輪播圖實現(xiàn)代碼，供大家參考，具體內(nèi)容如下：思路。1、首先要有個盛放圖片的容器，設置為單幅圖片的寬高，且overflow：hidden，這樣保證每次可以只顯示一個圖片。2、Container內(nèi)有個放圖片的list進行position的定位 ，其中的圖片采用float的方式，同時當圖片進行輪播時，改變list的Left值使得其顯示的圖片發(fā)生變化。3、圖片的輪播使用定時器，通過定時器改變list的Left值是的圖片循環(huán)展示。4、當鼠標滑動到圖片上時，清除定時器，圖片停止輪播，當鼠標移出時繼續(xù)進行輪播。5、圖片上有一組小圓點用于與當前顯示的圖片相對應，同時可以通過點擊的方式查看對應的圖片。6、圖片可以通過點擊進行左右滑動顯示。代碼。

本文實例為大家分享了js輪播圖實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

思路：

1、首先要有個盛放圖片的容器，設置為單幅圖片的寬高，且overflow：hidden，這樣保證每次可以只顯示一個圖片
2、Container內(nèi)有個放圖片的list進行position的定位 ，其中的圖片采用float的方式，同時當圖片進行輪播時，改變list的Left值使得其顯示的圖片發(fā)生變化。
3、圖片的輪播使用定時器，通過定時器改變list的Left值是的圖片循環(huán)展示
4、當鼠標滑動到圖片上時，清除定時器，圖片停止輪播，當鼠標移出時繼續(xù)進行輪播
5、圖片上有一組小圓點用于與當前顯示的圖片相對應，同時可以通過點擊的方式查看對應的圖片
6、圖片可以通過點擊進行左右滑動顯示

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>輪播圖</title>
 <style type="text/css">
 .container{
 margin:0 auto;
 width:600px;
 height:400px;
 position: relative;
 overflow: hidden;
 border:4px solid gray;
 box-shadow: 3px 3px 5px gray;
 border-radius:10px;
 }
 .list{
 width:4200px;
 height:400px;
 position: absolute;
 top:0px;
 }
 img{
 float:left;
 width:600px;
 height:400px;
 }
 .dots{
 position: absolute;
 left:40%;
 bottom:30px;
 list-style: none;
 }
 .dots li{
 float:left;
 width:8px;
 height:8px;
 border-radius: 50%;
 background: gray;
 margin-left:5px
 }
 .dots .active{
 background: white;
 }
 .pre,.next{
 position: absolute;
 top:40%;
 font-size:40px;
 color:white;
 text-align:center;
 background: rgba(128,128,128,0.5);
 /* display:none;*/
 }
 .pre{
 left:30px;
 }
 .next{
 right:30px;
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="list" style=" left:-600px;">
 <img src="img/5.jpg">
 <img src="img/1.jpg">
 <img src="img/2.jpg">
 <img src="img/3.jpg">
 <img src="img/4.jpg">
 <img src="img/5.jpg">
 <img src="img/1.jpg">
 </div>
 <ul class="dots">
 <li index=1 class="active dot"></li>
 <li index=2 class="dot"></li>
 <li index=3 class="dot"></li>
 <li index=4 class="dot"></li>
 <li index=5 class="dot"></li>
 </ul>
 <div class="pre"><</div>
 <div class="next">></div>
 </div>
<script type="text/javascript">
 var index=1,timer;
 function init(){
 eventBind();
 autoPlay();
 }
 init();
 function autoPlay(){
 timer =setInterval(function () {
 animation(-600);
 dotIndex(true);
 },1000)
 }
 function stopAutoPlay() {
 clearInterval(timer);
 }
 function dotIndex(add){
 if(add){
 index++;
 }
 else{
 index--;
 }
 if(index>5){
 index = 1;
 }
 if(index<1){
 index = 5;
 }
 dotActive();
 }
 function dotActive() {
 var dots = document.getElementsByClassName("dot");
 var len = dots.length;
 for(var i=0 ;i<len ;i++){
 dots[i].className = "dot";
 }

 for(var i=0;i<len;i++){
 /*此處可以不用parseInt，當不用全等時*/
 if(index === parseInt(dots[i].getAttribute("index"))){
 dots[i].className = "dot active";
 }
 }
 }
 function eventBind(){
 /*點的點擊事件*/
 var dots = document.getElementsByClassName("dot");
 var len = dots.length;
 for(var i=0;i<len;i++){
 (function(j){
 dots[j].onclick = function(e){
 var ind = parseInt(dots[j].getAttribute("index"));
 animation((index - ind)*(-600));/*顯示點擊的圖片*/
 index = ind;
 dotActive();
 }
 })(i)
 }
 /*容器的hover事件*/
 var con = document.getElementsByClassName("container")[0];
 /*鼠標移動到容器上時，停止制動滑動，離開時繼續(xù)滾動*/
 con.onmouseover = function (e) {
 stopAutoPlay();
 }
 con.onmouseout =function(e){
 autoPlay();
 }
 /*箭頭事件的綁定*/
 var pre = document.getElementsByClassName("pre")[0];
 var next = document.getElementsByClassName("next")[0];
 pre.onclick = function (e) {
 dotIndex(false);
 animation(600);
 }
 next.onclick = function (e) {
 dotIndex(true);
 animation(-600);
 }
 }
 function animation(offset){
 var lists = document.getElementsByClassName("list")[0];
 var left = parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
 if(left<-3000){
 lists.style.left = "-600px";
 }
 else if(left>-600){
 lists.style.left = "-3000px";
 }
 else{
 lists.style.left = left+"px";
 }
 }

</script>
</body>
</html>

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

文檔

JS輪播圖實現(xiàn)簡單代碼

本文實例為大家分享了js輪播圖實現(xiàn)代碼，供大家參考，具體內(nèi)容如下：思路。1、首先要有個盛放圖片的容器，設置為單幅圖片的寬高，且overflow：hidden，這樣保證每次可以只顯示一個圖片。2、Container內(nèi)有個放圖片的list進行position的定位 ，其中的圖片采用float的方式，同時當圖片進行輪播時，改變list的Left值使得其顯示的圖片發(fā)生變化。3、圖片的輪播使用定時器，通過定時器改變list的Left值是的圖片循環(huán)展示。4、當鼠標滑動到圖片上時，清除定時器，圖片停止輪播，當鼠標移出時繼續(xù)進行輪播。5、圖片上有一組小圓點用于與當前顯示的圖片相對應，同時可以通過點擊的方式查看對應的圖片。6、圖片可以通過點擊進行左右滑動顯示。代碼。
推薦度：
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板： 婷婷在线视频观看 | 国产日韩欧美中文字幕 | 国产全黄a一级毛片 | 日韩欧美一区二区三区在线观看 | 91精品国产综合久久久久久 | 日韩欧美在线观看 | 国产免费高清视频在线观看不卡 | 日韩欧美在线观看 | 99精品欧美一区二区三区综合在线 | 日韩欧美高清一区 | 国产精品久久久久久久久久免费 | 久久精品99久久香蕉国产色戒 | 日韩电影免费在线观看中文字幕 | 精品国产自在在线在线观看 | 亚洲天堂一区二区三区 | 欧美日韩亚洲国产 | 色另类| 国产三级直播 | 亚洲精品社区 | 国产日韩欧美亚洲综合首页 | 国产视频二区 | 国产精品视频一区二区三区w | 中文字幕va一区二区三区 | 国产日韩一区 | 国产性做久久久久久 | 日韩一级精品久久久久 | 国产精品久久久久久久久99热 | 91精品日本久久久久久牛牛 | 欧美日韩精选 | 国产成人+亚洲欧洲 | 国产精品大全国产精品 | 欧美精品v国产精品v日韩精品 | 91欧美在线 | 福利国产 | 国产a久久精品一区二区三区 | 欧美在线观看一区二区三 | 欧美成人精品欧美一级乱黄 | 在线观看亚洲一区二区 | 青青草原国产一区二区 | 一区二区三区四区电影 | 最新国产在线观看 |