jQuery實現輪播圖特效,仿京東——李帥醒部落格
<script type="text/javascript"> var ArrImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]; var num=ArrImg.length; //建立li和小原點 for(var i=0;i<ArrImg.length;i++){ $("<li/>").css("background","url("+ArrImg[i]+")").appendTo($("#banner")); $("<li/>").html(i+1).appendTo($("#round")); } //設定ul寬度 $("#banner").css("width",$("#banner li:eq(1)").width()*(ArrImg.length)+"px"); //操作輪播圖 // 1.輪播最大的left值 var Liw=$("#banner li").width(); var bannerW=$("#banner").width(); var index=0; //圖片變化初始化 function move(index){ $("#banner").css("left",-Liw*index ); $("#round li").css("background","#000"); $("#round li").eq(index).css("background","red"); } //圖片變化 var time1=setInterval(changeImg,1500); function changeImg(){ move(index) if(index==4){ index=-1; } index++; } //點選下標 $("#round li").on('mouseenter',function(){ index=$(this).index(); clearInterval(time1); move(index) }) $("#round li").on('mouseout',function(){ time1=setInterval(changeImg,1500); }) //劃過出現按鈕 $("#wrap").on('mouseenter',function(){ $("#right a").add("#left a").css("display","block"); }).on('mouseleave',function(){ $("#right a").add("#left a").css("display","none"); }) //點選按鈕 $("#left a").add($("#right a")).hover(function(){ clearInterval(time1); },function (){ time1=setInterval(changeImg,1500); }); $("#right a").on('click',function(){ clearInterval(time1); index=((++index)%5); move(index) }); $("#left a").on('click',function(){ clearInterval(time1); index=((5+--index)%5); move(index) }); console.log(0%5); </script>
(我吃酸蘿蔔 新浪微博http://www.weibo.com/wcslb ---李帥醒著)
相關推薦
jQuery實現輪播圖特效,仿京東——李帥醒部落格
JS程式碼:<script type="text/javascript"> var ArrImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]; var num=ArrImg.lengt
jQuery實現輪播圖效果
代碼實現 idt 代碼 out 顯示 move posit 技術 輪播圖 任務實現:用jQuery實現輪播圖。 來自瓶子啊之小白,歡迎來訪,歡迎指導。 相信大家從事前端的開發者初級就是輪播圖,首先我用jquery寫了一個,第二篇我會用原生JavaScript給大家展示。其原
JQuery實現輪播圖原始碼
設計: 根據上圖可以看出,輪播圖需要以下元素:外面的盒子div、放置圖片集合的盒子ul、放置兩側按鈕的盒子div、下側順序按鈕div 原始碼如下: 一、html原始碼如下: <div class="outer"> <ul class="
jquery 實現 輪播圖
<!doctype html> <html> <head> <meta charset="utf-8"> <title>輪播圖</title> <script src="js/jque
JQuery 基礎案例(3)—— jQuery實現輪播圖無縫(無回滾)滾動切換效果
輪播圖無縫滾動切換原理 基本框架 <div class="slide"> <!-- 導航點 --> <ul class="slide-nav"> <li class="activ
jQuery實現輪播圖
ext jquer bsp 全局變量 ins public nbsp cfb interval jQuery實現輪播圖時出現ready方法外無法調用方法(函數) 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.
原生js實現瀑布流以及載入效果——李帥醒部落格
今天教大家使用原生js實現瀑布流以及載入效果,下回再教大家使用使用原生JS實現響應式瀑布流佈局,還是先從簡單的入手! 1、首先列數是固定的,不同的是高度,隨機產生。 2、一排結束後,如第6個元素,是新增再上一排最短的位置,所以要做一個大小高度判斷。 3、每次滾動條觸發事件,
JSONP跨域獲取JSON資料(含jQuery方法)——李帥醒部落格
首先我要強調JSONP和AJAX沒有半毛錢關係,別把他們混淆!!!只不過他們都是從後臺獲取資料的方法! 前言: 說到AJAX就會不可避免的面臨兩個問題,第一個是AJAX以何種格式來交換資料?第二個
jQuery外掛slides實現無縫輪播圖特效
初始化外掛: slides是一款基於jQuery無縫輪播圖外掛,支援圖內元素動畫,可以自定義動畫型別 1 2 3 4 5 6 7 8 9 10 $(".slideInner").slide({
Android TV利用viewPager實現輪播圖,並通過handler進行邏輯控制
公司要求實現一個輪播圖,滾動圖片及其對應文字。共有五張圖,包含小圓點。 最初的實現是參考了https://blog.csdn.net/zhaoxiaojian1213/article/details/78280132,使用ViewPager實現,新開一個執行
JS原生程式碼實現輪播圖(無左右滑動,底下圓點按鈕)
先上效果圖: 由於動態圖太大,所以只能截圖了;大致效果,圖片輪播的過程中,底下的灰色提示漸漸出現; 現在來說實現思路: HTML部分: <div id="content"> <img id="img1" /> &
Jquery和純JS實現輪播圖(一)--左右切換式
var cur = 0, //當前的圖片序號 imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 imgLen = imgLis.length, //獲取圖片的
在安卓中,怎麼通過ViewPager來實現輪播圖的效果?
//currentPage是一個角標,通過viewPager中的條目獲取當前頁面的角標,假如條目是6,因為%list.size,那麼當前頁面的角標就是0.int currentPage = viewPager.getCurrentItem()%list.size(); //把當前頁面的
通過jQuery和Bootstrap來分別實現輪播圖
一、通過Bootstrap來實現輪播圖 準備好Bootstrap所需的包,輪播圖所需的圖片,然後就可以開始來寫輪播圖了。 <div class="container"> <div class="row"> <div cl
Jquery和純JS實現輪播圖(二)--淡入淡出切換式
之前有寫過一篇輪播圖,是左右切換式的,可以參考 Jquery和純JS實現輪播圖(一)–左右切換式 今天分享一下淡入淡出式的輪播圖,同樣也是用純js和Jquery兩種方法來實現: JQUERY實現
JavaScript實現輪播圖,滑鼠移入暫停播放,滑鼠移除開始播放
沒有上傳本地圖片,可以自己新增圖片試一下"img/banner-bw.png"這是小圓點圖片點選可以定位到某一張圖片 <!DOCTYPE html> <html><head><meta charset="UTF-8"><
用javaScript實現輪播圖效果 包括自動變換,按鈕控制,上一張下一張切換
1.HTML程式碼 <div id="wrap"> <img src="images/1.jpg" alt="" class="on"> <img src="images/2.jpg" alt=""> <im
js實現輪播圖
display lex tee 添加 har scrip con tle win 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF
jQuery實現輪播效果(一) - 基礎
時代 例如 自己 -1 fun 時間間隔 order .html 官方 前戲: XXXX年XX月XX日,經理交給我一個站點新聞資訊網頁開發的活兒。我一個java程序猿,怎麽完畢得了網頁設計這樣高端的活兒呢!之前盡管有學過一點HTML。CSS的知識。可
h5原生js實現輪播圖
list sla head log startx creat ase hit eve 預覽地址:http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l