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();
}
我這還有其他的，先採納一下加我，我給你發
② 用jquery實現圖片輪播怎麼寫呢求指教
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.slideShow{
width:620px;
height:700px;/*其實就是圖片的高度*/
border:1px#eeeeeesolid;
margin:100pxauto;
position:relative;
overflow:hidden;/*此處需要將溢出框架的圖片部分隱藏*/
}
.slideShowul{
width:2500px;
position:relative;/*此處需注意relative:對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒有這個屬性，圖片將不可左右移動*/
}
.slideShowulli{
float:left;/*讓四張圖片左浮動，形成並排的橫著布局，方便點擊按鈕時的左移動*/
width:620px;
}
.slideShow.showNav{/*用絕對定位給數字按鈕進行布局*/
position:absolute;
right:10px;
bottom:5px;
text-align:center;
font-size:12px;
line-height:20px;
}
.slideShow.showNavspan{
cursor:pointer;
display:block;
float:left;
width:20px;
height:20px;
background:#ff5a28;
margin-left:2px;
color:#fff;
}
.slideShow.showNav.active{
background:#b63e1a;
}
js代碼規范：
<scriptsrc="../../../jQuery/js/jquery-2.1.4.js"></script><scripttype="text/javascript">
$(document).ready(function(){
varslideShow=$(".slideShow"),//獲取最外層框架的名稱
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNavspan"),//獲取按鈕
oneWidth=slideShow.find("ulli").eq(0).width();//獲取每個圖片的寬度
vartimer=null;//定時器返回值，主要用於關閉定時器
variNow=0;//iNow為正在展示的圖片索引值，當用戶打開網頁時首先顯示第一張圖，即索引值為0
showNumber.on("click",function(){//為每個按鈕綁定一個點擊事件
$(this).addClass("active").siblings().removeClass("active");//按鈕點擊時為這個按鈕添加高亮狀態，並且將其他按鈕高亮狀態去掉
varindex=$(this).index();//獲取哪個按鈕被點擊，也就是找到被點擊按鈕的索引值
iNow=index;
ul.animate({"left":-oneWidth*iNow,//注意此處用到left屬性，所以ul的樣式裡面需要設置position:relative;讓ul左移N個圖片大小的寬度，N根據被點擊的按鈕索引值iNOWx確定
})
});
functionautoplay(){
timer=setInterval(function(){//打開定時器
iNow++;//讓圖片的索引值次序加1，這樣就可以實現順序輪播圖片
if(iNow>showNumber.length-1){//當到達最後一張圖的時候，讓iNow賦值為第一張圖的索引值，輪播效果跳轉到第一張圖重新開始
iNow=0;}
showNumber.eq(iNow).trigger("click");//模擬觸發數字按鈕的click
},2000);//2000為輪播的時間
}
autoplay();
slideShow.hover(function(){clearInterval(timer);},autoplay);另外注意setInterval的用法比較關鍵。
})
</script>
主體代碼：
[html]viewplainprint?
<body>
<divclass="slideShow">
<!--圖片布局開始-->
<ul>
<li><ahref="#"><imgsrc="images/view/111.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/112.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/113.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/114.jpg"/></a></li>
</ul>
<!--圖片布局結束-->
<!--按鈕布局開始-->
<divclass="showNav">
<spanclass="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按鈕布局結束-->
</div>
</body>
③ jquery裡面，或者HTML，HTML5，C#裡面如何實現下圖的圖片效果。滑動輪播類似的。 DW裡面添加代碼也行。
; (function ($) {
/* var i = 2;
$(document).ready(function () {
var arry = ['images/headback/001.jpg', 'images/headback/002.jpg', 'images/headback/003.jpg', 'images/headback/004.jpg', 'images/headback/005.jpg', 'images/headback/006.jpg', ]
setInterval(
function () {
$("#div_pic").css("backgroundImage", "url(" + arry[i] + ")");
i++;
if (i == 5) {
i = 0;
}
}
, 5000);
}); 定時換背景圖片的代碼 */
//下面是圖片切換代碼
/*
var t;
var speed = 2; //圖片切換速度
var nowlan = 0; //圖片開始時間
function changepic() {
var imglen = $("#div_pic").find("li").length;
$("#div_pic").find("li").hide();
$("#div_pic").find("li").eq(nowlan).show();
nowlan = nowlan + 1 == imglen ? 0 : nowlan + 1;
t = setTimeout("changepic()", speed * 1000);
}
onload = function () { changepic(); }
$(document).ready(function ()
//滑鼠在圖片上懸停讓切換暫停
$("#div_pic").hover(function () { clearInterval(t); });
//滑鼠離開圖片切換繼續
$("#div_pic").mouseleave(function () { changepic(); });
});
*/
//下面是圖片輪播代碼
/* var num = 0
$(function(){
$("#div_pic ol li").mouseover(function(e){
$(this).attr("class","current");
$(this).siblings().attr("class",""); //兄弟節點的class屬性設置為空
//alert($('ul').index())
num = $('ul').index() + 2
var index = $(this).index(); //記錄選定的li標簽在ul中的索引
//圖片會出現層疊現象為了顯示當前的圖片，把當前的圖片的z-index 值設置為大於其他的兄弟元素
$("#div_pic ul li").eq(index).css({"left":"650px","zIndex":num})
$("#div_pic ul li").eq(index).siblings().css("zIndex",num-1);
//動畫效果，圖片從右側飛入
$("#div_pic ul li").eq(index).animate({left:"0"},500)
});
}); */
//下面是可配置輪播動畫代碼
$.fn.slide=function(options){
var defaults= {
affect:1, //1：上下滾動; 2:幕布式; 3:左右滾動；4：淡入淡出
time: 5000, //間隔時間
speed:500, //動畫快慢
dot_text:true,//按鈕上有無序列號
};
var opts=$.extend(defaults,options);
var $this=$(this);
var ool=$("<div class='dot'><p></p></div>");
var $box=$this.find("ul");
var $li=$box.find("li");
var timer=null;
var num=0;
$this.append(ool);
$box.find("li").each(function(i){
ool.find("p").append($("<b></b>"));
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur");
switch(opts.affect){
case 1:
break;
case 2:
$box.find("li").css("display","none");
break;
case 3:
$box.css({"width":$li.eq(0).width()*$li.length});
$li.css("float","left");
break;
case 4:
$box.find("li").css("display","none");
break;
}
$box.find("li").eq(0).show(0);
ool.find("b").mouseover(function(){
num=$(this).index();
run ();
})
timer=setInterval(auto,opts.time);
function auto(){
num<$box.find("li").length-1?num++:num=0;
run();
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed);
break;
case 2:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
break;
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed);
break;
case 4:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
break;
}
}
$this.mouseover(function(){
clearInterval(timer);
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time);
})
}
}(jQuery));
④ JavaScript代碼實現圖片循環滾動效果
1.概述
循環滾動圖片，不僅可以增添Web頁面的動態效果，而且可以節省頁面空間，有效地保證在有限的頁面中顯示更多的圖片。
2.技術要點
主要應用setTimeout()方法實現圖片的循環滾動效果。setTimeout()方法的語法格式如下：
setTimeout（function,milliseconds,[arguments]）
參數說明：
a.
function：要調用的JavaScript自定義函數名稱。
b.
Milliseconds：設置超時時間（以毫秒為單位）。
功能：經過超時時間後，調用函數。此值可以用clearTimeout()函數清除。
3.具體實現
（1）在頁面的合適位置添加一個id屬性為demo的<div>標記，並在該標記中添加表格及要要滾動顯示的圖片。關鍵代碼如下：
<div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;">
<table
border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td
valign="top"
id="marquePic1">
<!--
要循環滾動的圖片
-->
<table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
>
<tr
align="center">
<%for(int
i=1;i<8;i++){%>
<td>
<img
src="Images/<%=i%>.jpg"
width="118"
height="166"
border="1">
</td>
<%}%>
</tr>
</table>
</td>
<td
id="marquePic2"
width="1"></td>
</tr>
</table>
</div>
（2）編寫自定義的JavaScript函數move()，用於實現無間斷的圖片循環滾動效果。speed數值越大圖片滾動的越快，具體代碼如下：
<script
language="javascript">
var
speed=30
;
//設置間隔時間
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//獲取demo對象
function
Marquee(n){
//實現圖片循環滾動的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滾動
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//繼續滾動
MyMar=setInterval("Marquee(5)",speed);
}
</script>
以上所述是小編給大家介紹的JavaScript代碼實現圖片循環滾動效果的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
⑤ jquery輪播圖最後一張圖片如何無縫輪播到第一張圖片（輪播順序應和前面一樣，即從左往右）,代碼如下：
$(document).ready(function(){
vartimer=null;
varpic=$(".pic");
varoUl=pic.children("ul");
varaImg=pic.find("img");
varimgWidth=parseFloat(pic.css("width"))||pic.prop("offsetWidth");
oUl.css("width",imgWidth*aImg.length+'px');
vari=0;
timer=setInterval(function(){
oUl.animate({
"left":"-"+imgWidth+'px'
},500,function(){
oUl.children("li:first").insertAfter(oUl.children("li:last"));
oUl.css("left",0);
});
},1000);
});⑥ Jquery圖片輪播循環問題，求大神指教，怎麼實現循環播放
//js
varisround="";
vari=0;
$(function(){
isround=setTimeout("change()",3000);
$("div[name=ban]divimg:eq(0)").show().siblings().hide();
$(".numli:eq(0)").addClass("current").siblings().removeClass("current");
$(".numli").click(function(){
i=$(".numli").index(this);
$(this).addClass("current").siblings().removeClass("current");
$("div[name=ban]divimg").eq($(".numli").index(this)).show().siblings().hide();
isround=setTimeout("change()",3000);
}).hover(function(){
clearTimeout(isround)
},function(){
isround=setTimeout("change()",3000);
})
})
functionchange(){
if(i==$(".numli").length)i=0;
$(".numli").eq(i).addClass("current").siblings().removeClass("current");
$("div[name=ban]divimg").eq(i).show().siblings().hide();
i++;
setTimeout("change()",3000);
}
//html
<divname="ban">
<div>
<!--圖片-->
<imgsrc="/resources/images/f1.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f2.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f1.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f2.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f1.jpg"width="369px"height="114px"/>
</div>
<divclass="numbox">
<!--選項-->
<ulclass="num">
<liclass="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
不懂再問，這是我自己寫的一個輪換，裡麵包括了點擊事件，原理是控制圖片的顯示隱藏，
別的有控制高度等等之類的 。