當前位置:編程學習大全網 - 源碼下載 - jquery裏面,或者HTML,HTML5,C#裏面如何實現下圖的圖片效果。滑動輪播類似的。 DW裏面添加代碼也行。

jquery裏面,或者HTML,HTML5,C#裏面如何實現下圖的圖片效果。滑動輪播類似的。 DW裏面添加代碼也行。

; (function ($) {

/* var i = 2;

$(document).ready(function () {

var arry = ['images/headback/001.jpg', 'images/headback/002.jpg', 'images/headback/003.jpg', 'images/headback/004.jpg', 'images/headback/005.jpg', 'images/headback/006.jpg', ]

setInterval(

function () {

$("#div_pic").css("backgroundImage", "url(" + arry[i] + ")");

i++;

if (i == 5) {

i = 0;

}

}

, 5000);

}); 定時換背景圖片的代碼 */

//下面是圖片切換代碼

/*

var t;

var speed = 2; //圖片切換速度

var nowlan = 0; //圖片開始時間

function changepic() {

var imglen = $("#div_pic").find("li").length;

$("#div_pic").find("li").hide();

$("#div_pic").find("li").eq(nowlan).show();

nowlan = nowlan + 1 == imglen ? 0 : nowlan + 1;

t = setTimeout("changepic()", speed * 1000);

}

onload = function () { changepic(); }

$(document).ready(function ()

//鼠標在圖片上懸停讓切換暫停

$("#div_pic").hover(function () { clearInterval(t); });

//鼠標離開圖片切換繼續

$("#div_pic").mouseleave(function () { changepic(); });

});

*/

//下面是圖片輪播代碼

/* var num = 0

$(function(){

$("#div_pic ol li").mouseover(function(e){

$(this).attr("class","current");

$(this).siblings().attr("class",""); //兄弟節點的class屬性設置為空

//alert($('ul').index())

num = $('ul').index() + 2

var index = $(this).index(); //記錄選定的li標簽在ul中的索引

//圖片會出現層疊現象為了顯示當前的圖片,把當前的圖片的z-index 值設置為大於其他的兄弟元素

$("#div_pic ul li").eq(index).css({"left":"650px","zIndex":num})

$("#div_pic ul li").eq(index).siblings().css("zIndex",num-1);

//動畫效果,圖片從右側飛入

$("#div_pic ul li").eq(index).animate({left:"0"},500)

});

}); */

//下面是可配置輪播動畫代碼

$.fn.slide=function(options){

var defaults= {

affect:1, //1:上下滾動; 2:幕布式; 3:左右滾動;4:淡入淡出

time: 5000, //間隔時間

speed:500, //動畫快慢

dot_text:true,//按鈕上有無序列號

};

var opts=$.extend(defaults,options);

var $this=$(this);

var ool=$("<div class='dot'><p></p></div>");

var $box=$this.find("ul");

var $li=$box.find("li");

var timer=null;

var num=0;

$this.append(ool);

$box.find("li").each(function(i){

ool.find("p").append($("<b></b>"));

if(opts.dot_text){

ool.find("b").eq(i).html(i+1)

}

})

ool.find("b").eq(0).addClass("cur");

switch(opts.affect){

case 1:

break;

case 2:

$box.find("li").css("display","none");

break;

case 3:

$box.css({"width":$li.eq(0).width()*$li.length});

$li.css("float","left");

break;

case 4:

$box.find("li").css("display","none");

break;

}

$box.find("li").eq(0).show(0);

ool.find("b").mouseover(function(){

num=$(this).index();

run ();

})

timer=setInterval(auto,opts.time);

function auto(){

num<$box.find("li").length-1?num++:num=0;

run();

}

function run(){

ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");

switch(opts.affect){

case 1:

$box.stop(true,false).animate({"top":-240*num},opts.speed);

break;

case 2:

$box.find("li").css({"position":"absolute"});

$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);

break;

case 3:

$box.stop(true,false).animate({"left":-670*num},opts.speed);

break;

case 4:

$box.find("li").css({"position":"absolute"});

$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);

break;

}

}

$this.mouseover(function(){

clearInterval(timer);

})

$this.mouseout(function(){

timer=setInterval(auto,opts.time);

})

}

}(jQuery));

  • 上一篇:為什麽米哈遊在原神要用unity引擎,在這款遊戲中,unity引擎相對於其他引擎有什麽優勢?
  • 下一篇:視頻錄制原理與實現
  • copyright 2024編程學習大全網