Share a relatively complete carousel picture written by native JS, with focus following, and entering the focus to switch the picture, click the arrow to switch the picture. It is a relatively complete carousel picture. The
first is the layout problem. Use one box to install all the pictures, use one UL LI contains six pictures. Use the determined positioning to position all the pictures to the left of the box. Then place the UL on the right side of the box. Cut one picture in from the right at a time, and cut the picture inside the box to the left at the same time. When the last picture is cut, the first picture is quickly pulled to the right side of the box, and then the picture is cut out. The first picture comes in. It keeps looping. Below is the layout.
<!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 style
*{
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;
}Finally, there is JS special effects
/*
Principle:
1. Create a focus map, which is the same as the number of pictures;
2. The position of all pictures: put them on the right side of the box, and the first picture will be displayed first
3. Focus follow, click The focus switches to the corresponding picture
. 4. The up and down buttons can switch to the corresponding picture.
5. The timer is on: automatic carousel (seamless), the mouse is stopped, and the mouse leaves to continue the carousel
*/
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();
}
}
}The following is the rendering of the operation
