靜態(tài)獲取圖片寫(xiě)法，給定圖片的個(gè)數(shù)，用js實(shí)現(xiàn)輪播圖自動(dòng)轉(zhuǎn)換。
公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出梓潼免費(fèi)做網(wǎng)站回饋大家。
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleDocument/title
!-- *******設(shè)置樣式********** --
style type="text/css"
.show_div{
width: 400px;
height: 400px;
margin: ?0 auto;
border: 2px solid block;
overflow: hidden;
}
.scroll_div{
width: 2000px;
height: 400px;
}
.scroll_div img{
width: 400px;
height: 400px;
float: left;
}
/style
!-- end --
/head
body
div class="show_div"
div class="scroll_div"
img src="img/b.jpg" alt=""
img src="img/c.jpg" alt=""
img src="img/d.jpg" alt=""
img src="img/a.jpg" alt=""
img src="img/b.jpg" alt=""
/div
/div
/body
!-- *********js代碼******** --
script type="text/javascript"
var scrollDiv = document.getElementsByClassName("scroll_div")[0];
// 定義初始值
var left =0;
// 定義一個(gè)定時(shí)器 走一步
function move(){
var timer = setInterval(function(){
left --;
if (left = -1600) {
left = 0;
}
if (left % -400 == 0) {
clearInterval(timer);
timer = null;
}
scrollDiv.style.marginLeft = left + "px";
},10);
}
// 定義一個(gè)定時(shí)器 每隔固定時(shí)間 走一張
setInterval(function(){
move();
},5000);
/script
/html
光是html的話(huà)很難實(shí)現(xiàn)輪播，輪播一般都是html+js才能完成。
給你一個(gè)最簡(jiǎn)單的html+js輪播例子：
html代碼：
div?class="side"?id?=?"lunbo"????
ul"????
liimg?src="../images/1.jpg"/li????
liimg?src="../images/2.jpg"/li????
liimg?src="../images/3.jpg"/li????
/ul????
/div
js代碼：
var?li=document.getElementById('lunbo').getElementsByTagName("li");??
var?num=0;??
var?len=li.length;??
setInterval(function(){??
li[num].style.display="none";??
num=++num==len?0:num;??
li[num].style.display="inline-block";??
},3000);//切換時(shí)間
1、首先我們創(chuàng)建一個(gè)簡(jiǎn)單的項(xiàng)目，如圖所示包括html，css和img三個(gè)。
2、這里是html文件，引入css和html代碼文件，如圖所示。
3、這里是css文件代碼，上面是div和圖片顯示的效果代碼，后面是動(dòng)畫(huà)效果。
4、這里是事件，這里定義了四個(gè)時(shí)間段的狀態(tài)，兼容了ie的。
5、如圖所示這里是效果圖，會(huì)根據(jù)時(shí)間輪播顯示下一張圖片 了。
!DOCTYPE?htmlhtml
head
meta?charset="utf-8"?/
title輪播圖/title
style?type="text/css"
*?{????????????????margin:?0px;????????????????padding:?0px;
}????????????#lunbotu?{????????????????width:?1226px;????????????????height:?460px;????????????????overflow:?hidden;????????????????position:?relative;????????????????margin:?0px?auto;????????????????position:?relative;
}????????????#banner?{????????????????height:?460px;????????????????width:?6130px;????????????????position:?absolute;????????????????transition:?2s;????????????????left:?0px;
}????????????#banner?img?{????????????????float:?left;
}????????????#biao?{????????????????position:?absolute;????????????????top:?430px;????????????????left:?43%;
}????????????#biao_1?{????????????????height:?20px;????????????????width:?20px;????????????????border:?1px?solid?#000;????????????????z-index:?10;????????????????float:?left;????????????????list-style:?none;????????????????border-radius:?50%;????????????????margin-left:?20px;????????????????text-align:?center;????????????????cursor:pointer;
}????????/style
/head
body
div?id="lunbotu"
div?id="banner"
img?class="m"?src="img/T1hiDvBvVv1RXrhCrK.jpg"?/
img?class="m"?src="img/T1jrxjB_VT1RXrhCrK.jpg"?/
img?class="m"?src="img/T1oTJjBKKT1RXrhCrK.jpg"?/
img?class="m"?src="img/T1RICjB7DT1RXrhCrK.jpg"?/
img?class="m"?src="img/T1vWdTBKDv1RXrhCrK.jpg"?/
/div
div?id="biao"
ul
li?id="biao_1"1/li
li?id="biao_1"2/li
li?id="biao_1"3/li
li?id="biao_1"4/li
li?id="biao_1"5/li
/ul
/div
/div
/body
script?type="text/javascript"
var?slid?=?document.getElementById("banner");????????//var?id?=?document.getElementById("bt");
var?imgwidth?=?document.getElementsByClassName("m");????????var?oli=document.getElementsByTagName("li");????????//console.log(oli);
//console.log(imgwidth?);
var?i?=0;
auto();
oli[0].style.cssText="background:#ff6700;color:#fff;";????????function?auto(){
time?=?setInterval(function(){
i++;????????????if(i?=?4)?{
slid.style.left?=?slid.offsetLeft?-?1226?+?"px";
oli[i].style.cssText="background:#ff6700;color:#fff;";
oli[i-1].style.cssText="background:none;color:#000;";
}?else?{
slid.style.left?="0px";
oli[4].style.cssText="background:none;color:#000;";
oli[0].style.cssText="background:#ff6700;color:#fff;";
i=0;
}????????????console.log(i);
},?3000)
}????????????for(var?j=0;j=4;j++){????????????????//console.log(imgwidth[j].index);
imgwidth[j].index=j;
oli[j].index=j;
oli[j].onmouseover=function(){????????????????this.style.cssText="background:#ff6700;color:#fff;"????
this.onmouseout=function(){????????????????????this.style.cssText="background:none;color:#000;"
}
}
oli[j].onclick=function(){
clearInterval(time);
m=this.index;
slid.style.left=-m*1226+"px";????
i=m;
auto();????????????????console.log(i);
}
}????
/script/html
; (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);
}); 定時(shí)換背景圖片的代碼 */
//下面是圖片切換代碼
/*
var t;
var speed = 2; //圖片切換速度
var nowlan = 0; //圖片開(kāi)始時(shí)間
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 ()
//鼠標(biāo)在圖片上懸停讓切換暫停
$("#div_pic").hover(function () { clearInterval(t); });
//鼠標(biāo)離開(kāi)圖片切換繼續(xù)
$("#div_pic").mouseleave(function () { changepic(); });
});
*/
//下面是圖片輪播代碼
/* var num = 0
$(function(){
$("#div_pic ol li").mouseover(function(e){
$(this).attr("class","current");
$(this).siblings().attr("class",""); //兄弟節(jié)點(diǎn)的class屬性設(shè)置為空
//alert($('ul').index())
num = $('ul').index() + 2
var index = $(this).index(); //記錄選定的li標(biāo)簽在ul中的索引
//圖片會(huì)出現(xiàn)層疊現(xiàn)象為了顯示當(dāng)前的圖片，把當(dāng)前的圖片的z-index 值設(shè)置為大于其他的兄弟元素
$("#div_pic ul li").eq(index).css({"left":"650px","zIndex":num})
$("#div_pic ul li").eq(index).siblings().css("zIndex",num-1);
//動(dòng)畫(huà)效果，圖片從右側(cè)飛入
$("#div_pic ul li").eq(index).animate({left:"0"},500)
});
}); */
//下面是可配置輪播動(dòng)畫(huà)代碼
$.fn.slide=function(options){
var defaults= {
affect:1, //1：上下滾動(dòng); 2:幕布式; 3:左右滾動(dòng)；4：淡入淡出
time: 5000, //間隔時(shí)間
speed:500, //動(dòng)畫(huà)快慢
dot_text:true,//按鈕上有無(wú)序列號(hào)
};
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));
重慶分公司
重慶分公司
