javascriptは輪播図を実現します.
38705 ワード
1.まず一番簡単な画像切り替え効果です.実現方法:すべての画像を一つの配列に入れ、数秒後に次の写真に切り替えます.最後の枚になったら、最初の表示に切り替えます.は、下から上へのシームレスなシームレスなシームレスなシームレスなシームレスなシーリング効果を実現する.実装方法:2つのdiv(div 1,div 2)を定義し、同じ画像を入れる.下から上にスクロールして、最初のdiv 1の下にスクロールすると、最初のdiv 1の上の画像に切り替わります.div 2とdiv 1は内容が同じなので、div 2の1枚目を表示するときはdiv 1の1枚目に切り替えて、シームレスなシームレスなシームレスなシームレスなシームレスなシームレスな放送を実現しました. 左にシームレスなシームレスなシームレスなシームレスなルーニーの実現方法:ピクチャの順番は3 1、2、3、1の順で左に第2のピクチャ、すなわち番号は1のピクチャをローミングしてから移動を開始します.4枚目のピクチャに移動すると(すなわち番号は3)のピクチャが表示され、最後のピクチャ1が表示される.つまり、2番目の1ピクチャに移動するとき、1番目の1ピクチャにジャンプします.このようにして左シームレスなシームレスなシームレスなエフェクトを実現しました. 右シームレス・シームレス・シームレス・シームレス・ルーニーの実現方法:左シームレス・ルーニーと速度と切替の条件を変更すれば良い. ボタンは左か右かを選択して、マウスが通過したら移動を停止します.マウスを移動します.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> title>
<script type="text/javascript">
var num = 0;
var time= 1000;/* */
var arr=new Array();
arr[0]="imgs/1.jpg";
arr[1]="imgs/2.jpg";
arr[2]="imgs/3.jpg";
setInterval(showPic,time);
function showPic() {
var imgs = document.getElementById("pic");
if (num == arr.length-1) {
num = 0; /* ， */
} else {
num= num+1; /* ， */
}
imgs.src = arr[num];
}
script>
head>
<body>
<img id= "pic" src="imgs/1.jpg" />
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> title>
head>
<body>
<div id="colee" style="overflow:hidden;height:200px;width:300px;">
<div id="colee1">
<p><img src="imgs/1.jpg">p>
<p><img src="imgs/2.jpg">p>
<p><img src="imgs/3.jpg">p>
<p><img src="imgs/4.jpg">p>
div>
<div id="colee2">div>
div>
<style type="text/css">
#colee p{
display:inline;
}
#colee1 #colee2{
display:inline;
}
style>
<script>
var speed=30;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; // colee1 colee2
function Marquee1(){
// colee1 colee2
// colee1 colee2
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//
//
colee.onmouseover=function() {
clearInterval(MyMar1)}
//
colee.onmouseout=function(){
MyMar1=setInterval(Marquee1,speed)}
script>
<html>
<head>
<meta charset="gb2312">
<title> title>
<style>
* {
margin: 0px;
padding: 0px;
}
#container{
width: 300px;
height: 200px;
margin: 10px auto;
overflow: hidden;
position: relative;
}
#list {
list-style-type: none;
width: 10000px;
overflow: hidden;
position: absolute;
left: -300px;
}
li {
float: left;
}
li,img {
width: 300px;
height: 200px;
}
style>
<script>
window.onload=function() {
var list = document.getElementById("list");
var liList = document.getElementsByTagName("li"); //
var len = liList.length; //
var liwidth = liList[0].clientWidth; //
var totalWidth = (len - 1) * liwidth * (-1); //
var varyLeft = list.offsetLeft; //ul left
var speed = 3; //
function move() {
if (varyLeft < totalWidth) {
// ， a， a a'
list.style.left = "-300px";
varyLeft = -300;
}
varyLeft -= speed;//
list.style.left = varyLeft + "px";
}
var timer = setInterval(move, 30);// 40
}
script>
head>
<body>
<div id="container">
<ul id="list">
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg"/> li>
<li><img src="imgs/2.jpg"/>li>
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg"/> li>
ul>
div>
body>
html>
<html>
<head>
<meta charset="gb2312">
<title> title>
<style>
* {
margin: 0px;
padding: 0px;
}
#container{
width: 300px;
height: 200px;
margin: 10px auto;
overflow: hidden;
position: relative;
}
#list {
list-style-type: none;
width: 10000px;
overflow: hidden;
position: absolute;
left: -300px;
}
li {
float: left;
}
li,img {
width: 300px;
height: 200px;
}
style>
<script>
window.onload=function() {
var list = document.getElementById("list");
var liList = document.getElementsByTagName("li"); //
var len = liList.length; //
var liwidth = liList[0].clientWidth; //
var totalWidth = (len - 1) * liwidth * (-1); //
var varyLeft = list.offsetLeft; //ul left
var speed = -3; //
function move() {
if (varyLeft>-300) {
// ， a， a a'
list.style.left = "-1200px";
varyLeft = -1200;
}
varyLeft -= speed;//
list.style.left = varyLeft + "px";
}
var timer = setInterval(move, 30);// 40
}
script>
head>
<body>
<div id="container">
<ul id="list">
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg"/> li>
<li><img src="imgs/2.jpg"/>li>
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg"/> li>
ul>
div>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> title>
<style type="text/css">
/* */
*{
margin:0;
padding:0;
}
/* ， ， */
#mainbox{
width:300px;
height:200px;
overflow:hidden;
position:relative;
margin:10px auto;
}
#piclist{
list-style:none;
width:10000px;
height:200px;
overflow:hidden;
position:absolute;
left:-300px;
}
/* */
li{
float:left;
}
li,img{
width:300px;
height:200px;
}
/* */
#anniu{
width:120px;
position:relative;
margin:0 auto;
}
/* */
input{
width:50px;
height:20px;
background-color:#99FF66;
}
style>
<script>
window.onload=function(){
var picList=document.getElementById("piclist");//
var liList=document.getElementsByTagName("li");//
var picWidth=liList[0].clientWidth;//
var len=liList.length;//
var moveWidth=(len-1)*picWidth*(-1);//
var moveLeft=picList.offsetLeft;//
var speed=3;//
var btn=document.getElementsByTagName("input");//
btn[0].onclick = function(){
//
speed = 3;
};
btn[1].onclick = function(){
speed = -3;
};
timeer=setInterval(function (){
//
if(moveLeft"-300px" ; // ， 3` 1 2 3 1` 1` ， 1
moveLeft=-300;
}
if(moveLeft>-300){
picList.style.left="-1200px";// ， 3` ， 3
moveLeft=-1200;
}
moveLeft=moveLeft-speed; //
picList.style.left=moveLeft+"px";
},30);
picList.onmouseover = function(){
// ，
clearInterval(timeer);
};
picList.onmouseout = function(){
// ，
timeer=setInterval(function (){
if(moveLeft"-300px" ;
moveLeft=-300;
}
if(moveLeft>-300){
picList.style.left="-1200px";
moveLeft=-1200;
}
moveLeft=moveLeft-speed;
picList.style.left=moveLeft+"px";
},30);
};
}
script>
head>
<body>
<div id="mainbox">
<ul id="piclist">
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg" />li>
<li><img src="imgs/2.jpg" />li>
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg" />li>
ul>
div>
<div id="anniu">
<form>
<input type="button" value="left"/>
<input type="button" value="right"/>
form>
div>
body>
html>