jquery里面，或者HTML，HTML5，C#里面如何實(shí)現(xiàn)下圖的圖片效果?；瑒?dòng)輪播類(lèi)似的。 DW里面添加代碼也行。

; (function ($) {

為湘東等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及湘東網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站制作、湘東網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

/* 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);

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

//下面是圖片切換代碼

/*

var t;

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

var nowlan = 0; //圖片開(kāi)始時(shí)間

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 ()

//鼠標(biāo)在圖片上懸停讓切換暫停

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

//鼠標(biāo)離開(kāi)圖片切換繼續(xù)

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

});

*/

//下面是圖片輪播代碼

/* var num = 0

$(function(){

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

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

$(this).siblings().attr("class",""); //兄弟節(jié)點(diǎn)的class屬性設(shè)置為空

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

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

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

//圖片會(huì)出現(xiàn)層疊現(xiàn)象為了顯示當(dāng)前的圖片，把當(dāng)前的圖片的z-index 值設(shè)置為大于其他的兄弟元素

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

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

//動(dòng)畫(huà)效果，圖片從右側(cè)飛入

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

});

}); */

//下面是可配置輪播動(dòng)畫(huà)代碼

$.fn.slide=function(options){

var defaults= {

affect:1, //1：上下滾動(dòng); 2:幕布式; 3:左右滾動(dòng)；4：淡入淡出

time: 5000, //間隔時(shí)間

speed:500, //動(dòng)畫(huà)快慢

dot_text:true,//按鈕上有無(wú)序列號(hào)

};

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));

html5能做圖片輪播特嗎

能，

主要源代碼：

style .f{width:400px;margin:20px;overflow:hidden;}.f_aaa{width: 2000px;height: 300px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}.f_aa {width: 400px;float:left;}.f_cfq{padding-top:10px;text-align:center;}/stylebody onload=a()div class="f" div id="aaa" class="f_aaa" img class="f_aa" src="a.jpg" width="400" height="300" img class="f_aa" src="b.jpg" width="400" height="300" img class="f_aa" src="c.png" width="400" height="300" img class="f_aa" src="d.jpg" width="400" height="300" /div div id="cfq" class="f_cfq" a href="#1"111/a a href="#2"222/a a href="#3"333/a a href="#4"444/a /div /div

script type="text/javascript" function a() { var $ = function(id){return document.getElementById(id);}; var tp = $("aaa"); var lj = $("cfq").getElementsByTagName("a"); var ljsl = lj.length; if (tp ljsl) { for( var i = 0; i ljsl; i += 1) { lj[i].onclick = function() { var index = Number(this.href.replace(/.*#/g, "")) || 1; tp.style.marginLeft = (1 - index) * 400 + "px"; return false; }; }}};/script

怎么用html5+css3 實(shí)現(xiàn)圖片輪播

1、首先我們創(chuàng)建一個(gè)簡(jiǎn)單的項(xiàng)目，如圖所示包括html，css和img三個(gè)。

2、這里是html文件，引入css和html代碼文件，如圖所示。

3、這里是css文件代碼，上面是div和圖片顯示的效果代碼，后面是動(dòng)畫(huà)效果。

4、這里是事件，這里定義了四個(gè)時(shí)間段的狀態(tài)，兼容了ie的。

5、如圖所示這里是效果圖，會(huì)根據(jù)時(shí)間輪播顯示下一張圖片 了。

html5全屏3d輪播圖中間清晰兩邊模糊，，縮小屏幕時(shí)圖片顯示中間那張完整的圖

3d輪播基于層級(jí)和定位加上animation的時(shí)間曲線控制，當(dāng)點(diǎn)擊對(duì)應(yīng)按鈕時(shí)候控制記錄的數(shù)組中圖片大小，位移數(shù)據(jù)對(duì)應(yīng)的index數(shù)值，基本完成，之后可以綁定鍵盤(pán)事件。

html5如何實(shí)現(xiàn)圖片輪播

靜態(tài)獲取圖片寫(xiě)法，給定圖片的個(gè)數(shù)，用js實(shí)現(xiàn)輪播圖自動(dòng)轉(zhuǎn)換。

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

!-- *******設(shè)置樣式********** --

style type="text/css"

.show_div{

width: 400px;

height: 400px;

margin: ?0 auto;

border: 2px solid block;

overflow: hidden;

}

.scroll_div{

width: 2000px;

height: 400px;

}

.scroll_div img{

width: 400px;

height: 400px;

float: left;

}

/style

!-- end --

/head

body

div class="show_div"

div class="scroll_div"

img src="img/b.jpg" alt=""

img src="img/c.jpg" alt=""

img src="img/d.jpg" alt=""

img src="img/a.jpg" alt=""

img src="img/b.jpg" alt=""

/div

/div

/body

!-- *********js代碼******** --

script type="text/javascript"

var scrollDiv = document.getElementsByClassName("scroll_div")[0];

// 定義初始值

var left =0;

// 定義一個(gè)定時(shí)器 走一步

function move(){

var timer = setInterval(function(){

left --;

if (left = -1600) {

left = 0;

}

if (left % -400 == 0) {

clearInterval(timer);

timer = null;

}

scrollDiv.style.marginLeft = left + "px";

},10);

}

// 定義一個(gè)定時(shí)器 每隔固定時(shí)間 走一張

setInterval(function(){

move();

},5000);

/script

/html

html5怎么實(shí)現(xiàn)頁(yè)面左右滑動(dòng)（下圖區(qū)域），可以左右滑動(dòng)但不需要換頁(yè)

1、創(chuàng)建兩個(gè)html文件，一個(gè)test一個(gè)test2。

2、打開(kāi)test頁(yè)面，在里面創(chuàng)建一個(gè)div，并給其添加onmousedown與move方法。

3、打開(kāi)后我們發(fā)現(xiàn)是一個(gè)棕綠的頁(yè)面。

4、定義兩個(gè)變量，startx為鼠標(biāo)按下的坐標(biāo)，endx為鼠標(biāo)移動(dòng)的坐標(biāo)。

5、實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊執(zhí)行的down方法，在里面通過(guò)clientX獲得鼠標(biāo)按下坐標(biāo)，并賦值給startx。

6、接著在實(shí)現(xiàn)鼠標(biāo)移動(dòng)的move方法，獲得鼠標(biāo)移動(dòng)的坐標(biāo)，并通過(guò)startx與endx相減判斷是否向左邊滑動(dòng)大于30的距離，是的話就切換到test2頁(yè)面。

7、現(xiàn)在我們打開(kāi)test頁(yè)面，向左滑動(dòng)會(huì)提示切換頁(yè)面（這個(gè)可以去除），確定后就切換到了test2頁(yè)面，向右滑動(dòng)切換的方法同理。