jQuery+css實現的切換圖片功能代碼_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery+css實現的切換圖片功能代碼_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:17 PM

css jquery

本文實例講述了jQuery+css實現的切換圖片功能代碼。分享給大家參考，具體如下：

運作效果截圖如下：

具體程式碼如下：

<!DOCTYPE html>
<html> 
 <head>
  <title>demo</title>
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css" >
   body {
    margin:0; padding:0;
   }
   .container {
    border:6px solid gray; background:black;
    width:600px; height:400px; position:relative;
    left:50%; margin-left:-300px; border-radius:6px;
    -webkit-border-radius:6px; -moz-border-radius:6px;
    overflow:hidden;
   }
   .text-center {
    text-align:center;
   }
   h1 {
     font-size:50px; color:gray; font-weight:bolder;
   }
   .imgUL {
    width:100%; height:100%; margin:0px; padding:0px; list-style:none;
   }
   .imgUL li {
    float:left; margin:0px; padding:0px; height:100%; 
    color:gray; font-weight:bolder; text-align:center;
    font-size:100px; line-height:400px;
   }
   .pageUL {
    position:relative; top:-40px; height:40px; list-style:none;
    margin:0px; padding:0px; float:right;
   }
   .pageUL li {
    float:left; display:block; width:36px;
    height:36px; border:2px solid red;
     margin-left:5px; border-radius:4px;
    -webkit-border-radius:4px; text-align:center;
    -moz-border-radius:4px; line-height:36px;
    color:gray; font-weight:bolder; cursor:pointer;
   }
   .pageUL li:hover {
    background:#5ACF00; color:black;
   }
   .pageUL li.active {
    background:#5ACF00; color:black;
   }
  </style>
  <script type="text/javascript" >
   $(document).ready(function(){
    var autoInterval = null,
     imgUL = $(".imgUL"),
     imgliList = imgUL.children("li"),
     liListLength = imgliList.length,
     pageUL = $('.pageUL'),
     pageLiList = pageUL.children('li'),
     pageLiListLength = pageLiList.length,
    // initialize
    activePageLi = $(pageLiList[0]);
    activePageLi.addClass('active');
    imgliList.width(600);
    imgUL.width(liListLength * 600);
    $(".pageUL li").mouseover(function(){
     mouseoverAnimate(this);
    }).mouseout(function(){
     createInterval();
    });
    createInterval();
    function mouseoverAnimate(_this){
     clearInterval(autoInterval);
     activePageLi.removeClass('active');
     activePageLi = $(_this);
     var pageNo = parseInt(activePageLi.html());
     activePageLi.addClass('active');
     imgUL.animate({
      'marginLeft': -600 * (pageNo - 1)
     }, 10);
    }
    function createInterval(){
     autoInterval = setInterval(function(){
      var pageNo = parseInt(activePageLi.html());
      pageNo++;
      if(pageNo > pageLiListLength) {
       pageNo = 1;
      }
      activePageLi.removeClass('active');
      activePageLi = $(pageLiList[pageNo - 1]);
      activePageLi.addClass('active');
      imgUL.animate({
       'marginLeft': -600*(pageNo - 1)
      }, 1100);
     }, 1500);
    }
   });
  </script>
 </head>
 <body>
  <h1 class="text-center">Demo</h1>
  <div class="container" id="container">
   <ul class="imgUL">
    <li>Page1</li>
    <li>Page2</li>
    <li>Page3</li>
    <li>Page4</li>
    <li>Page5</li>
    <li>Page6</li>
   </ul>
   <ul class="pageUL">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
   </ul>
  </div>
 </body>
</html>

登入後複製

更多關於jQuery特效相關內容有興趣的讀者可查看本站專題：《jQuery常見經典特效總結》及《jQuery動畫與特效用法總結》

》

希望本文所述對大家jQuery程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7798

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。