js輪播源碼
❶ 圖片自動播放輪播JQ，js代碼。
//輪播器
var crs_num=1
function interval(){
carousel=setInterval(function(){
num2=crs_num*-800
$('.crs_img').animate({
attr:'x',
target:num2,
time:50,
speed:10,
})
$('.crs_words p').html($('.crs_img img').getnum(crs_num).attr('alt'))
$('#carousel li').css('color','#999')
$('#carousel li').getnum(crs_num).css('color','#333')
crs_num++;
if(crs_num==3)crs_num=0;
},3000)
}
interval();
$('#carousel li').hover(function(){
var num=$(this).childNum()*-800
clearInterval(carousel)
$('.crs_img').animate({
attr:'x',
target:num,
time:50,
speed:5,
})
$('.crs_words p').html($('.crs_img img').getnum($(this).childNum()).attr('alt'))
$('#carousel li').css('color','#999')
$(this).css('color','#333')
},function(){
interval()
})
animate是自己封裝的，可能和jq不兼容
❷ JS如何實現左右滾動輪播代碼詳細點
var datas = [
{imgSrc:"（圖片 ）"},
{imgSrc:"（圖片 ）"},
{imgSrc:"（圖片 ）"},
{imgSrc:"（圖片 ）"},
{imgSrc:"（圖片 ）"},
{imgSrc:"（圖片 ）"}
];
var banner = document.getElementById("banner");
var list = document.getElementById("list");
for(var i = 0,len = datas.length;i<len;i++){
var div = document.createElement("div");
var li = document.createElement("li");
if(i==0){ //默認第一項輪播項顯示 對應的控制按鈕被選中
div.className = "item active";
li.className = "active";
}else{ //其他項隱藏 其他的控制按鈕樣式不改變
div.className = "item";
li.className = "";
}
div.innerHTML = '<a href="' + datas[i].targetSrc + '">' +
'<img src="' + datas[i].imgSrc + '" />' +
'</a>';
li.innerHTML = i + 1;
banner.appendChild(div);
list.appendChild(li);
}
var lunBo = document.getElementById("lunBo");
var items = document.querySelectorAll("#lunBo #banner .item");
var lis = document.querySelectorAll("#lunBo #list li");
var currentIndex = 0;//(控制按鈕和輪播項共同的索引)
for(var i = 0,len = lis.length;i<len;i++){
lis[i].index = i;
lis[i].onmouseenter = function(){
currentIndex = this.index;
for(var j = 0;j<len;j++){
lis[j].className = "";
items[j].className = "item";
}
this.className = "active";
items[this.index].className = "item active";
}
}
var termId; //全局變數
function autoPlay(){
termId = setInterval(function(){
currentIndex++;
if(currentIndex==lis.length){
currentIndex = 0;
}
lis[currentIndex].onmouseenter();
},3000);
}
autoPlay();//打開頁面自動輪播
//滑鼠進入停止輪播
lunBo.onmouseenter = function(){
clearInterval(termId);
}
//滑鼠離開繼續輪播
lunBo.onmouseleave = function(){
autoPlay();
}
我這還有其他的，先採納一下加我，我給你發
❸ JS輪播彈窗代碼
//時間控制的廣告代碼
var cookie = {
ad0:30,//時間控制第一個廣告30分鍾輪播
ad1:60,//時間控制第二個廣告60分鍾輪播
ad_num : 2,
get_cookie : function(Name){var search = Name + "="; var returnvalue = "";if (document.cookie.length > 0) {offset = document.cookie.indexOf(search);if (offset != -1) {offset += search.length;end = document.cookie.indexOf(";", offset);if (end == -1)end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end));}}return returnvalue;},
init : function(){
for(var i=0; i<cookie.ad_num; i++){
if(cookie.get_cookie('ppad_cookie_'+i)){
continue;
}else{
var Then = new Date();current_time = eval('cookie.ad'+i);Then.setTime(Then.getTime() + current_time*60*1000);document.cookie='ppad_cookie_'+i+'=1;expires='+ Then.toGMTString()+';path=/;';
switch(i){
case 0:
廣告代碼一 break;
case 1:
廣告代碼二 break;
}
break;
}
}
}
}
cookie.init();
//直接就放JS文件裡面
❹ 求一個簡單的js實現輪播代碼
<!DOCTYPEHTML>
<html>
<head>
<title>JS無縫滾動圖片</title>
<metacharset=UTF-8/>
<styletype="text/css">
*{
margin:0;
padding:0;
}
#div2{
margin:auto;
width:602px;
overflow:hidden;
left:200px;
}
#div1{
position:relative;
left:0px;
width:1200px;
}
#div1li{
list-style-type:none;
float:left;
width:200px;
height:180px;
}
img{
width:200px;
height:180px;
}
ul#ul1{
position:relative;
}
</style>
<scripttype="text/javascript">
window.onload=function()
{
varoUl=document.getElementById('ul1');
vart,o;
varspeed=0;
varfunny=function()
{
t&&clearInterval(t);
t=setInterval(function()
{
speed-=200/11;
if(speed<-200){
speed=0;
oUl.appendChild(oUl.children[0]);
t&&clearInterval(t);
t=null;
o&&clearTimeout(o);
o=setTimeout(funny,1000);
}
oUl.style.left=speed+"px";
},60);
}
funny();
}
</script>
</head>
<body>
<divid="div2">
<divid="div1">
<ulid="ul1">
<li><imgsrc="../../images/choose.png">
</li>
<li><imgsrc="../../images/deck.png">
</li>
<li><imgsrc="../../images/el.png">
</li>
<li><imgsrc="../../images/list.png">
</li>
</ul>
</div>
</div>
</body>
</html>
❺ 求js輪播圖代碼,有詳細注釋
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
*{
padding:0;
margin:0;
list-style:none;
border:0;
}
.all{
width:500px;
height:200px;
padding:7px;
border:1pxsolid#ccc;
margin:100pxauto;
position:relative;
}
.screen{
width:500px;
height:200px;
overflow:hidden;
position:relative;
}
.screenli{
width:500px;
height:200px;
overflow:hidden;
float:left;
}
.screenul{
position:absolute;
left:0;
top:0px;
width:3000px;
}
.allol{
position:absolute;
right:10px;
bottom:10px;
line-height:20px;
text-align:center;
}
.allolli{
float:left;
width:20px;
height:20px;
background:#fff;
border:1pxsolid#ccc;
margin-left:10px;
cursor:pointer;
}
.allolli.current{
background:#DB192A;
}
#arr{
display:none;
}
#arrspan{
width:40px;
height:40px;
position:absolute;
left:5px;
top:50%;
margin-top:-20px;
background:#000;
cursor:pointer;
line-height:40px;
text-align:center;
font-weight:bold;
font-family:'黑體';
font-size:30px;
color:#fff;
opacity:0.3;
border:1pxsolid#fff;
}
#arr#right{
right:5px;
left:auto;
}
</style>
</head>
<body>
<divclass="all"id='box'>
<!--相框-->
<divclass="screen">
<ul>
<li>
<imgsrc="images/41.jpg"width="500"height="200"/>
</li>
<li>
<imgsrc="images/42.jpg"width="500"height="200"/>
</li>
<li>
<imgsrc="images/43.jpg"width="500"height="200"/>
</li>
<li>
<imgsrc="images/44.jpg"width="500"height="200"/>
</li>
<li>
<imgsrc="images/45.jpg"width="500"height="200"/>
</li>
</ul>
<ol>
</ol>
</div>
<divid="arr">
<spanid="left"><</span>
<spanid="right">></span>
</div>
</div>
<!--<scriptsrc="common.js"></script>-->
<script>
functionmy$(id){
returndocument.getElementById(id);
}
functionsetInnerText(element,content){
if(typeofelement.textContent==="undefined"){
//IE瀏覽器
element.innerText=content;
}else{
element.textContent=content;
}
}
functionanimate(element,target){
//先幹掉定時器
clearInterval(element.timeId);
element.timeId=setInterval(function(){
//時時的獲取元素的當前的位置
varcurrent=element.offsetLeft;
//每次移動的步數
varstep=10;
//設置每次移動的步數是正數還是負數
step=current<target?step:-step;
//移動後的當前的位置
current+=step;
if(Math.abs(target-current)>Math.abs(step)){
element.style.left=current+"px";
}else{
clearInterval(element.timeId);
element.style.left=target+"px";
}
},20);
}
//獲取最外面的div
varbox=my$("box");
//獲取相框
varscreen=box.children[0];
//獲取相框的寬度
varimgWidth=screen.offsetWidth;
//獲取ul
varulObj=screen.children[0];
//獲取ul中的li
varulLiObj=ulObj.children;
//獲取ol
varolObj=screen.children[1];
//獲取的是左右焦點的div
vararr=my$("arr");
//獲取左邊的按鈕
varleft=my$("left");
//獲取右邊的按鈕
varright=my$("right");
varpic=0;
//頁面載入後先創建小按鈕,根據ul中的li個個數來創建li,把li加入到ol中
for(vari=0;i<ulLiObj.length;i++){
//創建li
varliObj=document.createElement("li");
//把li加入到ol中
olObj.appendChild(liObj);
setInnerText(liObj,(i+1));//兼容代碼
//為每個ol中的li添加一個自定義屬性存儲索引值
liObj.setAttribute("index",i);
//為每個li注冊滑鼠進入事件
liObj.onmouseover=function(){
//先把ol中所有的li的背景顏色全部幹掉
for(varj=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
//設置當前滑鼠進入的li有背景顏色
this.className="current";
//移動ul
//獲取滑鼠進入的ol中的li的索引值
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
};
}
//第一個標簽設置顏色
olObj.children[0].className="current";
//追加一個圖片到ul中
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//頁面載入之後自動移動
vartimeId=setInterval(f1,1000);
//滑鼠進入
box.onmouseover=function(){
arr.style.display="block";
clearInterval(timeId);
}
//滑鼠離開
box.onmouseout=function(){
arr.style.display="none";
timeId=setInterval(f1,1000);
}
//右邊焦點
right.onclick=f1;
functionf1(){
//判斷是否到達最後一張
if(pic==ulLiObj.length-1){
//跳轉到第一張
pic=0;
ulObj.style.left=-pic*imgWidth+"px";
}
pic++;
//調用動畫函數
animate(ulObj,-pic*imgWidth);
//刷一遍
for(vari=0;i<olObj.children.length;i++){
olObj.children[i].removeAttribute("class");
}
//第一個按鈕的顏色
if(pic==ulLiObj.length-1){
olObj.children[0].className="current";
}else{
olObj.children[pic].className="current";
}
};
//左邊焦點
left.onclick=function(){
//判斷是否到達第一張圖片
if(pic==0){
//跳轉到第六張圖片
pic=ulLiObj.length-1;
ulObj.style.left=-pic*imgWidth+"px";
}
pic--;
//調用動畫函數
animate(ulObj,-pic*imgWidth);
//刷一遍
for(vari=0;i<olObj.children.length;i++){
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className="current";
}
</script>
</body>
</html>
❻ js實現輪播代碼怎麼寫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>最簡單的輪播廣告</title>
<style>
body, div, ul, li {
margin: ;
padding: ;
}
ul {
list-style-type: none;
}
body {
background: #;
text-align: center;
font: px/px Arial;
}
#box {
position: relative;
width: px;
height: px;
background: #fff;
border-radius: px;
border: px solid #fff;
margin: px auto;
}
#box .list {
position: relative;
width: px;
height: px;
overflow: hidden;
border: px solid #ccc;
}
#box .list li {
position: absolute;
top: ;
left: ;
width: px;
height: px;
opacity: ;
transition: opacity .s linear
}
#box .list li.current {
opacity: ;
}
#box .count {
position: absolute;
right: ;
bottom: px;
}
#box .count li {
color: #fff;
float: left;
width: px;
height: px;
cursor: pointer;
margin-right: px;
overflow: hidden;
background: #F;
opacity: .;
border-radius: px;
}
#box .count li.current {
color: #fff;
opacity: .;
font-weight: ;
background: #f
}
</style>
</head>
<body>
<div id="box">
<ul>
<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
</ul>
<ul>
<li></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
<script>
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[].getElementsByTagName('li');
var btn=uls[].getElementsByTagName('li');
var i=index=; //中間量，統一聲明；
var play=null;
console.log(box,uls,imgs,btn);//獲取正確
//圖片切換, 淡入淡出效果我是用（transition: opacity .s linear）做的,不糾結、簡單 在css裡面
function show(a){ //方法定義的是當傳入一個下標時，按鈕和圖片做出對的反應
for(i=;i<btn.length;i++ ){
btn[i].className=''; //很容易看懂吧？每個按鈕都先設置成看不見，然後把當前按鈕設置成可見。
btn[a].className='current';
}
for(i=;i<imgs.length;i++){ //把圖片的效果設置和按鈕相同
imgs[i].style.opacity=;
imgs[a].style.opacity=;
}
}
//切換按鈕功能，響應對應圖片
for(i=;i<btn.length;i++){
btn[i].index=i; //不知道你有沒有發現，循環里的方法去調用循環里的變數體i，會出現調到的不是i的變動值的問題。所以我先在循環外保存住
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play); //這就是最後那句話追加的功能
}
}
//自動輪播方法
function autoPlay(){
play=setInterval(function(){ //這個paly是為了保存定時器的，變數必須在全局聲明 不然其他方法調不到 或者你可以調用auto.play 也許可以但是沒時間試了
index++;
index>=imgs.length&&(index=);//可能有優先順序問題，所以用了括弧，沒時間測試了。
show(index);
},)
}
autoPlay();//馬上調用，我試過用window.onload調用這個方法，但是調用之後影響到了其他方法，使用autoPlay所以只能這樣調用了
//div的滑鼠移入移出事件
box.onmouseover=function(){
clearInterval(play);
};
box.onmouseout=function(){
autoPlay();
};
//按鈕下標也要加上相同的滑鼠事件，不然圖片停止了，定時器沒停，會突然閃到很大的數字上。 貌似我可以直接追加到之前定義事件中。
</script>
</body>
</html>
❼ js輪播代碼，求詳解
試試這個js圖片切換 有12345數字一起切換 滑鼠點一下數字會變換到另一張圖片，不點就會自動換 裡面有教程和源碼
❽ 求淡入淡出的js輪播效果的代碼
如下代碼可以實現，不過你首先需要引用Jquery，我使用的是jquery-1.7.1.min.js
支持兩個div或多個div的淡入淡出切換：
<divid="imgbox">
<divstyle="width:100px;height:100px;background-color:red;"></div>
<divstyle="width:100px;height:100px;background-color:blue;"></div>
</div>
<scriptsrc="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#imgboxdiv").fadeOut(0).eq(0).fadeIn(0);
vari=0;
setInterval(function(){
if($("#imgboxdiv").length>(i+1)){
$("#imgboxdiv").eq(i).fadeOut(0).next("div").fadeIn(1000);
i++;
}
else{
$("#imgboxdiv").eq(i).fadeOut(0).siblings("div").eq(0).fadeIn(1000);
i=0;
}
},2000);
});
</script>
❾ 關於源生JS實現圖片輪播問題
改好了， chrome下沒問題。 你出錯在這一行：i>0?(i--):(i=oLi.length-1) oLi.length-1,即最後一張圖片.上一張
<!doctypehtml>
<html>
<head>
</head>
<body>
<script>
window.onload=function(){
changeImages();
functionchangeImages(){//將自動輪播，點擊切換，列表同步切換封裝在函數changeImages中，直接調用執行；
varoList=document.getElementById("list");
varoDiv=document.getElementById("div2");
varoInput=document.getElementById("next");
varoInput2=document.getElementById("upper");
varoLi=oDiv.getElementsByTagName("li");
varoLi1=oList.getElementsByTagName("li");
vari=0;//記錄點擊次數
varspeed=3000;
varchange=setInterval(function(){
clearInterval();
for(vara=0;a<oLi.length;a++){
oLi[a].className="";
oLi1[a].className="";
}
(i<oLi.length-1)?(i++):(i=0);
oLi[i].className="show";
oLi1[i].className="show1";
},speed)
oInput.onclick=function(){//下一張
for(vara=0;a<oLi.length;a++){
oLi[a].className="";
oLi1[a].className="";
}
(i<oLi.length-1)?(i++):(i=0);
oLi[i].className="show";
oLi1[i].className="show1";
};
oInput2.onclick=function(){
for(vara=0;a<oLi.length;a++){
oLi[a].className="";
oLi1[a].className="";
}
i>0?(i--):(i=oLi.length-1);oLi.length-1;
oLi[i].className="show";
oLi1[i].className="show1";
};
for(vara=0;a<oLi1.length;a++){//實現滑鼠移動到列表，自動切換到對應圖片功能，其原理與選項卡原理基本一致；
oLi1[a].index=a;//這里變數名必須統一，如果將後面a改為i，那麼i=0將會執行兩次，導致第一次點擊下一張失效
oLi1[a].onmouseover=function(){
for(vari=0;i<oLi1.length;i++){
oLi[i].className="";
oLi1[i].className="";
};
oLi[this.index].className="show";
this.className="show1";
};
}}
};
</script>
<divid="div1">
<inputid="upper"type="button"value="上一張"></input>
<inputid="next"type="button"value="下一張"></input>
<divid="div2">
<ul>
<liclass="show"><imgsrc="http://www.jq22.com/demo/unslider-150203225543/03.jpg"width="100%"height="100%"></li>
<li><imgsrc="http://www.jq22.com/demo/unslider-150203225543/01.jpg"width="100%"height="100%"></li>
<li><imgsrc="http://www.jq22.com/demo/unslider-150203225543/02.jpg"width="100%"height="100%"></li>
<li><imgsrc="http://www.jq22.com/demo/unslider-150203225543/04.jpg"width="100%"height="100%"></li>
</ul>
</div>
<ulid="list">
<liclass="show1">111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
</div>
<style>
#div1{background:#ccc;margin:0auto;}
#div2{background:red;width:500px;height:400px;margin:0auto;}
#div2ulli{display:none;;width:100%;height:100%}
#div2ul{width:100%;height:100%;}
#div1.show1{background:yellow;}
#div2.show{display:block;}
body,ul{margin:0;padding:0;}
</style>
</body>
</html>
❿ js代碼實現banner圖片輪播
這是我以前寫過的一個，樣式你改一下就OK了
<div class="fbanner widget3924">
<div id="i_focus">
<div id="i_focus_pic">
<ul id="i_focus_piclist">
<li style="display: none;">
<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner1.jpg) center 0 no-repeat;">
</a>
</li>
<li style="display: list-item;">
<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner4.jpg) center 0 no-repeat;">
</a>
</li>
<li style="display: none;">
<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner3.jpg) center 0 no-repeat;">
</a>
</li>
<li style="display: none;">
<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner2.jpg) center 0 no-repeat;">
</a>
</li>
</ul>
<div id="i_focus_opdiv">
</div>
<ul id="i_focus_btn">
<li id="p0" class="">
<span>
</span>
</li>
<li id="p0" class="i_cur">
<span>
</span>
</li>
<li id="p0" class="">
<span>
</span>
</li>
<li id="p0" class="">
<span>
</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="/templates/runlinjinguan/js/flash.js"></script>
<script type="text/javascript">
$("#i_focus_btn").find("li").eq(0).addClass("i_cur");
</script>
</div>
引用的js文件
// JavaScript Document
//flash js
$(document).ready(function () {
var i_curIndex = 0;
var beauBeauSlide; //函數對象
var i_curID = 0; //取得滑鼠下方的對象ID
var pictureID = 0; //索引ID
$("#i_focus_piclist li").eq(0).show(); //默認
autoScroll();
$("#i_focus_btn li").hover(function (e) {
StopScrolll();
$("#i_focus_btn li").removeClass("i_cur") //所有的li去掉當前的樣式加上正常的樣式
$(this).addClass("i_cur"); //而本身則加上當前的樣式去掉正常的樣式
i_curID = $(this).attr("id"); //取當前元素的ID
pictureID = $("#i_focus_btn li").index(this);// i_curID.substring(i_curID.length - 1); //取最後一個字元
$("#i_focus_piclist li").eq(pictureID).fadeIn("slow"); //本身顯示
$("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide(); //除了自身別的全部隱藏
$("#i_focus_tx li").hide();
$("#i_focus_tx li").eq(pictureID).show();
},
function () {
//當滑鼠離開對象的時候獲得當前的對象的ID以便能在啟動自動時與其同步
i_curID = $(this).attr("id"); //取當前元素的ID
pictureID = i_curID.substring(i_curID.length - 1); //取最後一個字元
i_curIndex = pictureID;
autoScroll();
});
//自動滾動
function autoScroll() {
var myNubli = $("#i_focus_btn li").size();
if (myNubli > 1) {
$("#i_focus_btn li:last").removeClass("i_cur");
$("#i_focus_tx li:last").hide();
$("#i_focus_btn li").eq(i_curIndex).addClass("i_cur");
$("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur");
$("#i_focus_tx li").eq(i_curIndex).show();
$("#i_focus_tx li").eq(i_curIndex - 1).hide();
$("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow");
$("#i_focus_piclist li").eq(i_curIndex - 1).hide();
i_curIndex++;
i_curIndex = i_curIndex >= myNubli ? 0 : i_curIndex;
beauBeauSlide = setTimeout(autoScroll, 5000);
}
}
function StopScrolll() //當滑鼠移動到對象上面的時候停止自動滾動
{
clearTimeout(beauBeauSlide);
}
});
//第二個漸隱幻燈開始
var defaultOpts = {
interval: 3000,
fadeInTime: 800,
fadeOutTime: 500
};
var _titles = $("ul.slide-txt li");
var _titles_bg = $("ul.op li");
var _bodies = $("ul.slide-pic li");
var _count = _titles.length;
var _current = 0;
var _intervalID = null;
var stop = function () {
window.clearInterval(_intervalID);
};
var slide = function (opts) {
if (opts) {
_current = opts.current || 0;
} else {
_current = (_current >= (_count - 1)) ? 0 : (++_current);
};
_bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,
function () {
_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
_bodies.removeClass("cur").eq(_current).addClass("cur");
});
_titles.removeClass("cur").eq(_current).addClass("cur");
_titles_bg.removeClass("cur").eq(_current).addClass("cur");
}; //endof slide
var go = function () {
stop();
_intervalID = window.setInterval(function () {
slide();
},
defaultOpts.interval);
}; //endof go
var itemMouseOver = function (target, items) {
stop();
var i = $.inArray(target, items);
slide({
current: i
});
}; //endof itemMouseOver
_titles.hover(function () {
if ($(this).attr('class') != 'cur') {
itemMouseOver(this, _titles);
} else {
stop();
}
},
go);
//_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);
_bodies.hover(stop, go);
go();
var slideX = {
_this: $('.catalog .imgbox'),
_btnLeft: $('.catalog .left'),
_btnRight: $('.catalog .right'),
init: function () {
slideX._btnLeft.click(slideX.slideLeft);
slideX._btnRight.click(slideX.slideRight);
},
slideLeft: function () {
slideX._btnLeft.unbind('click', slideX.slideLeft);
for (i = 0; i < 2; i++) {
slideX._this.find('li:last').prependTo(slideX._this);
}
slideX._this.css('marginLeft', -224);
slideX._this.animate({
'marginLeft': 0
},
500,
function () {
slideX._btnLeft.bind('click', slideX.slideLeft);
});
return false;
},
slideRight: function () {
slideX._btnRight.unbind('click', slideX.slideRight);
slideX._this.animate({
'marginLeft': -224
},
500,
function () {
slideX._this.css('marginLeft', '0');
for (i = 0; i < 2; i++) {
slideX._this.find('li:first').appendTo(slideX._this)
}
slideX._btnRight.bind('click', slideX.slideRight);
});
return false;
}
}
$(document).ready(function () {
slideX.init();
})
$(document).ready(function () {
var newTime = new Date();
var newTime = newTime.getTime();
var $imgTmp = $('#topromotion').find('img:first');
var osrc = $imgTmp.attr('src');
$imgTmp.attr('src', osrc + '?' + newTime);
});
希望對你有幫助！