<!doctype html><html><head>? ? <meta charset="utf-8">? ? <title>jquery 輪播圖</title>? ? <style type="text/css">? ? *{? ? ? ? margin: 0;padding: 0;list-style: none;? ? }? ? /*設置輪播區域樣式*/? ? ? ? #main{? ? ? ? ? ? width: 660px;? ? ? ? ? ? height: 260px;? ? ? ? ? ? margin:0 auto;? ? ? ? ? ? background-color: #ccc;? ? ? ? ??? ? ? ? ? ? margin-top: 50px;? ? ? ? ? ? position: relative;? ? ? ? }? ? ? ? /*設置輪播圖片的大小*/? ? ? ?#main .img img{? ? ? ? width: 100%;? ? ? ? height: 100%;? ? ? ? position: absolute;? ? ? ?}? ? ? ?/*設置需要改變圖片的運用的類*/? ? ? ?.display-img{? ? ? ? display: none;? ? ? ?}? ? ? ?.display-block{? ? ? ? display: block;? ? ? ?}? ? ? ? ? ?? ? ? ? ? ??? ? ? ?/*設置button 區域的位置*/? ? ? ? .button{? ? ? ? ? ? position: absolute;? ? ? ? ? ? bottom:10px;? ? ? ? ? ? right: 20px;? ? ? ? }? ? ? ? /*設置button的原始樣式*/? ? ? ? button{? ? ? ? ? ??? ? ? ? ? ? margin-right: 10px;? ? ? ? ? ? height: 10px;? ? ? ? ? ? width: 10px;? ? ? ? ? ? border-radius: 100%;? ? ? ? ? ? background-color: transparent;? ? ? ? ? ? border: 1px white solid;? ? ? ? ? ? outline: none;/* 取消外邊框*/? ? ? ? ?}? ? ? ? ?? ? ? ? ?? ? ? ? /*改變button 樣式的類*/? ? ? ? ?.achive{? ? ? ? ? ? ?background-color: white;? ? ? ? ?}? ? /*設置下一張/上一張的位置樣式*/? ? ? ? ?#pre{? ? ? ? ? ? width: 100%;? ? ? ? ? ?? ? ? ? ? ? position: absolute;? ? ? ? ? ? top: 105px;? ? ? ? ? ? left: 0;? ? ? ? ?}? ? ? ? ?/*設置pre圖片的占位大小*/? ? ? ? ?#pre img{? ? ? ? ? ? width: 50px;? ? ? ? ? ? height: 50px;? ? ? ? ? ??? ? ? ? ?}? ? ? ? ?/*定位上一張的控制的位置*/? ? ? ? ?#pre img:first-child{? ? ? ? ? ? float: left;? ? ? ? ?}? ? ? ? ?/*定位下一張 控制的位置*/? ? ? ? ?#pre img:last-child{? ? ? ? ? ? float: right;? ? ? ? ?}? ? </style></head><body>? ? <div id="main">? ? ? ? <div class="img">? ? ? ? ? ? ? ? ? ? <img src="images/1.jpg" alt="" ?class="display-img display-block">? ? ? ? ? ? ? ? ? ? <img src="images/2.jpg" alt="" class="display-img">? ? ? ? ? ? ? ? ? ? <img src="images/3.jpg" alt="" class="display-img">? ? ? ? ? ? ? ? ? ? <img src="images/4.jpg" alt="" class="display-img">? ? ? ? ? ? ? ? ? ? <img src="images/5.jpg" alt="" class="display-img">? ? ? ? ? ? ? ? ? ??? ? ? ? </div>? ? ? ? <div class="button">? ? ? ? ? ? <button></button>? ? ? ? ? ? <button></button>? ? ? ? ? ? <button></button>? ? ? ? ? ? <button></button>? ? ? ? ? ? <button></button>? ? ? ? ? ??? ? ? ? </div>? ? ? ? <div id="pre">? ? ? ? ? ?? ? ? ? ? ? ?<img src="images/pre2.png" alt="" class="pre1">?? ? ? ? ? ? ?<img src="images/pre.png" alt="" >? ? ? ? </div>? ? ? ?? ??? ? </div>? ? <script src="jquery.js"></script>? ? <!-- 引用jquery 3.x.x 文件 -->? ? <script>// 用改變索引的方式改變圖片? ? ? ? ? ? var index = 0; //用于改變圖片的索引基數? ? ? ? ? ? var btn = $('button');//獲取 button 句柄? ? ? ? ? ? var img = $('.img img'); //img句柄? ? ? ? ? ? var pre = $('#pre img'); ?//上一張下一張 控制句柄? ? ? ? ? ?? ? ? ? ? ? var timer = null; //用于setInterval存儲? ? ? ? ? ? // 改變圖片的函數? ? ? ? ? ? // 在外部封裝函數 ? ?注意在jquery 函數的調用方式?? ? ? ? ? ? ?function changeImg(index){? ? ? ? ? ? ? ? ? ? ? ? btn.removeClass('achive');//清除圖片的achive 的類 achive de 類樣式?? ? ? ? ? ? ? ? ? ? ? ? img.removeClass('display-block');//清除img 的類樣式? ? ? ? ? ? ? ? ? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? btn.eq(index).addClass('achive'); //添加相應的類樣式? ? ? ? ? ? ? ? ? ? ? ? img.eq(index).addClass('display-block'); //添加相應的類樣式? ? ? ? ? ? ? ?}? ? ? ? ??? ? ? ? $(function(){? ? ? ? ? ? // var index = 0;? ? ? ? ? ? // var btn = $('button');? ? ? ? ? ? // var img = $('.img img');? ? ? ? ? ? // var pre = $('#pre img');? ? ? ? ? ? // var main = $('#main');? ? ? ? ? ? // var timer = null;? ? ? ? ??? ? ? ? ? ? $('#main').hover(? ? ? ? ? ? ? ? // mouseover 圖片停止 index 停止加法? ? ? ? ? ? ? ? // mouseover函數開始? ? ? ? ? ? ? ? function(){? ? ? ? ? ? ? ? ? ? clearInterval(timer);? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? // mouseout index 做加法 N 秒的加法? ? ? ? ? ? ? ? // //mouseout函數開始? ? ? ? ? ? ? ?function(){? ? ? ? ? ? ? ? ? ? timer = setInterval(function(){? ? ? ? ? ? ? ? ? ? ? ? index = index + 1;? ? ? ? ? ? ? ? ? ? ? ? if (index > img.length-1) {? ? ? ? ? ? ? ? ? ? ? ? ? ? index = 0;? ? ? ? ? ? ? ? ? ? ? ? } ?? ? ? ? ? ? ? ? ? ? ? ?changeImg(index);//調用改變圖片函數? ? ? ? ? ? ? ? ? ? },3000) ?//每n秒調用一次函數? ? ? ? ? ? })? ? ? ? ? ? // 調用 mouseout ?讓index 加法? ? ? ? ? ? ?$('#main').mouseout();//自身調用 ?當頁面加載完成 可以自行啟動? ? ? ? ? ? ? ? // btn ?索引 對應img元素的索引? ? ? ? ? ? ? ?btn.click(function(event){? ? ? ? ? ? ? ? var target = $(event.target);? ? ? ? ? ? ? ? ? var btn1 = document.querySelectorAll('button');? ? ? ? ? ? ? ? ? ? ? ? for (var i = 0; i < btn1.length; i++) {? ? ? ? ? ? ? ? ? ? ? ? ? ? btn1[i].id = i;? ? ? ? ? ? ? ? ? ? ? ? ? ? index = this.id;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? changeImg(index);//調用改變圖片函數? ? ? ? ? ? })? ? ? ? ? ? ??? ? ? ? ? ? ? // 箭頭改變索引 ?改變圖片? ? ? ? ? ? ? // 點擊一次 index -1? ? ? ? ? ? ? ?pre.eq(0).click(function(){? ? ? ? ? ? ? ? index =index - 1;? ? ? ? ? ? ? ? if (index < 0) {? ? ? ? ? ? ? ? ? ? index = img.length -1;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? changeImg(index);//調用改變圖片函數? ? ? ? ? ? ? ?})? ? ? ? ? ? ? ?// 點擊一次 index+ 1? ? ? ? ? ? ? ?pre.eq(1).click(function(){? ? ? ? ? ? ? ? index = index + 1;? ? ? ? ? ? ? ? if (index > img.length-1) {? ? ? ? ? ? ? ? ? ? index = 0;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? changeImg(index);//調用改變圖片函數? ? ? ? ? ? ? ?})? ? ? ? })? ? ? ? ? ?? ? </script>?? ?</body></html>
添加回答
舉報
0/150
提交
取消