jquery图片滑动,jq实现图片滚动效果

Jquery插件，SuperSlide图片的循环滚动功能

将javascript代码替换为如下，

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的台江网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

script type="text/javascript"jQuery(".scroolWarp").slide({ titCell:".hd ul", mainCell:".bd ul",effect:"left",vis:6,scroll:6,autoPlay:true,autoPage:true});/script

JS如何实现图片滑动？

script language="javascript" type="text/javascript"

//图片滚动展示 Start

var counts = 4;

//大图//

img1 = new Image();

img1.src = 'images/1.jpg';

img2 = new Image();

img2.src = 'images/2.jpg';

img3 = new Image();

img3.src = 'images/3.jpg';

img4 = new Image();

img4.src = 'images/4.jpg';

var smallImg = new Array();

//小图

smallImg[0] = 'images/index_adb1.gif';

smallImg[1] = 'images/index_adb2.gif';

smallImg[2] = 'images/index_adb3.gif';

smallImg[3] = 'images/index_adb4.gif';

//链接地址

url1 = new Image();

url1.src = ' ';

url2 = new Image();

url2.src = ' ';

url3 = new Image();

url3.src = ' ';

url4=new Image();

url4.src=' '

//alt值

alt1 = new Image();

alt1.alt = '';

alt2 = new Image();

alt2.alt = '';

alt3 = new Image();

alt3.alt = ' ';

alt4 = new Image();

alt4.alt='';

////欢迎来到标准之路.

var nn = 1;

var key = 0;

function change_img() {

if (key == 0) {

key = 1;

} else if (document.all) {

document.getElementById("pic").filters[0].Apply();

document.getElementById("pic").filters[0].Play(duration = 2);

}

eval('document.getElementById("pic").src=img' + nn + '.src');

eval('document.getElementById("url").href=url' + nn + '.src');

eval('document.getElementById("pic").alt=alt' + nn + '.alt');

if (nn == 1) {

document.getElementById("url").target = "_blank";

document.getElementById("url").style.cursor = "pointer";

} else {

document.getElementById("url").target = "_blank"

document.getElementById("url").style.cursor = "pointer"

}

for ( var i = 1; i = counts; i++) {

document.getElementById("xxjdjj" + i).className = 'axx';

}

document.getElementById("xxjdjj" + nn).className = 'bxx';

nn++;

if (nn counts) {

nn = 1;

}

tt = setTimeout('change_img()', 7000);

}

function changeimg(n) {

nn = n;

window.clearInterval(tt);

change_img();

}

function imageshow() {

document.write('div class="picshow_main"');

document.write('diva id="url"img id="pic" class="imgbig" //a/div');

document.write('div class="picshow_change"');

for ( var i = 0; i counts; i++) {

document.write('a href="javascript:changeimg(' + (i + 1)

+ ');" id="xxjdjj' + (i + 1)

+ '" class="axx" target="_self"img src="' + smallImg[i]

+ '"/a');

}

document.write('/div/div');

change_img();

}

//图片滚动展示 End

/script

script language="javascript" type="text/javascript"

imageshow();

/script

jquery点击按钮图片上下滚动怎么做？

!DOCTYPE html

html lange="en"

head

title点击左右按钮图片横向滚动/title

meta charset=utf-8" /

style type="text/css"

* { margin:0; padding:0;}

body { font-size:12px;}

.box {height:66px; float:left; width:440px; overflow: hidden; position:relative; }

.box

li { display:block; float:left; margin-left:5px; margin-right:5px;

width:100px;

height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center;

cursor:pointer;}

