html+css+jQuery實現多種圖片簡單切換功能大綜合
阿新 • • 發佈：2019-02-08
學習滑鼠滑動監聽事件，順便了複習一些其他相關的事件，記錄下來以備下次實現類似功能時參考。
擁有以下功能：
1.向左向右無縫滑動
2.自動輪播
3.滑鼠左右滑動，img移動
4.滑鼠懸浮img，img停止輪播功能
5.滑鼠移動到底部原點，顯示哪張圖片
1.html程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="banner">
<ul class="img">
<li><img src="img/0.jpg" alt=""/></li>
<li><img src="img/0.jpg" alt="" /></li>
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html> 2.css程式碼如下：
*{ padding:0px; margin:0px;list-style:none;} .banner { width:500px; height:300px; margin:100px auto; border:1px solid #808080; position:relative; overflow:hidden;} .banner .img{width:5000px; position:absolute; left:0px;top:0px;} .banner .img img{width:500px; height:300px;} .banner .img li{float:left;} .banner .num { position:absolute; width:100%; bottom:10px; left:0px; text-align:center; font-size:0px;} .banner .num li { width:10px; height:10px; background-color:#888; border-radius:50%;display:inline-block; margin:0px 3px; cursor:pointer;} .banner .num li.on {background-color: #ff6a00;} .banner .btn { width: 30px;height: 50px;background-color: #808080;opacity: 0.5; filter:alpha(opacity:0.5); position:absolute;top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; font-size:40px; color:#fff; font-family:"宋體"; display:none; } .banner .btn_l { left:0px;} .banner .btn_r { right:0px;} .banner:hover .btn { display:block;}
3.js 程式碼以及相應解釋如下
$(document).ready(function () { var i = 0; var clone = $(".banner .img li").first().clone();//克隆第一張圖片 $(".banner .img").append(clone);//複製到列表最後 var size = $(".banner .img li").size(); console.log(size);//計算li的數量 //新增四個li,就是新增圓點 for (var j = 0; j < size-1; j++) { $(".banner .num").append("<li></li>"); } //給第一個li新增class on $(".banner .num li").first().addClass("on"); /*移動事件*/ function move() { if (i == size) { $(".banner .img").css({ left: 0 }); i = 1; } if (i == -1) { $(".banner .img").css({ left: -(size - 1) * 500 }); i = size - 2; } $(".banner .img").stop().animate({ left: -i * 500 }, 500); if (i == size - 1) { //eq(index)選擇器選取帶有指定 index 值的元素 //siblings()遍歷所有同胞元素 $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on"); } else { $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on"); } } //var t = setInterval(function () { i++; move();},2000); //$(selector).hover(inFunction,outFunction) /*自動輪播*/ /*滑鼠懸停事件*/ /*$(".banner").hover(function () { clearInterval(t);//滑鼠懸停時清除定時器 }, function () { t = setInterval(function () { i++; move(); }, 2000); //滑鼠移出時重置定時器 });*/ /*滑鼠滾動監聽事件*/ var scrollFunc=function(e){ ee=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta>0){ console.log(e.wheelDelta); i++; console.log(i); move(); }else{ i--; console.log(e.wheelDelta); console.log(i); move(); } }else if(e.detail){//Firefox if(e.detail>0){ move(); }else{ move(); } } } /*註冊事件*/ if(document.addEventListener){ //addEventListener(event,function,useCapture) //useCapture為boolean值，false(預設)z在冒泡階段執行，ture在捕獲階段執行 document.addEventListener('DOMMouseScroll',scrollFunc,false); } //window.onmousewheel=document.onmousewheel=scrollFunc; document.onmousewheel=scrollFunc;//滑鼠滾動一格觸發一次監聽事件,chrome支援，火狐不支援 //window.onmousewheel=scrollFunc;//也只觸發一次事件，火狐瀏覽器不支援，chrome支援 /*滑鼠滑入原點事件*/ $(".banner .num li").hover(function () { var index = $(this).index();//獲取當前索引值 i = index; $(".banner .img").stop().animate({ left: -index * 500 }, 500); $(this).addClass("on").siblings().removeClass("on"); }); /*向左按鈕*/ $(".banner .btn_l").click(function () { i++; move(); }) /*向右按鈕*/ $(".banner .btn_r").click(function () { i--; move(); }) });