2. 程式人生 > >jquery實現圖片輪播圖效果

jquery實現圖片輪播圖效果

阿新 • • 發佈：2018-12-31
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; list-style:none;} /************************樣式區。原本都打算寫到JS裡面的。不過這玩意改的比較多。新手改CSS沒啥問題我就寫在這了*****************************************/ /* 修改輸出屏大小 */ .banner{/* 修改輸出屏大小 */
width: 100%; height: 300px; overflow: hidden; position: relative; margin-left: auto; margin-right: auto; margin-top:50px;} .banner .img{width: 99999px; position:absolute; left:0px; top:0;} .banner .img li{ float:left;} /*/ 修改圖片大小 /*/ .banner .img img{ width: 550px;} /*/ 小圓圈 /*/ .banner .num{ position:absolute; width
:100%; bottom:10px; left:0; text-align:center; font-size:0px;} .banner .num li{ width:10px;height:10px; background:#888; border-radius:50%; display:inline-block; margin:0 3px; cursor:pointer;} .banner .num li.on{ background:#F60;} /*/ 按鈕 /*/ .banner .btn{ width:30px; height:50px; background:rgba(0,0,0,0.5); position:absolute
; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; color:#fff; font-size:40px; font-family:"宋體"; display:none;} .banner:hover .btn{ display:block;} .banner .btn_l{ left:0;} .banner .btn_r{ right:0;} /*/ 第一個輪播 /*/ #ban1 .banner{width: 1000px;height:500px;margin:100px auto; border:5px solid #000; } #ban1 .banner .img img{width: 1000px;height:500px;} </style> </head> <body> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="js/gdlb.js"></script> <div id="ban1"> <div class="banner"> <ul class="img"> <li><a href="#"><img src="images/1.png"></a></li> <li><a href="#"><img src="images/2.png"></a></li> <li><a href="#"><img src="images/3.png"></a></li> </ul> <ul class="num"> </ul> <div class="btn btn_l">&lt;</div> <div class="btn btn_r">&gt;</div> </div> </div> <div id="ban2"> <div class="banner"> <ul class="img"> <li><a href="#"><img src="images/1.png"></a></li> <li><a href="#"><img src="images/2.png"></a></li> <li><a href="#"><img src="images/3.png"></a></li> <li><a href="#"><img src="images/4.png"></a></li> </ul> <ul class="num"> </ul> <div class="btn btn_l">&lt;</div> <div class="btn btn_r">&gt;</div> </div> </div> </body> </html> 以下是js檔案內容： //1個是父級名。 $(function(){ imgscrool('#ban1'); imgscrool('#ban2'); }) function imgscrool(obj){ // 控制輪播圖片的寬度和高度大小 var width = document.body.scrollWidth; // console.log(width); $('.banner .img img').width(width); var i=0; var clone=$(obj+" .banner .img li").first().clone(); $(obj+" .banner .img").append(clone); var size=$(obj+" .banner .img li").size(); for(var j=0;j<size-1;j++){ $(obj+" .banner .num").append("<li></li>"); } $(obj+" .banner .num li").first().addClass("on"); /*滑鼠劃入圓點*/ $(obj+" .banner .num li").hover(function(){ var index=$(this).index(); i=index; $(obj+" .banner .img").stop().animate({left:-index*width},500) $(this).addClass("on").siblings().removeClass("on") }) /*自動輪播*/ var t=setInterval(function(){ i++; move(); },2000) /*對banner定時器的操作*/ $(obj+" .banner").hover(function(){ clearInterval(t); },function(){ t=setInterval(function(){ i++; move(); },2000) }) /*向左的按鈕*/ $(obj+" .banner .btn_l").stop(true).delay(800).click(function(){ i-- move(); }) /*向右的按鈕*/ $(obj+" .banner .btn_r").stop(true).delay(800).click(function(){ i++ move() }) function move(){ if(i==size){ $(obj+" .banner .img").css({left:0}) i=1; } // 修改輪播沒屏寬度 if(i==-1){ $(obj+" .banner .img").css({left:-(size-1)*width}) i=size-2; } $(obj+" .banner .img").stop(true).animate({left:-i*width},500) if(i==size-1){ $(obj+" .banner .num li").eq(0).addClass("on").siblings().removeClass("on") }else{ $(obj+" .banner .num li").eq(i).addClass("on").siblings().removeClass("on") } } }

相關推薦

jquery實現圖片輪播圖效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; list-style:n

使用JQuery實現圖片輪播效果

left 簡述 flow href 集合 jpg -i round 輪播 【效果如圖】 【原理簡述】 這裏大概說一下整個流程： 1，將除了第一張以外的圖片全部隱藏， 2，獲取第一張圖片的alt信息顯示在信息欄，並添加點擊事件 3，為4個按鈕添加點擊偵聽，點擊相應的按鈕，用

JQuery實現旋轉輪播圖

ann ima query 500px RR nbsp AS HR ++ css部分 <style> *{ margin: 0; padding: 0; } .co

JQuery實現的輪播圖

<div class="carousel-figure clearfix"> <div class="carsoul-box clearfix"> <a class="ig" href="#"><img src="image/

原生js實現簡單輪播圖效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <style> .father{

用jquery實現圖片輪播

CSS樣式： *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; /*其實就是圖片的高度*/

純css3實現無縫輪播圖效果

主要就是利用css3中的動畫了，看完整實現程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純

JavaScript實現圖片輪播圖

<!DOCTYPE html> <html> <head> <script > var time; function init(){ //設定定時操作 time=setInterval("show()",0); //3秒執行一

CSS3+jQuery實現3D輪播圖

1、HTML和css程式碼部分 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <sty

jQuery實現輪播圖效果

代碼實現 idt 代碼 out 顯示 move posit 技術 輪播圖 任務實現：用jQuery實現輪播圖。 來自瓶子啊之小白，歡迎來訪，歡迎指導。 相信大家從事前端的開發者初級就是輪播圖，首先我用jquery寫了一個，第二篇我會用原生JavaScript給大家展示。其原

unslider插件實現輪播圖效果

地址 href aid jquery輪播 boot http 用法 .com r.js unslider插件下載地址（含有用法）：http://www.bootcss.com/p/unslider/ 可以　　下載unslider.js文件（http://pan.baidu.

Flexslider插件實現圖片輪播、文字圖片相結合滑動切換效果

remove 12px body 類型 ons art cal 選項 csharp 插件下載： 　　點擊下載 密碼: fbeg Flexslider具有以下特性： 支持滑動和淡入淡出效果。 支持水平、垂直方向滑動。 支持鍵盤方向鍵控制。 支持觸控滑動。 支

使用Ajax+jQuery來實現前端收到的數據在console上顯示+簡單的主頁設計與bootstrap插件實現圖片輪播

value size 靠譜 實現圖 active length oot function 想要 1.實現前端輸入的數據在console上顯示 上一篇是解決了在前端的輸入信息在cygwin上顯示，這次要給前臺們能看見的數據，因為數據庫裏插入的數據少，所以寫的語句翻來覆去就那幾

QML實現網頁左右滑動的輪播圖效果

網頁中有很多的左右滑動的圖片輪動的效果。QML實現此效果的兩種方式。 PageIndicator和TabBar 也對應兩種樣式。 其中左右滑動的動畫效果是利用SwipeView的預設切換動畫效果 import QtQuick 2.9 import QtQuick.Controls 2.

javascript實現輪播圖效果

<!DOCTYPE html> <html> <head> <title>js輪播圖</title> <style type="text/css"> #container{ width: 600px;

Android 實現輪播圖效果 底部圓點佈局實現

1、準備底部圓點的素材、利用Drawable的功能，去實現一個圓點圖片的展示 drawable下新建兩個Drawable resource file：dot_normal.xml和dot_select.xml dot_normal.xml <?xml vers

Android 實現輪播圖效果（三） 底部圓點狀態改變

自動輪播和手動輪播之後應該實現圓點的切換 自定義改變圓點狀態的監聽器 新建介面public interface DotChangeListener，新增方法void dotChangeListener(int index);並在ImageBannerFramLayout實

jQuey實現輪播圖效果

再平常的瀏覽器頁面，輪播圖都是必不可缺少的一個板塊，在這總結了一下輪播圖基本的一些樣式 首先介紹一下，本文實現的輪播圖的基本效果：　　 　　1. 3s自動切換圖片,圖片切換時提示點跟隨切換 　　2. 滑鼠劃到圖片上，自動切換輪播圖停止 　　3. 指示點劃過切換對應的圖

原生js實現簡單的移動端輪播圖效果

近期接觸了移動端html5和css3，想加入些輪播圖，於是在網上搜集整理了一些資料，經自己補充改進使之較為完善 原生JavaScript 移動端web輪播圖片 實現功能 索引小圓點 過渡滑動動畫的定時輪播 移動端可以滑動切換圖片 滑動距離不夠則吸附回去 效果圖

使用原生js實現輪播圖效果

這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生js寫了一個輪播圖效果，希望大家喜歡。 這是我釋出在github上的最後實現的效果：https://heternally.github.io/banner/ 下面我簡單跟大家說一下