1. 程式人生 > >jQuery實現輪播圖特效,仿京東——李帥醒部落格

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.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