js/jquery中实现图片轮播
生活随笔
收集整理的這篇文章主要介紹了
js/jquery中实现图片轮播
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一，jquery方法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片輪播 jq(左右切換)</title> <style type="text/css"> ??body,div,ul,li,a,img{margin: 0;padding: 0;} ??ul,li{list-style: none;} ??a{text-decoration: none;} ??#wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;} ??#banner{position:relative;width: 400px;height: 200px;overflow: hidden;} ??.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;} ??.imgList li{float:left;display: inline;} ??#prev, ??#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);} ??#prev{left: 10px;} ??#next{right: 10px;} ??#prev:hover, ??#next:hover{opacity: 0.5;filter:alpha(opacity=50);} ??.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;} ??.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;} ??.infoList li{display: none;} ??.infoList .infoOn{display: inline;color: white;} ??.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;} ??.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;} ??.indexList .indexOn{background: red;font-weight: bold;color: white;} </style> </head> <body> ??<div id="wrapper"><!-- 最外層部分 --> ????<div id="banner"><!-- 輪播部分 --> ??????<ul class="imgList"><!-- 圖片部分 --> ????????<li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li> ??????<li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li> ??????<li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li> ??????<li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li> ??????<li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li> ??????</ul> ??????<img src="./img/prev.png" width="20px" height="40px" id="prev"> ??????<img src="./img/next.png" width="20px" height="40px" id="next"> ??????<div class="bg"></div> <!-- 圖片底部背景層部分--> ??????<ul class="infoList"><!-- 圖片左下角文字信息部分 --> ????????<li class="infoOn">puss in boots1</li> ????????<li>puss in boots2</li> ????????<li>puss in boots3</li> ????????<li>puss in boots4</li> ????????<li>puss in boots5</li> ??????</ul> ??????<ul class="indexList"><!-- 圖片右下角序號部分 --> ????????<li class="indexOn">1</li> ????????<li>2</li> ????????<li>3</li> ????????<li>4</li> ????????<li>5</li> ??????</ul> ????</div> ??</div> ??<script type="text/javascript" src="./js/jquery.min.js"></script> ??<script type="text/javascript"> ??var curIndex = 0, //當前index ??????imgLen = $(".imgList li").length; //圖片總數 ?????// 定時器自動變換2.5秒每次 ??var autoChange = setInterval(function(){ ????if(curIndex < imgLen-1){ ??????curIndex ++; ????}else{ ??????curIndex = 0; ????} ????//調用變換處理函數 ????changeTo(curIndex); ??},2500); ???//左箭頭滑入滑出事件處理 ??$("#prev").hover(function(){ ????//滑入清除定時器 ????clearInterval(autoChange); ??},function(){ ????//滑出則重置定時器 ????autoChangeAgain(); ??}); ??//左箭頭點擊處理 ??$("#prev").click(function(){ ????//根據curIndex進行上一個圖片處理 ????curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1); ????changeTo(curIndex); ??}); ??//右箭頭滑入滑出事件處理 ??$("#next").hover(function(){ ????//滑入清除定時器 ????clearInterval(autoChange); ??},function(){ ????//滑出則重置定時器 ????autoChangeAgain(); ??}); ??//右箭頭點擊處理 ??$("#next").click(function(){ ????curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0; ????changeTo(curIndex); ??}); ??//對右下角按鈕index進行事件綁定處理等 ??$(".indexList").find("li").each(function(item){ ????$(this).hover(function(){ ??????clearInterval(autoChange); ??????changeTo(item); ??????curIndex = item; ????},function(){ ??????autoChangeAgain(); ????}); ??}); ??//清除定時器時候的重置定時器--封裝 ??function autoChangeAgain(){ ??????autoChange = setInterval(function(){ ??????if(curIndex < imgLen-1){ ????????curIndex ++; ??????}else{ ????????curIndex = 0; ??????} ????//調用變換處理函數 ??????changeTo(curIndex); ????},2500); ????} ??function changeTo(num){ ????var goLeft = num * 400; ????$(".imgList").animate({left: "-" + goLeft + "px"},500); ????$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn"); ????$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn"); ??} ??</script> </body> </html> -------------------------------------------------------------------------------------------------------------------------------------------------------------- 二，原生JS方法 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片輪播 js原生(左右切換)</title> <style type="text/css"> ??body,div,ul,li,a,img{margin: 0;padding: 0;} ??ul,li{list-style: none;} ??a{text-decoration: none;} ??#wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;} ??#banner{position:relative;width: 400px;height: 200px;overflow: hidden;} ??.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;} ??.imgList li{float:left;display: inline;} ??#prev, ??#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);} ??#prev{left: 10px;} ??#next{right: 10px;} ??#prev:hover, ??#next:hover{opacity: 0.5;filter:alpha(opacity=50);} ??.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;} ??.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;} ??.infoList li{display: none;} ??.infoList .infoOn{display: inline;color: white;} ??.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;} ??.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;} ??.indexList .indexOn{background: red;font-weight: bold;color: white;} </style> </head> <body> ??<div id="wrapper"><!-- 最外層部分 --> ????<div id="banner"><!-- 輪播部分 --> ??????<ul class="imgList"><!-- 圖片部分 --> ????????<li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li> ??????<li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li> ??????<li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li> ??????<li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li> ??????<li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li> ??????</ul> ??????<img src="./img/prev.png" width="20px" height="40px" id="prev"> ??????<img src="./img/next.png" width="20px" height="40px" id="next"> ??????<div class="bg"></div> <!-- 圖片底部背景層部分--> ??????<ul class="infoList"><!-- 圖片左下角文字信息部分 --> ????????<li class="infoOn">puss in boots1</li> ????????<li>puss in boots2</li> ????????<li>puss in boots3</li> ????????<li>puss in boots4</li> ????????<li>puss in boots5</li> ??????</ul> ??????<ul class="indexList"><!-- 圖片右下角序號部分 --> ????????<li class="indexOn">1</li> ????????<li>2</li> ????????<li>3</li> ????????<li>4</li> ????????<li>5</li> ??????</ul> ????</div> ??</div> ??<script type="text/javascript"> ??var curIndex = 0, //當前index ??????imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 ??????imgLen = imgArr.length, ??????infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組 ??????indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組 ?????// 定時器自動變換2.5秒每次 ??var autoChange = setInterval(function(){ ????if(curIndex < imgLen -1){ ??????curIndex ++; ????}else{ ??????curIndex = 0; ????} ????//調用變換處理函數 ????changeTo(curIndex); ??},2500); ??//清除定時器時候的重置定時器--封裝 ??function autoChangeAgain(){ ??????autoChange = setInterval(function(){ ??????if(curIndex < imgLen -1){ ????????curIndex ++; ??????}else{ ????????curIndex = 0; ??????} ????//調用變換處理函數 ??????changeTo(curIndex); ????},2500); ????} ??//調用添加事件處理 ??addEvent(); ??//給左右箭頭和右下角的圖片index添加事件處理 ?function addEvent(){ ??for(var i=0;i<imgLen;i++){ ????//閉包防止作用域內活動對象item的影響 ????(function(_i){ ????//鼠標滑過則清除定時器，并作變換處理 ????indexArr[_i].onmouseover = function(){ ??????clearTimeout(autoChange); ??????changeTo(_i); ??????curIndex = _i; ????}; ????//鼠標滑出則重置定時器處理 ????indexArr[_i].onmouseout = function(){ ??????autoChangeAgain(); ????}; ?????})(i); ??} ??//給左箭頭prev添加上一個事件 ??var prev = document.getElementById("prev"); ??prev.onmouseover = function(){ ????//滑入清除定時器 ????clearInterval(autoChange); ??}; ??prev.onclick = function(){ ????//根據curIndex進行上一個圖片處理 ????curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1); ????changeTo(curIndex); ??}; ??prev.onmouseout = function(){ ????//滑出則重置定時器 ????autoChangeAgain(); ??}; ???//給右箭頭next添加下一個事件 ??var next = document.getElementById("next"); ??next.onmouseover = function(){ ????clearInterval(autoChange); ??}; ??next.onclick = function(){ ????curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0; ????changeTo(curIndex); ??}; ??next.onmouseout = function(){ ????autoChangeAgain(); ??}; } ??//左右切換處理函數 ??function changeTo(num){ ????//設置image ????var imgList = getElementsByClassName("imgList")[0]; ????goLeft(imgList,num*400); //左移一定距離 ????//設置image 的 info ????var curInfo = getElementsByClassName("infoOn")[0]; ????removeClass(curInfo,"infoOn"); ????addClass(infoArr[num],"infoOn"); ????//設置image的控制下標 index ????var _curIndex = getElementsByClassName("indexOn")[0]; ????removeClass(_curIndex,"indexOn"); ????addClass(indexArr[num],"indexOn"); ??} ??//圖片組相對原始左移dist px距離 ??function goLeft(elem,dist){ ????if(dist == 400){ //第一次時設置left為0px 或者直接使用內嵌法 style="left:0;" ??????elem.style.left = "0px"; ????} ????var toLeft; //判斷圖片移動方向是否為左 ????dist = dist + parseInt(elem.style.left); //圖片組相對當前移動距離 ????if(dist<0){? ??????toLeft = false; ??????dist = Math.abs(dist); ????}else{ ??????toLeft = true; ????} ????for(var i=0;i<= dist/20;i++){ //這里設定緩慢移動，10階每階40px ??????(function(_i){ ????????var pos = parseInt(elem.style.left); //獲取當前left ????????setTimeout(function(){ ??????????pos += (toLeft)? -(_i * 20) : (_i * 20); //根據toLeft值指定圖片組位置改變 ??????????//console.log(pos); ??????????elem.style.left = pos + "px"; ????????},_i * 25); //每階間隔50毫秒 ??????})(i); ????} ??} ??//通過class獲取節點 ??function getElementsByClassName(className){ ????var classArr = []; ????var tags = document.getElementsByTagName('*'); ????for(var item in tags){ ??????if(tags[item].nodeType == 1){ ????????if(tags[item].getAttribute('class') == className){ ??????????classArr.push(tags[item]); ????????} ??????} ????} ????return classArr; //返回 ??} ??// 判斷obj是否有此class ??function hasClass(obj,cls){? //class位于單詞邊界 ????return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); ???} ???//給 obj添加class ??function addClass(obj,cls){ ????if(!this.hasClass(obj,cls)){ ???????obj.className += cls; ????} ??} ??//移除obj對應的class ??function removeClass(obj,cls){ ????if(hasClass(obj,cls)){ ??????var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); ?????????obj.className = obj.className.replace(reg,''); ????} ??} ??</script> </body> </html>轉載于:https://www.cnblogs.com/hubgit/p/5774617.html
總結
以上是生活随笔為你收集整理的js/jquery中实现图片轮播的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hdu---5455---fang fa
- 下一篇： iOS本地化项目上传到gitHub