ネイティブJSによって書かれた比較的完全なカルーセル画像を共有し、フォーカスを追跡し、フォーカスを入力して画像を切り替え、矢印をクリックして画像を切り替えます。これは比較的完全なカルーセル画像です
。1つ目はレイアウトの問題です。1つのボックスを使用してすべての画像をインストールし、1つ使用してくださいUL LIには6つの画像が含まれています。決められた配置を使用して、すべての画像をボックスの左側に配置します。次に、ULをボックスの右側に配置します。画像を右から1つずつ切り取り、ボックス内の画像を同時に左に切り取ります。最後の画像がカットされると、最初の画像がボックスの右側にすばやく引っ張られてから、画像が切り取られます。最初の画像が入ります。ループし続けます。以下はレイアウトです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/轮播图.css"/>
</head>
<body>
<div id="box">
<ul id="imglist">
<li><a href="#"><img src="img/1.jpg"/></a></li>
<li><a href="#"><img src="img/2.jpg"/></a></li>
<li><a href="#"><img src="img/3.jpg"/></a></li>
<li><a href="#"><img src="img/4.jpg"/></a></li>
<li><a href="#"><img src="img/5.jpg"/></a></li>
<li><a href="#"><img src="img/6.jpg"/></a></li>
</ul>
<div id="btn">
<p id="left"></p>
<p id="right"></p>
</div>
<div id="sprilt">
<p id="num">
<!--<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</p>-->
</div>
</div>
</body>
<script src="js/myjquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/轮播图.js" type="text/javascript" charset="utf-8"></script>
</html>CSSスタイル
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#`box{
`
width:310px;
height:220px;
border: 1px solid #999;
margin: 50px auto;
position: relative;
cursor: pointer;
overflow: hidden;
}
#box #imglist li{
width:310px;
height:220px;
float:left;
position: absolute;
left:0;
top:0;
cursor: pointer;
}
#box #imglist li img{
width:310px;
height:220px;
cursor: pointer;
}
#btn{
width:100%;
height:36px;
/* background: red;*/
position: absolute;
left:50%;
margin-left: -155px;
top:50%;
margin-top: -18px;
display: none;
}
#btn #left{
width:20px;
height:36px;
position: absolute;
left:6px;
top:0;
background: url(../img/icon.png) no-repeat 0 0;
cursor: pointer;
}
#btn #right{
width:20px;
height:36px;
position: absolute;
right:6px;
top:0;
background: url(../img/icon.png) no-repeat -10px -44px;
cursor: pointer;
}
#sprilt{
width:100%;
height:18px;
/*background: #999999;*/
position: absolute;
left:0;
bottom:0;
}
#num{
width:132px;
height:18px;
margin: 0 auto;
background: #d8d8d8;
padding-left: 4px;
border-radius: 8px;
}
#sprilt span{
display: block;
width:18px;
height:18px;
line-height:18px;
text-align:center;
border-radius: 50%;
background:#999999;
float:left;
margin-right: 4px;
color:#FFFFFF;
cursor:pointer;
}
#sprilt span.active{
background:red;
}最後に、JSの特殊効果があります
/ *
原則：
1.画像の数と同じフォーカスマップを作成します;
2.すべての画像の位置：ボックスの右側に配置すると、最初の画像が最初に表示されます
3.フォーカスを追跡し、クリックしますフォーカスが対応する画像に切り替わり
ます。4.上ボタンと下ボタンで対応する画像に切り替えることができます
5.タイマーがオンになっています：自動カルーセル（シームレス）、マウスが停止し、マウスを離れるとカルーセルを続行します
* /
var oBox = getid('box');
var oImglist = getid('imglist');
var aLis = oImglist.getElementsByTagName('li');
var oLeft = getid('left');
var oRight = getid('right');
var oNum = getid('num');
var aSpans = oNum.getElementsByTagName('span');
var scrollW=aLis[0].offsetWidth;
var oBtn = getid('btn');
//将所有图片置于可视区右边,并将第一张图片放到可视区中
for(var i = 0; i < aLis.length; i++) {
css(aLis[i], 'left', aLis[0].offsetWidth + 'px');
}
aLis[0].style.left = 0;
//创键焦点
function creatSpan() {
var html = '';
for(var i = 0; i < aLis.length; i++) {
html += '<span>' + (i + 1) + '</span>';
}
oNum.innerHTML = html;
aSpans[0].className = 'active';
}
creatSpan();
//开启定时器进行轮播
var timer = null;
clearInterval(timer);
timer = setInterval(autoPlay, 2000);
var num=0;//轮播图片当前的下标
//正常情况(往右轮播)
function autoPlay() {
//将旧的图片移出可视区
startMove(aLis[num],{
'left':-scrollW});
//判断是都到达最后一张图片
num=++num>aLis.length-1?0:num;//
//将图片快速扯到可视区右边
css(aLis[num],'left',scrollW+'px');
//将新的图片移入,即从右往左移入就是left从scrollW变为0进入到可视区位置
startMove(aLis[num],{
'left':0});
// console.log('ok');
light();
}
//切换上一张图片
function prev() {
//将旧的图片往右移出可视区
startMove(aLis[num],{
'left':scrollW});
//判断是都到达第一张图片
num=--num<0?aLis.length-1:num;
css(aLis[num],'left',-scrollW+'px');
//将新的图片移入
startMove(aLis[num],{
'left':0});
// console.log('ok');
light();
}
//将焦点变为高亮,并且跟随图片
function light(){
for(var i = 0; i < aSpans.length; i++) {
aSpans[i].className='';
}
aSpans[num].className='active';
}
//鼠标经过停止轮播
oBox.onmouseenter=function(){
clearInterval(timer);
css(oBtn,'display','block');
}
oBox.onmouseleave=function(){
clearInterval(timer);
timer=setInterval(autoPlay, 2000);
css(oBtn,'display','none');
}
//箭头控制轮播
//控制点击箭头的时间间隔
var oldtime=new Date();
oLeft.onclick=function(){
//符合每两次点击时间超过半秒,否则点击作废
if(new Date()-oldtime>500){
prev();
oldtime=new Date();//重新将最新时间赋予它
}
}
oRight.onclick=function(){
//符合每两次点击时间超过半秒,否则点击作废
if(new Date()-oldtime>500){
autoPlay();
oldtime=new Date();//重新将最新时间赋予它
}
}
//鼠标移到哪个焦点就显示对应的图片
for(var i=0;i<aSpans.length;i++){
aSpans[i].index=i;//当前触摸到的焦点位置
aSpans[i].onmouseenter=function(){
var index=this.index;
if(index>num){
//当前焦点位置跟当前轮播图片位置比较
//从右边切进来
//将焦点位置图片快速放到可视区右边
css(aLis[index],'left',scrollW+'px');
//将当前轮播的图片往左边移出可视区
startMove(aLis[num],{
'left':-scrollW});
//将新的图片移入
startMove(aLis[index],{
'left':0});
// console.log('ok');
num=index;
light();
}
if(index<num){
//当前焦点位置跟当前轮播图片位置比较
//从左边切进来
//将焦点位置图片快速放到可视区左边
css(aLis[index],'left',-scrollW+'px');
//将当前轮播的图片往右边移出可视区
startMove(aLis[num],{
'left':scrollW});
//将新的图片移入
startMove(aLis[index],{
'left':0});
// console.log('ok');
num=index;
light();
}
}
}以下は操作のレンダリングです
