<!DOCTYPE html>
<html>

<head>
? ? <meta charset="UTF-8">
? ? <title>焦點輪播圖</title>
? ? <style type="text/css">
? ? ? ? /*去除內(nèi)邊距,沒有鏈接下劃線*/
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? text-decoration: none;
? ? ? ? }

? ? ? ? /*讓<body有20px的內(nèi)邊距*/
? ? ? ? body {
? ? ? ? ? ? padding: 20px;
? ? ? ? }

? ? ? ? /*最外圍的div*/
? ? ? ? #container {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? position: relative; /*相對定位*/
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }

? ? ? ? /*包含所有圖片的<div>*/

? ? ? ? #list {
? ? ? ? ? ? width: 4200px; /*7張圖片的寬: 7*600 */
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? position: absolute; /*絕對定位*/
? ? ? ? ? ? z-index: 1;

? ? ? ? }

? ? ? ? /*所有的圖片<img>*/
? ? ? ? #list img {
? ? ? ? ? ? float: left; /*浮在左側(cè)*/
? ? ? ? }

? ? ? ? /*包含所有圓點按鈕的<div>*/
? ? ? ? #pointsDiv {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? z-index: 2;
? ? ? ? ? ? bottom: 20px;
? ? ? ? ? ? left: 250px;
? ? ? ? }

? ? ? ? /*所有的圓點<span>*/

? ? ? ? #pointsDiv span {
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? float: left;
? ? ? ? ? ? border: 1px solid #fff;
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? background: #333;
? ? ? ? ? ? margin-right: 5px;
? ? ? ? }

? ? ? ? /*第一個<span>*/

? ? ? ? #pointsDiv .on {
? ? ? ? ? ? background: orangered;
? ? ? ? }

? ? ? ? /*切換圖標<a>*/

? ? ? ? .arrow {
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? display: none;
? ? ? ? ? ? line-height: 39px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? font-size: 36px;
? ? ? ? ? ? font-weight: bold;
? ? ? ? ? ? width: 40px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? z-index: 2;
? ? ? ? ? ? top: 180px;
? ? ? ? ? ? background-color: RGBA(0, 0, 0, 0.3);
? ? ? ? ? ? color: #fff;
? ? ? ? }

? ? ? ? /*鼠標移到切換圖標上時*/
? ? ? ? .arrow:hover {
? ? ? ? ? ? background-color: RGBA(0, 0, 0, 0.7);
? ? ? ? }

? ? ? ? /*鼠標移到整個div區(qū)域時*/
? ? ? ? #container:hover .arrow {
? ? ? ? ? ? display: block; /*顯示*/
? ? ? ? }

? ? ? ? /*上一個切換圖標的左外邊距*/
? ? ? ? #prev {
? ? ? ? ? ? left: 20px;
? ? ? ? }

? ? ? ? /*下一個切換圖標的右外邊距*/
? ? ? ? #next {
? ? ? ? ? ? right: 20px;
? ? ? ? }
? ? </style>
</head>

<body>

<div id="container">
? ? <div id="list" style="left: -600px;">
? ? ? ? <img src="img/5.jpg" alt="5"/>
? ? ? ? <img src="img/1.jpg" alt="1"/>
? ? ? ? <img src="img/2.jpg" alt="2"/>
? ? ? ? <img src="img/3.jpg" alt="3"/>
? ? ? ? <img src="img/4.jpg" alt="4"/>
? ? ? ? <img src="img/5.jpg" alt="5"/>
? ? ? ? <img src="img/1.jpg" alt="1"/>
? ? </div>
? ? <div id="pointsDiv">
? ? ? ? <span index="1" class="on"></span>
? ? ? ? <span index="2"></span>
? ? ? ? <span index="3"></span>
? ? ? ? <span index="4"></span>
? ? ? ? <span index="5"></span>
? ? </div>
? ? <a href="javascript:;" id="prev" class="arrow">&lt;</a>
? ? <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
</body>

</html>

jsp相關(guān)代碼：

//導入jQuery庫
<script src="jquery-1.10.1.js"></script>
<script>
? ? //得到所有照片的div
? ? var $div = $('#list');
? ? var $span = $('#pointsDiv>span')
? ? //獲取照片當前的位置
? ? var index = 1;
? ? var isToggleImagEnd = true;
? ? //點擊按鍵往左移動
? ? $('#prev').click(function () {
? ? ? ? isToggleImg(0)
? ? });
? ? //點擊按鍵往右移動
? ? $('#next').click(function () {
? ? ? ? isToggleImg(1)
? ? });

? ? function isToggleImg(n) {
? ? ? ? if (isToggleImagEnd) {
? ? ? ? ? ? isToggleImagEnd = false;
? ? ? ? ? ? if (n == 0) {
? ? ? ? ? ? ? ? index--;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? index++;
? ? ? ? ? ? }
? ? ? ? ? ? $div.animate({
? ? ? ? ? ? ? ? left: index * (-600)
? ? ? ? ? ? }, 500, function () {
? ? ? ? ? ? ? ? if (index == 0) {
? ? ? ? ? ? ? ? ? ? index = 5
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (index == 6) {
? ? ? ? ? ? ? ? ? ? index = 1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //設(shè)置圖片輪播時，從最后一張?zhí)降谝粡埐粫虚g隙，跟其他圖片一樣跳轉(zhuǎn)
? ? ? ? ? ? ? ? $div.css('left', index * (-600))
? ? ? ? ? ? ? ? //設(shè)置圖片下面的圓點狀態(tài)，更改其類屬性
? ? ? ? ? ? ? ? $span.removeClass('on');
? ? ? ? ? ? ? ? $($span.get(index - 1)).addClass('on')
? ? ? ? ? ? ? ? isToggleImagEnd = true;
? ? ? ? ? ? })
? ? ? ? }
? ? }
?? ?//設(shè)置延時函數(shù)，讓圖片自己定時輪播下一張
? ? var interval = setInterval(function () {
? ? ? ? isToggleImg(1);
? ? }, 1000)
?? ?
? ? //鼠標圖片上圖片停止輪播，挪開繼續(xù)輪播
? ? $("#container").hover(function () {
? ? ? ? clearInterval(interval)
? ? }, function () {
? ? ? ? interval = setInterval(function () {
? ? ? ? ? ? isToggleImg(1);
? ? ? ? }, 1000)
? ? })
?? ?
?? ?//對小圓點設(shè)置監(jiān)聽事件，點擊小圓點，圖片跳轉(zhuǎn)
? ? $span.click(function () {
? ? ? ? index = $(this).index();
? ? ? ? isToggleImg()
? ? })
</script>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: