『壹』 求一段簡單的js圖片輪播代碼，剛學js，不要太復雜。謝謝！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="焦點圖" />
<meta name="description" content="焦點圖代碼" />
<title>焦點圖</title>
<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/jquery.js"></script>
<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/slide.js"></script>
</head>
<body>
<!-- 代碼 開始 -->
<style>
.ck-slide ul { margin: 0; padding: 0; list-style-type: none;}
.ck-slide { position: relative; overflow: hidden;}
.ck-slide ul.ck-slide-wrapper { position: absolute; top: 0; left: 0; z-index: 1; margin: 0; padding: 0;}
.ck-slide ul.ck-slide-wrapper li { position: absolute;}
.ck-slide .ck-prev, .ck-slide .ck-next { position: absolute; top: 50%; z-index: 2; width: 35px; height: 70px; margin-top: -35px; border-radius: 3px; opacity: .15; background: red; text-indent: -9999px; background-repeat: no-repeat; transition: opacity .2s linear 0s;}
.ck-slide .ck-prev { left: 5px; background: url(templets/default/images/arrow-left.png) #000 50% no-repeat;}
.ck-slide .ck-next { right: 5px; background: url(templets/default/images/arrow-right.png) #000 50% no-repeat;}
.ck-slidebox { position: absolute; left: 50%; bottom: 0px; z-index: 30; hright:30px;width:100%}
.ck-slidebox ul { height: 30px; padding: 0 4px; background: rgba(0,0,0,0.5); text-align:center}
.ck-slidebox ul li { float: left; height: 30px; margin: 0px 4px;line-height:30px;color:#fff;display:none}
.ck-slidebox ul li em { display: block; width: 100%; height: 30px; cursor: pointer; font-size:14px}
.ck-slidebox ul li.current em {color:#fff }
.ck-slidebox ul li em:hover { }
.ck-slide { width: 600px; height: 400px; margin: 0 auto;}
.ck-slide ul.ck-slide-wrapper { height: 400px;}
.ck-slide-wrapper li {display:none}
.ck-slidebox ul li{display:none}
.current{display:block!important}
</style>
<div class="ck-slide">
<ul class="ck-slide-wrapper">
<li>
<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/307.html" target="_blank"><img id="slide-img-1" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014114S60-L.jpg" class="slide" alt="國考明起報名招2.7萬人 首次僅面向體制外招錄" style='width:600px'/></a>
</li>
<li>
<a target="_blank" href="http://www.jinchuwenhua.com//a/xinwen/2015/1014/289.html" target="_blank"><img id="slide-img-2" src="http://www.jinchuwenhua.com/uploads/151014/1-151014092105J3.jpg" class="slide" alt="中關村「變形記」：從電子賣場到7.2公里的創業大街" style='width:600px'/></a>
</li>
<li>
<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/290.html" target="_blank"><img id="slide-img-3" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014092F30-L.jpg" class="slide" alt="金星大聊兩性話題 辣評娛樂圈男星：沒我想睡的" style='width:600px'/></a>
</li>
</ul>
<a href="javascript:" class="ctrl-slide ck-prev">上一張</a> <a href="javascript:" class="ctrl-slide ck-next">下一張</a>
<div class="ck-slidebox">
<div class="slideWrap">
<ul class="dot-wrap">
<li><em>國考明起報名招2.7萬人 首次僅面向體制外招錄</em></li>
<li><em>中關村「變形記」：從電子賣場到7.2公里的創業大街</em></li>
<li><em>金星大聊兩性話題 辣評娛樂圈男星：沒我想睡的</em></li>
</ul>
</div>
</div>
</div>
<!--圖片輪播結束-->
<!-- 代碼 結束 -->
<script>
$('.ck-slide').ckSlide({
autoPlay: true
});
</script>
</body>
</html>
『貳』 怎麼樣調整圖片輪播速度
找到js腳本里的animate方法
$(selector).animate(styles,speed,easing,callback)
其中參數speed就是輪播速度 毫秒 （比如 1500）
『叄』 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);
});
希望對你有幫助！