建站
咨詢
售后
建站咨詢
新聞中心
Jquery插件，SuperSlide圖片的循環(huán)滾動(dòng)功能
將javascript代碼替換為如下，
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的臺(tái)江網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
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如何實(shí)現(xiàn)圖片滑動(dòng)？
script language="javascript" type="text/javascript"
//圖片滾動(dòng)展示 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='';
////歡迎來到標(biāo)準(zhǔn)之路.
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();
}
//圖片滾動(dòng)展示 End
/script
script language="javascript" type="text/javascript"
imageshow();
/script
jquery點(diǎn)擊按鈕圖片上下滾動(dòng)怎么做？
!DOCTYPE html
html lange="en"
head
title點(diǎn)擊左右按鈕圖片橫向滾動(dòng)/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;//每版四個(gè)圖片
//向右滾動(dòng)
$(".next").click(function(){ //點(diǎn)擊事件
var v_wrap = $(this).parents(".scroll"); // 根據(jù)當(dāng)前點(diǎn)擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區(qū)域
var v_cont = v_wrap.find(".box"); //找到視頻展示區(qū)域的外圍區(qū)域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的視頻圖片個(gè)數(shù)
var page_count = Math.ceil(len/i); //只要不是整數(shù)，就往大的方向取最小的整數(shù)
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++;
}
}
});
//向左滾動(dòng)
$(".prev").click(function(){ //點(diǎn)擊事件
var v_wrap = $(this).parents(".scroll"); // 根據(jù)當(dāng)前點(diǎn)擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區(qū)域
var v_cont = v_wrap.find(".box"); //找到視頻展示區(qū)域的外圍區(qū)域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的視頻圖片個(gè)數(shù)
var page_count = Math.ceil(len/i); //只要不是整數(shù)，就往大的方向取最小的整數(shù)
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怎么做出來 圖片從右到左自動(dòng)切換，點(diǎn)擊向右的標(biāo)志，向右移動(dòng)一張圖片
這種插件非常多, 你可以挑一個(gè)用
如果你要問原理, 關(guān)鍵點(diǎn)是
外層div是一個(gè)窗口, 控制好長寬, 設(shè)置overflow為hidden, 那么只有在此區(qū)域內(nèi)的內(nèi)容才會(huì)被顯示
內(nèi)容是一堆圖片, 通過js控制位置, 比如用relative定位, 通過css控制left, 就是移動(dòng)效果
如果要輪播, 注意控制邊界圖片次序
jquery實(shí)現(xiàn)圖片自動(dòng)切換和點(diǎn)擊切換
需要js+css配合，我給您找段代碼吧。
JS代碼
$(function?()?{
$(".dummy").click(function?()?{?return?false;?});
var?flipDelay?=?5500;
var?flipCount?=?$("div.banner_footer?a").size();?//?圖片總數(shù)
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="視覺為您解決網(wǎng)站建設(shè)中企業(yè)品牌形象問題"?//a
a?href=""?class="banner2"img?src="img/banner2.jpg"?alt="獨(dú)具匠心的網(wǎng)頁設(shè)計(jì)讓您的網(wǎng)站與總部同"?//a
a?href=""?class="banner3"img?src="img/banner3.jpg"?alt="針對(duì)用戶需求，提供高品質(zhì)網(wǎng)站設(shè)計(jì)服務(wù)"?//a
a?href=""?class="banner4"img?src="img/banner4.jpg"?alt="網(wǎng)站建設(shè)公司團(tuán)隊(duì)的力量"?//a
a?href=""?class="banner5"img?src="img/banner5.jpg"?alt="招聘網(wǎng)頁設(shè)計(jì)師"?//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;}
希望能幫到您！祝您好運(yùn)！
怎樣用jquery mobile實(shí)現(xiàn)手機(jī)上的文字或者圖片可以左右滑動(dòng)
jquerymobile沒有這個(gè)功能，他只有判斷是向左還是向右劃動(dòng)操作判斷（swiftleft swiftright這些）但是對(duì)應(yīng)的移動(dòng)端的插件倒是有很多，給你共享個(gè)
網(wǎng)站名稱：jquery圖片滑動(dòng),jq實(shí)現(xiàn)圖片滾動(dòng)效果
文章起源：http://fisionsoft.com.cn/article/dsdgjgo.html
