看這代碼和你的意思，3秒切換一張圖片，循環(huán)切換，當點擊小圖片時，是想立刻顯示當前點擊的圖片。實現(xiàn)思路：對下面的小圖片添加點擊事件，在循環(huán)執(zhí)行切換時要判斷。偽代碼如下：
創(chuàng)新互聯(lián)公司于2013年開始，先為北碚等服務建站，北碚等地企業(yè)，進行企業(yè)商務咨詢服務。為北碚企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
function?update(index){
//在這塊寫changeimg方法的代碼，作用只是顯示index這張圖片
}
//定義變量
var?current?=?1；//當前顯示的圖片
var?isRun?=?true;?//是否進行切換圖片，此變量是為點擊小圖片顯示而準備
//循環(huán)執(zhí)行，切換圖片
function?showImage(){
setTimeout(showImage,?3000);
if(isRun){
update(index++);
}
}
//小圖片添加點擊事件,逐個添加事件
img.addEventListener("click",?doClick（i）,?false);
img.addEventListener("mouseout",?continueLoop,?false);
//以上為示例，其他自行添加，i為小圖片的順序號，也就是需要顯示圖片的名稱
//
function?doClick(i){
isRun?=?false;
index?=?i;
update(index);
}
//
function?continueLoop(){
isRun?=?true;
}
//最后，初始化完畢，調用循環(huán)方法
showImage();
大意就這樣，當鼠標離開，繼續(xù)循環(huán)，點擊停止循環(huán)，注意事件添加。以上代碼不保證完全正確，一般不用純js開發(fā)，所以不是很熟，見諒！
輪播圖是每個網(wǎng)站中必不可少的元素，那么如何用JS制作輪播圖呢？下面我就給大家分享一下。
工具/材料
Sublime Text
01
首先需要在Sublime中創(chuàng)建HTML文檔，然后在文檔的body區(qū)域中加入如下圖所示的輪播圖內容
02
然后我們需要在style標簽中給所添加的輪播圖內容聲明樣式，如下圖所示
03
接下來我們就需要在script標簽中實現(xiàn)輪播圖的動畫腳本內容了，如下圖所示，注意script標簽的type類型一定要是javascript
04
最后我們運行界面程序，你就會看到如下圖所示的輪播圖了，點擊左右的箭頭和中間的圓點都可以進行輪播圖的切換
script type="text/javascript"
var t = n = 0, count;
$(document).ready(function(){
count=$("#ban_list a").length;//獲取圖片數(shù)目
$("#ban_list a:not(:first-child)").hide();//除第一張圖片都隱藏
$("#ban_info").html($("#ban_list a:first-child").find("img").attr('alt'));//這個是把alt里的內容作為標題
$("#ban_info").click(function(){window.open($("#ban_list a:first-child").attr('href'), "_blank")});//給標題綁定點擊事件，添加鏈接
$("#ban li").click(function() { //按鈕點擊事件
var i = $(this).text() - 1;//獲取Li元素內的值，即1，2，3，4
n = i;
if (i = count) return;
$("#ban_info").html($("#ban_list a").eq(i).find("img").attr('alt'));//重新獲取標題
$("#ban_info").unbind().click(function(){window.open($("#ban_list a").eq(i).attr('href'), "_blank")})//重新綁定標題點擊事件
$("#ban_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);//漸進漸出效果
document.getElementById("ban").style.background="";
$(this).toggleClass("on");//切換按鈕樣式
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#ban").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})//鼠標指上停止輪播
function showAuto()//實現(xiàn)輪播的函數(shù)
{
n = n =(count - 1) ? 0 : ++n;
$("#ban li").eq(n).trigger('click');
}
/script
div id="ban"
div id="ban_bg"/div
div id="ban_info"/div
ul
li class="on"1/li
li2/li
li3/li
/ul
div id="ban_list"
a href="/Item/Show.asp?m=1d=3824" target="_blank"img src="/UploadFiles/2012-08/admin/2012081511562273110.jpg" alt="" width="414" height="286" //a
/div
1 、 首先我們需要在開始時將我們鎖需要的封裝函數(shù)鏈接進來。
列如 script type="text/javascript" src="animate-2.0.1.js"/script
而且我們必須得得到所有需要用到的對象用 getElementById 、getElementsByTagName，然后把需要一個規(guī)范的命名。
2 、第二部我們創(chuàng)建一個定時器先讓輪播圖中所有圖片的 li 動起來
右邊點擊函數(shù)跟定時器所運動的函數(shù)一個樣，所以我們可以封裝一個函數(shù)abc（）；他們是共用的；
3 、 寫出左邊點擊按鈕事件的函數(shù)，這樣就如上abc（）；差不多只是修改一些東西就行了；
4 、講小圓點的樣式改變封裝成一個函數(shù)就是下面的chnage（）；
然后還得監(jiān)聽點擊每個小圓點的事件，所以可以用for + onclick 講每個小圓點點擊事件給寫出來。
難點：
1 、函數(shù)截留，當我們點擊函數(shù)正在執(zhí)行時，如果多次點擊就會出現(xiàn)圖片運動混亂的現(xiàn)象，這是我們需要用if(picDiv.isanimated) {return;}，
2 、cloneNode（）函數(shù)picUl.appendChild(picLi[0].cloneNode(true))
重慶分公司
重慶分公司
