<!doctype html><html><head>? ? <meta charset="utf-8">? ? <title>jquery 輪播圖</title>? ? <style type="text/css">? ? *{? ? ? ? margin: 0;padding: 0;list-style: none;? ? }? ? /*設(shè)置輪播區(qū)域樣式*/? ? ? ? #main{? ? ? ? ? ? width: 660px;? ? ? ? ? ? height: 260px;? ? ? ? ? ? margin:0 auto;? ? ? ? ? ? background-color: #ccc;? ? ? ? ??? ? ? ? ? ? margin-top: 50px;? ? ? ? ? ? position: relative;? ? ? ? }? ? ? ? /*設(shè)置輪播圖片的大小*/? ? ? ?#main .img img{? ? ? ? width: 100%;? ? ? ? height: 100%;? ? ? ? position: absolute;? ? ? ?}? ? ? ?/*設(shè)置需要改變圖片的運(yùn)用的類(lèi)*/? ? ? ?.display-img{? ? ? ? display: none;? ? ? ?}? ? ? ?.display-block{? ? ? ? display: block;? ? ? ?}? ? ? ? ? ?? ? ? ? ? ??? ? ? ?/*設(shè)置button 區(qū)域的位置*/? ? ? ? .button{? ? ? ? ? ? position: absolute;? ? ? ? ? ? bottom:10px;? ? ? ? ? ? right: 20px;? ? ? ? }? ? ? ? /*設(shè)置button的原始樣式*/? ? ? ? button{? ? ? ? ? ??? ? ? ? ? ? margin-right: 10px;? ? ? ? ? ? height: 10px;? ? ? ? ? ? width: 10px;? ? ? ? ? ? border-radius: 100%;? ? ? ? ? ? background-color: transparent;? ? ? ? ? ? border: 1px white solid;? ? ? ? ? ? outline: none;/* 取消外邊框*/? ? ? ? ?}? ? ? ? ?? ? ? ? ?? ? ? ? /*改變button 樣式的類(lèi)*/? ? ? ? ?.achive{? ? ? ? ? ? ?background-color: white;? ? ? ? ?}? ? /*設(shè)置下一張/上一張的位置樣式*/? ? ? ? ?#pre{? ? ? ? ? ? width: 100%;? ? ? ? ? ?? ? ? ? ? ? position: absolute;? ? ? ? ? ? top: 105px;? ? ? ? ? ? left: 0;? ? ? ? ?}? ? ? ? ?/*設(shè)置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; //用于改變圖片的索引基數(shù)? ? ? ? ? ? var btn = $('button');//獲取 button 句柄? ? ? ? ? ? var img = $('.img img'); //img句柄? ? ? ? ? ? var pre = $('#pre img'); ?//上一張下一張 控制句柄? ? ? ? ? ?? ? ? ? ? ? var timer = null; //用于setInterval存儲(chǔ)? ? ? ? ? ? // 改變圖片的函數(shù)? ? ? ? ? ? // 在外部封裝函數(shù) ? ?注意在jquery 函數(shù)的調(diào)用方式?? ? ? ? ? ? ?function changeImg(index){? ? ? ? ? ? ? ? ? ? ? ? btn.removeClass('achive');//清除圖片的achive 的類(lèi) achive de 類(lèi)樣式?? ? ? ? ? ? ? ? ? ? ? ? img.removeClass('display-block');//清除img 的類(lèi)樣式? ? ? ? ? ? ? ? ? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? btn.eq(index).addClass('achive'); //添加相應(yīng)的類(lèi)樣式? ? ? ? ? ? ? ? ? ? ? ? img.eq(index).addClass('display-block'); //添加相應(yīng)的類(lèi)樣式? ? ? ? ? ? ? ?}? ? ? ? ??? ? ? ? $(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函數(shù)開(kāi)始? ? ? ? ? ? ? ? function(){? ? ? ? ? ? ? ? ? ? clearInterval(timer);? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? // mouseout index 做加法 N 秒的加法? ? ? ? ? ? ? ? // //mouseout函數(shù)開(kāi)始? ? ? ? ? ? ? ?function(){? ? ? ? ? ? ? ? ? ? timer = setInterval(function(){? ? ? ? ? ? ? ? ? ? ? ? index = index + 1;? ? ? ? ? ? ? ? ? ? ? ? if (index > img.length-1) {? ? ? ? ? ? ? ? ? ? ? ? ? ? index = 0;? ? ? ? ? ? ? ? ? ? ? ? } ?? ? ? ? ? ? ? ? ? ? ? ?changeImg(index);//調(diào)用改變圖片函數(shù)? ? ? ? ? ? ? ? ? ? },3000) ?//每n秒調(diào)用一次函數(shù)? ? ? ? ? ? })? ? ? ? ? ? // 調(diào)用 mouseout ?讓index 加法? ? ? ? ? ? ?$('#main').mouseout();//自身調(diào)用 ?當(dāng)頁(yè)面加載完成 可以自行啟動(dòng)? ? ? ? ? ? ? ? // btn ?索引 對(duì)應(yīng)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);//調(diào)用改變圖片函數(shù)? ? ? ? ? ? })? ? ? ? ? ? ??? ? ? ? ? ? ? // 箭頭改變索引 ?改變圖片? ? ? ? ? ? ? // 點(diǎn)擊一次 index -1? ? ? ? ? ? ? ?pre.eq(0).click(function(){? ? ? ? ? ? ? ? index =index - 1;? ? ? ? ? ? ? ? if (index < 0) {? ? ? ? ? ? ? ? ? ? index = img.length -1;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? changeImg(index);//調(diào)用改變圖片函數(shù)? ? ? ? ? ? ? ?})? ? ? ? ? ? ? ?// 點(diǎn)擊一次 index+ 1? ? ? ? ? ? ? ?pre.eq(1).click(function(){? ? ? ? ? ? ? ? index = index + 1;? ? ? ? ? ? ? ? if (index > img.length-1) {? ? ? ? ? ? ? ? ? ? index = 0;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? changeImg(index);//調(diào)用改變圖片函數(shù)? ? ? ? ? ? ? ?})? ? ? ? })? ? ? ? ? ?? ? </script>?? ?</body></html>
添加回答
舉報(bào)
0/150
提交
取消