.box li:hover { color:#999; }

.box li.active { background-position:-174px 0; color:#555;cursor:default;}

a.prev,

a.next {background:url()

no-repeat 0 0; display:block;width:23px;height:43px; float:left;

margin:15px 0 0 0; cursor:pointer;}

a.next { background-image:url()}

.scroll_list{ width:10000em; position:absolute; }

/style

!-- 引入jQuery --

script src="" type="text/javascript"/script

script type="text/javascript"

$(function(){

var page= 1;

var i = 4;//每版四个图片

//向右滚动

$(".next").click(function(){ //点击事件

var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素

var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域

var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域

var v_width = v_cont.width();

var len = v_show.find("li").length; //我的视频图片个数

var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数

if(!v_show.is(":animated")){

if(page == page_count){

v_show.animate({left:'0px'},"slow");

page =1;

}else{

v_show.animate({left:'-='+v_width},"slow");

page++;

}

}

});

//向左滚动

$(".prev").click(function(){ //点击事件

var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素

var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域

var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域

var v_width = v_cont.width();

var len = v_show.find("li").length; //我的视频图片个数

var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数

if(!v_show.is(":animated")){

if(page == 1){

v_show.animate({left:'-='+ v_width*(page_count-1)},"slow");

page =page_count;

}else{

v_show.animate({left:'+='+ v_width},"slow");

page--;

}

}

});

});

/script

/head

body

!-- 例子 --

div class="scroll" style="margin:0 auto;width:550px;"

!-- "prev page" link --

a class="prev" href="#"/a

div class="box"

div class="scroll_list"

ul

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

li7/li

li8/li

li9/li

li10/li

li11/li

li12/li

li13/li

li14/li

li15/li

li16/li

/ul

/div

/div

!-- "next page" link --

a class="next" href="#"/a

/div

/body

/html

用JQUERY怎么做出来 图片从右到左自动切换，点击向右的标志，向右移动一张图片

这种插件非常多, 你可以挑一个用

如果你要问原理, 关键点是

外层div是一个窗口, 控制好长宽, 设置overflow为hidden, 那么只有在此区域内的内容才会被显示

内容是一堆图片, 通过js控制位置, 比如用relative定位, 通过css控制left, 就是移动效果

如果要轮播, 注意控制边界图片次序

jquery实现图片自动切换和点击切换

需要js+css配合，我给您找段代码吧。

JS代码

$(function () {

$(".dummy").click(function () { return false; });

var flipDelay = 5500;

var flipCount = $("div.banner_footer a").size(); // 图片总数

var flipId = 1;

var flipId1 = 0;

var flipTimer = null;

var flipTimer1 = null;

var i = 0;

var flip = function () {

if (flipCount  2) return;

$("div.banner_footer a").removeClass("current");

$($("div.banner_footer a").get(flipId)).addClass("current");

$($("div.banner_footer a").get(flipId)).css("current");

$("div.banner  a:visible").fadeOut();

$($("div.banner a").get(flipId)).fadeIn("slow");

flipId = (flipId + 1) % flipCount;

flipTimer = window.setTimeout(flip, flipDelay);

}

flipTimer = window.setTimeout(flip, flipDelay);

$("div.banner_footer a").click(function () {

clearTimeout(flipTimer);

flipId = $("div.banner_footer a").index(this);

flip();

return false;

});

var flipserver = function () {

$("div.index_server_box  a:visible").fadeOut();

$($("div.index_server_box a").get(flipId1)).fadeIn("slow");

}

$("a.index_server_left").click(function () {

flipId1 = (flipId1 - 1) % 3;

flipserver();

return false;

});

$("a.index_server_right").click(function () {

flipId1 = (flipId1 + 1) % 3;

flipserver();

return false;

});

var documentWidth = $(window).width();

var left = (documentWidth - 310) / 2;

var right = left + 306;

$("div.services_box div.left").css("width", left + "px");

$("div.services_box div.right").css("width", right + "px");

$(window).resize(function () {

var documentWidth = $(window).width();

var left = (documentWidth - 310) / 2;

var right = left + 306;

$("div.services_box div.left").css("width", left + "px");

$("div.services_box div.right").css("width", right + "px");

});

});

html样式

div class="banner_box"

div class="banner"

a href="" class="banner1"img src="img/banner1.jpg" alt="视觉为您解决网站建设中企业品牌形象问题" //a

a href="" class="banner2"img src="img/banner2.jpg" alt="独具匠心的网页设计让您的网站与总部同" //a

a href="" class="banner3"img src="img/banner3.jpg" alt="针对用户需求，提供高品质网站设计服务" //a

a href="" class="banner4"img src="img/banner4.jpg" alt="网站建设公司团队的力量" //a

a href="" class="banner5"img src="img/banner5.jpg" alt="招聘网页设计师" //a

div class="banner_footer"

a class="a1 current"img src="img/a13.jpg" alt="" //a

a class="a2" img src="img/a14.jpg" alt="" //a

a class="a3"img src="img/a15.jpg" alt="" //a

a class="a4"img src="img/a16.jpg" alt="" //a

a class="a5"img src="img/a17.jpg" alt="" //a

/div

/div

/div

css样式

div.banner_box{height:430px; overflow:hidden; background:url(../img/b1.jpg) repeat-x;}

div.banner_box div.banner{width:990px; height:430px; overflow:hidden; margin:auto; position:relative;}

div.banner_box div.banner a{border:0;}

div.banner_box div.banner a.banner1 img{margin-left:200px;}

div.banner_box div.banner a.banner2 img{margin-left:236px;}

div.banner_box div.banner a.banner3 img{margin-left:250px;}

div.banner_box div.banner a.banner4 img{margin-left:231px;}

div.banner_box div.banner a.banner5 img{margin-left:245px;}

div.banner_box div.banner div.banner_footer{position:absolute;width:120px;height:20px;top:30px; right:0;z-index:100;  }

div.banner_box div.banner div.banner_footer a{float:left; width:19px; height:19px; cursor:pointer; }

div.banner_box div.banner div.banner_footer a.current{background:url(../img/a13_1.jpg) center center no-repeat;}

div.banner_box div.banner div.banner_footer a img{border:0; margin:3px 0 0 3px;}

希望能帮到您！祝您好运！

怎样用jquery mobile实现手机上的文字或者图片可以左右滑动

jquerymobile没有这个功能，他只有判断是向左还是向右划动操作判断（swiftleft swiftright这些）但是对应的移动端的插件倒是有很多，给你共享个