剛學前端,最近遇到一個jQuery的問題,還請路過的大神幫忙解決下
阿新 • • 發佈:2017-12-03
gin next 比較 切換 () pla java point back
我打算做一個自動輪播圖,效果如圖所示,小圓點點擊效果已經OK,我想讓圖片上那個左右按鈕與小圓點對應實現一個圖片點擊輪播(首尾相連)。
之後再添加一個時間輪播效果(首尾相連)。
以下是css代碼
<style type="text/css"> * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; } /*切換按鈕*/ .arrow{ width: 50px; height: 50px; color: #000; font-size: 30px; border-radius:25px ; background:rgba(255,255,255,0.7); z-index:2; top: 145px; font-weight:bold ; position: absolute; text-align: center; line-height: 46px; display: none; } #prev{ left: 0px; } #next{right: 0px;} .arrow:hover{background:rgba(255,255,255,0.3);color: #4d4f08;} #box:hover .arrow {display: block;} /*輪播圖部分*/ #box{ width: 900px; height: 400px; margin: 0 auto; position: relative; border: 1px solid #ccc; } #list{ width: 100%; height: 350px; float: left; /*overflow: hidden;*/ cursor: pointer; } #list img{ width: 900px; height: 100%; float: left; z-index: 1; margin-right: -100%; } #buttons { position: absolute; height: 10px; width: 100%; z-index: 2; bottom: 20px; } #buttons ul{ height: 10px; width: 130px; margin: 0 auto; } #buttons ul li { cursor: pointer; float: left; border: 1px solid #fff; width: 7px; height: 7px; border-radius: 50%; background: #a4a3a3; margin:3px 6px; } #buttons .on{background-color: #e42929;} #buttons li:hover{background-color: #e42929;} </style>
以下是HTML代碼
<div id="box"> <div id="list"> <img src="img/001.jpg" alt="1"> <img src="img/002.jpg" alt="2"> <img src="img/003.jpg" alt="3"> <img src="img/004.jpg" alt="4"> <img src="img/005.jpg" alt="5"> <img src="img/006.jpg" alt="6"> </div> <div id="buttons"> <ul> <li index="1" class="on"></li> <li index="2"></li> <li index="3"></li> <li index="4"></li> <li index="5"></li> <li index="6"></li> </ul> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div>
下邊是jQuery代碼,因為不熟所以,比較少。
$(function(){ $("#list img:gt(0)").hide() $("#buttons ul li").on("click",function(){ $(this).addClass("on").siblings().removeClass("on") var TheIndex=$(this).index() $("#list img").eq(TheIndex).fadeIn().siblings().fadeOut() }) // $("#prev").on("click",function(){ // // }) })
剛學前端,最近遇到一個jQuery的問題,還請路過的大神幫忙解決下