求教1个html，ul问题一个js图片轮播问题。在线等急。。。
[问题点数：30分，结帖人legendnan]
本版专家分：10
结帖率 100%
CSDN今日推荐
本版专家分：30
本版专家分：0
本版专家分：2740
匿名用户不能发表回复！
其他相关推荐网友原创分享HTML5+3D效果的图片幻灯片焦点图切换特效，此特效需要浏览器支持HTML5，否则特效无法达到效果， 非常炫的3D切换特效，值得去学习并使用。…
网友原创分享一款超酷的JS图片轮播焦点图切换特效代码，带多种效果可以定制使用，可自动播放也可暂停。 调用方法： jQuery(document).ready(function($) { $(.slider2).slideshow({ width : 900, height : 325, transition : square });…
非常漂亮超酷带略缩图的仿淘宝商城图片轮播焦点图切换jQuery特效，效果非常漂亮，带动画效果，切换非常流畅， 代码非常简单，基本应该都能看懂。…
网友原创JS焦点图片轮播渐变切换特效插件,此插件带有很强大的参数定制功能，随意进行定制，并有多种效果可以选择， 代码兼容IE,FIREFOX,CHROME。 配置configure全部配置默认值说明delay:3000图片停留时间fadeOutTime:800图片淡出时间(ms)f…
网友分享带缩略图JS图片轮播特效jQuery图片切换特效，右侧缩略图加标题，左侧则显示具体摘要内容，此代码有个Bug,在如果摘要文字不多的时候， 背景显示不正常，大家可以自行改下。…
仿腾讯视频网站图片幻灯片JS焦点图切换特效代码,带缩略图功能和左右切换按钮，是比较大气的类型，原生JS编写，很多网站可以拿来用到。…
非常漂亮并功能强大的jquery焦点图切换特效代码，绝对实用，并且支持功能的定制，界面非常简洁大方，值得学习并应用。 参数定制： !--//--![CDaTa[//!-- var sp = new ScrollPic(); sp.scrollContId = FS_Cont_01; //内容容器ID sp.arrLeftId = FS_arr_left_0…
非常帅气的一款多功能的JS幻灯片动画焦点图切换特效，带有多种切换动画效果，非常实用，兼容IE,FIREFOX,CHROME， 动画效果是采用的jquery.easing.1.3.js，大家可以学习学习。…
网友分享原创层叠焦点图播放jcImgScroll特效插件，不仅漂亮，效果非常不错，带有多种定制样式，可随意切换，兼容IE,FIREFOX,CHROME。 * 插件说明 及 相关参数jQuery - jcImgScroll v 1.4Copyright(c) 2012 by Adam speed:400, //图片切换速度设置，提供…
jQuery实现背景图片全屏焦点图轮播切换特效，非常漂亮的全屏焦点图切换效果，不过有一点可能不足地方， 就是切换按钮需要改下，改的更清晰些更大些。…为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
如何用原生JS实现图片轮播
图片轮播大多应用在商品展示中。
实现方法:主要通过原生javascript编写。
实现原理：
上图中看到中间的图片就是要展示的图片，只要将所有图片并排放到一个div中然后再放到展示固定大少的窗口当中，让带所有图片的div左右来回切换达到图片滑动
然后再给展示窗口的div设置overflow:只显示窗口的一张图片，把左右两边的都隐藏起来。
先设置HTML和CSS样式
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&大图滚动&/title&
&style type="text/css"&
padding:0;
.clear:after{
visibility:
content:"";
width: 510
height:286
background:
width: 1000%;
height:100%;
#inner img{
width:10%;
height:100%;
.paganation{
width: 100%;
text-align:
.paganation span{
padding:5px 8
background: #F2F2F2;
border-radius:50%;
cursor: pointer
.paganation .selected{
background:
height: 286
line-height: 286
text-align:
.arrow:hover{
background: rgba(0,0,0,0.5);
&div id="wrap"&&!-- 图片展示区 --&
&div id="inner" class="clear"&&!-- 所有图片并排的块 --&
&img src="img/1.jpg" alt=""&
&img src="img/2.jpg" alt=""&
&img src="img/3.jpg" alt=""&
&img src="img/4.jpg" alt=""&
&img src="img/5.jpg" alt=""&
&img src="img/6.jpg" alt=""&
&img src="img/7.jpg" alt=""&
&img src="img/8.jpg" alt=""&
&img src="img/1.jpg" alt=""&
&div class="paganation" id="paganation"&&!-- 页面按钮区域 --&
&span class ="selected"&1&/span&
&span&2&/span&
&span&3&/span&
&span&4&/span&
&span&5&/span&
&span&6&/span&
&span&7&/span&
&span&8&/span&
&div id="left" class="arrow"&&&/div&&!-- 向左切换按钮 --&
&div id="right" class="arrow"&&&/div&&!-- 向右切换按钮 --&
&script type="text/javascript" src="tween.js"&&/script&
&script type="text/javascript"&
然后开始写JS代码
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&大图滚动&/title&
&style type="text/css"&
padding:0;
.clear:after{
visibility:
content:"";
width: 510
height:286
background:
width: 1000%;
height:100%;
#inner img{
width:10%;
height:100%;
.paganation{
width: 100%;
text-align:
.paganation span{
padding:5px 8
background: #F2F2F2;
border-radius:50%;
cursor: pointer
.paganation .selected{
background:
height: 286
line-height: 286
text-align:
.arrow:hover{
background: rgba(0,0,0,0.5);
&div id="wrap"&&!-- 图片展示区 --&
&div id="inner" class="clear"&&!-- 所有图片并排的块 --&
&img style="background:" src="img/1.jpg" alt=""&
&img style="background:" src="img/2.jpg" alt=""&
&img style="background:" src="img/3.jpg" alt=""&
&img style="background:" src="img/4.jpg" alt=""&
&img style="background:" src="img/5.jpg" alt=""&
&img style="background:" src="img/6.jpg" alt=""&
&img style="background:" src="img/7.jpg" alt=""&
&img style="background:" src="img/8.jpg" alt=""&
&img style="background:" src="img/1.jpg" alt=""&
&div class="paganation" id="paganation"&&!-- 页面按钮区域 --&
&span class ="selected"&1&/span&
&span&2&/span&
&span&3&/span&
&span&4&/span&
&span&5&/span&
&span&6&/span&
&span&7&/span&
&span&8&/span&
&div id="left" class="arrow"&&&/div&&!-- 向左切换按钮 --&
&div id="right" class="arrow"&&&/div&&!-- 向右切换按钮 --&
&script type="text/javascript"&
var wrap=document.getElementById("wrap");
var inner=document.getElementById("inner");
var spanList=document.getElementById("paganation").getElementsByTagName("span");
var left=document.getElementById("left");
var right=document.getElementById("right");
var clickFlag=//设置左右切换标记位防止连续按
var time//主要用来设置自动滑动的计时器
var index=0;//记录每次滑动图片的下标
var Distance=wrap.offsetW//获取展示区的宽度，即每张图片的宽度
//定义图片滑动的函数
function AutoGo(){
var start=inner.offsetL//获取移动块当前的left的开始坐标
var end=index*Distance*(-1);//获取移动块移动结束的坐标。
//计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。
var change=end-//偏移量
//用计时器为图片添加动画效果
var maxT=30;
clear();//先把按钮状态清除,再让对应按钮改变状态
if(index==spanList.length){
spanList[0].className="selected";
spanList[index].className="selected";
clearInterval(timer);//开启计时器前先把之前的清
timer=setInterval(function(){
if(t&=maxT){//当图片到达终点停止计时器
clearInterval(timer);
clickFlag=//当图片到达终点才能切换
inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动
if(index==spanList.length&&t&=maxT){
inner.style.left=0;
//当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
//编写图片向右滑动的函数
function forward(){
//当图片下标到最后一张把小标换0
if(index&spanList.length){
//编写图片向左滑动函数
function backward(){
//当图片下标到第一张让它返回到倒数第二张，
//left值要变到最后一张才不影响过渡效果
if(index&0){
index=spanList.length-1;
inner.style.left=(index+1)*Distance*(-1)+"px";
//开启图片自动向右滑动的计时器
time=setInterval(forward,3000);
//设置鼠标悬停动画停止
wrap.onmouseover=function(){
clearInterval(time);
wrap.onmouseout=function(){
time=setInterval(forward,3000);
//遍历每个按钮让其切换到对应图片
for(var i=0;i&spanList.i++){
spanList[i].=function(){
index=this.innerText-1;
//左切换事件
left.=function(){
if(clickFlag){
backward();
clickFlag=
//右切换事件
right.=function(){
if(clickFlag){
forward();
clickFlag=
//清除页面所有按钮状态颜色
function clear(){
for(var i=0;i&spanList.i++){
spanList[i].className="";
本文原创发布于慕课网 ，转载请注明出处，谢谢合作
若觉得本文不错，就分享一下吧！
评论加载中...
相关文章推荐
正在加载中6.9k 次阅读
html结构层
&div class="index-banner" id="banner"&
&div class="banner-list" id="banner_list" style="left:-1610"&
&a href="http://www.icourse163.org/" class="banner3" target="_blank"&&/a&
&a href="http://open.163.com/" class="banner1" target="_blank"&&/a&
&a href="http://study.163.com/" class="banner2" target="_blank" &&/a&
&a href="http://www.icourse163.org/" class="banner3" target="_blank"&&/a&
&a href="http://open.163.com/" class="banner1" target="_blank"&&/a&
&div class="slide" id="slideBtn"&
&span index="1" class="active"&&/span&
&span index="2"&&/span&
&span index="3"&&/span&
&a href="javascript:;" id="prev" class="arrow"&&&/a&
&a href="javascript:;" id="next" class="arrow"&&&/a&
.index-banner
width:1610
height: 461
.index-banner .banner-list{
width:8050
height: 461
z-index: 1;
.index-banner .banner-list a{
width:1610
height:461
background: url("../images/banner1.jpg") no-
background: url("../images/banner2.jpg") no-
background: url("../images/banner3.jpg") no-
.index-banner .slide{
z-index: 2;
margin-left:-5
bottom: 20
.index-banner .slide span{
display: inline-
margin-right: 10
height: 10
border-radius: 50%;
background-color: #
.index-banner .slide .active{
background-color: #000;
z-index: 2;
line-height: 70
text-align:
vertical-align:
font-size: 35
font-weight:
height: 70
background-color: RGBA(0,0,0,.3);
.arrow:hover { background-color: RGBA(0,0,0,.7);}
.index-banner:hover .arrow { display:}
#prev { left: 20}
#next { right: 20}
JS实现原理：通过改变图片的偏移量来实现图片的切换实现步骤：1、通过documnet.getElementById()获取页面需要操作的元素
window.onload=function(){
var banner=document.getElementById("banner");//获取轮播图父容器；
var list=document.getElementById("banner_list");//获取图片列表；
var buttons=document.getElementById("slideBtn").getElementsByTagName("span");//获取图片切换圆点按钮；
var pre=document.getElementById("prev");//获取向左切换箭头
var next=document.getElementById("next");//获取向右切换箭头；
2、实现左右箭头的切换：给左右箭头绑定点击事件；问题：在左右切换过程中会在图片切换完会显示空白？
解决方法：使用无限滚动的技巧，即实现循环无缝切换：
1)在页面图片列表的开始加上最后一张图片的附属图，在最后加上第一张图片的附属图2)每次切换时判断切换后的位置是否大于-1610px或是小于-4830px（即是否切换到附属图的位置）： 如果大于-1610px,就把图片重新定位到真正的最后一张图的位置：-4830
如果小于-4830px,就把图片重新定位到真正的第一张图的位置：-1610
var index=1;//用于存放当前要显示的图片，初始值为第一张图片
var animated=//优化动画执行效果，只有当前切换动画未执行时，才能被执行。解决当前动画执行未完成时，多次点击切换按钮导致的页面卡图现象，初始值为false
pre.onclick=function(){
//切换到当前图片左边的图片，如果当前是第一张，会切换到最后一张
if(index==1){
//否则会切换到前一张，即index-1
//每次点击时，判断animated为false时执行切换
if(!animated){
animate(1610);
//设置当前圆点按钮样式切换到选中状态，其他圆点为未选中状态
showBtn();
next.onclick=function(){
//切换到当前图片右边的图片，如果当前是最后一张，会切换到第一张
if(index==3){
//否则会切换到下一张，即index+1
//每次点击时，判断animated为false时执行动画
if(!animated){
animate(-1610);
//设置当前圆点按钮样式切换到选中状态，其他圆点为未选中状态
showBtn();
//将偏移的动作封装到函数animate()中
function animate(offset){
animated=//调用animate()切换时设置为
var newleft=parseInt(list.style.left)+//偏移之后的位置
var time=500;//位移总时间
var interval=10;//位移间隔时间
var speed=offset/(time/interval);//每次位移量 =总偏移量/次数
function go(){//递归，在函数内部调用自身实现入场图片500ms淡入的效果
//判断偏移量是否达到了目标值，如果没有，在原来的基础上继续移动
if((speed&0 && parseInt(list.style.left)&newleft)||(speed&0 && parseInt(list.style.left)&newleft)){
list.style.left=parseInt(list.style.left) + speed +'px';
//设置定时器，每隔interval的时间调用一下go()函数
//setTimeout()函数只会被执行一次
setTimeout(go,interval);
//如果达到了目标值，就将newleft值设置为目标值，
animated=//切换结束，设置为
//获取当前图片的left值：用list.style.left获取left的字符串，需要parseInt()函数将字符串转换为数值
list.style.left = newleft+'px';
//设置无缝切换
if( newleft & -1610 ){
list.style.left='-4830px';
if( newleft & -4830){
list.style.left='-1610px';
go();//调用animate()时执行go()函数
//将圆点按钮样式切换封装到showBtn()函数中
function showBtn(){
//遍历圆点按钮数组
for(var i=0;i&buttons.i++){
var button=buttons[i];
//取消之前按钮设置的active状态
if(button.className == 'active'){
button.className='';
//设置当前图片对应的圆点按钮状态为active
buttons[index-1].className='active';
3、实现圆点按钮点击切换：遍历底部圆点按钮数组，为每个按钮添加点击事件
for(var i=0;i&buttons.i++){
var button=buttons[i];
button.onclick=function(){
//程序优化：如果点击当前处于active状态的按钮，则不执行任何操作
if(this.className=='active'){
//当程序执行到这里时会退出当前函数，不会再执行后面的语句
//问题：如何在点击圆点按钮时，定位切换到对应的图片上？
//解决方法：获取html页面按钮上自定义的index属性值，通过该index值可以算出每次点击的按钮距之前按钮的偏移量，
var myIndex=parseInt(this.getAttribute('index'));//获取自定义的属性的值并转换为数字
var offset=-1610 * (myIndex-index);//算出偏移量
if(!animated){
animate(offset);//调用animate实现切换
index=myI//更新当前的index值
showBtn();//调用showBtn实现按钮的样式切换
4、实现图片自动切换：实现每5s切换图片，图片循环播放；
//设置自动播放的定时器
function play(){
//设置定时器，每隔5s点击右键头切换按钮
timer=setInterval(function(){
next.onclick();
function stop(){
//暂停自动播放
clearInterval(timer);
banner.onmouseover=//鼠标悬停某张图片，则暂停切换；
banner.onmouseout=//鼠标移除时，继续自动切换；
play();//初始化时执行自动播放
}//window.onload加载完成
使用jquery实现如下，思路不变：
$(function () {
var banner= $('#banner');
var list = $('#banner_list');
var buttons = $('#slideBtn span');
var prev = $('#prev');
var next = $('#next');
var index = 1;
var interval = 5000;
function animate (offset) {
var left = parseInt(list.css('left')) +
if (offset&0) {
offset = '+=' +
offset = '-=' + Math.abs(offset);
list.animate({'left': offset}, 500, function () {
if(left & -1610){
list.css('left',-4830);
if(left & 4830) {
list.css('left',-1610);
function showButton() {
buttons.eq(index-1).addClass('active').siblings().removeClass('active');
function play() {
timer = setTimeout(function () {
next.trigger('click');
}, interval);
function stop() {
clearTimeout(timer);
next.bind('click', function () {
if (list.is(':animated')) {
if (index == 3) {
index = 1;
index += 1;
animate(-1610);
showButton();
prev.bind('click', function () {
if (list.is(':animated')) {
if (index == 1) {
index = 3;
index -= 1;
animate(1610);
showButton();
buttons.each(function () {
$(this).bind('click', function () {
if (list.is(':animated') || $(this).attr('class')=='active') {
var myIndex = parseInt($(this).attr('index'));
var offset = -1610 * (myIndex - index);
animate(offset);
index = myI
showButton();
banner.hover(stop, play);
1 收藏&&|&&28
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。轮播，无论是文字轮播还是图片轮播，他们的原理是一样的，都是通过定时器执行循环展示和影藏。
一、手动轮播
一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。
如何利用css实现布局显示一张图片？主要的属性是over-follow:hidden。首先给容器一个固定的长和宽，然后设置over-flow:hidden。
1、html结构
&首先父容器container存放所有内容，子容器list存在图片。子容器buttons存放按钮小圆点。
&div id="container"&
&div id="list" style="left: -600"&
&img src="img/5.png" alt="1" /&
&img src="img/1.png" alt="1" /&
&img src="img/2.png" alt="2" /&
&img src="img/3.png" alt="3" /&
&img src="img/4.png" alt="4" /&
&img src="img/5.png" alt="5" /&
&img src="img/1.png" alt="5" /&
&div id="buttons"&
&span index="1" class="on"&&/span&
&span index="2"&&/span&
&span index="3"&&/span&
&span index="4"&&/span&
&span index="5"&&/span&
&a href="javascript:;" id="prev" class="arrow"&&&/a&
&a href="javascript:;" id="next" class="arrow"&&&/a&
优化，无缝滚动。
当你从最后一张图切换回第一张图时，有很大空白，利用两张辅助图来填补这个空白。
这里补充下无缝滚动，直接看代码，复制最后一张图片放置第一张图片前，同时复制第一张图片放置最后一张图片的后面。并且，将第一张图片辅助图（实际上是实际显示的第5张图片隐藏起来，故设置style="left: -600"）
2、css样式
1、对盒子模型，文档流的理解，绝对定位问题。
2、注意list的overflow:只显示窗口的一张图片，把左右两边的都隐藏起来。
3、确保buttons中每个span所在层置顶，将其设置为最顶端。
margin: 0;
padding: 0;
text-decoration: none;
padding: 20px;
#container {
position: relative;
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
position: absolute;
z-index: 1;
width: 4200px;
height: 400px;
#list img {
float: left;
width: 600px;
height: 400px;
#buttons {
position: absolute;
left: 250px;
bottom: 20px;
z-index: 2;
height: 10px;
width: 100px;
#buttons span {
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
cursor: pointer;
#buttons .on {
background: orangered;
position: absolute;
top: 180px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 35px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
#container:hover .arrow {
display: block;
left: 20px;
right: 20px;
首先我们先实现出手动点击左右两个箭头切换图片的效果：
window.onload = function() {
var list = document.getElementById('list');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
function animate(offset) {
//获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
//且style.left获取的是字符串，需要用parseInt()取整转化为数字。
var newLeft = parseInt(list.style.left) +
list.style.left = newLeft + 'px';
if(newLeft&-3000){
list.style.left = -600 + 'px';
if(newLeft&-600){
list.style.left = -3000 + 'px';
prev.onclick = function() {
animate(600);
next.onclick = function() {
animate(-600);
效果如下图所示
运行后我们会发现，一直点击右箭头 ，会出现空白，而且，不能回到第一张图片。要点击左箭头才能回到第一张图片。
&原因是我们利用偏移量left来获取图片，当看到left值小于3600时，因为没有第8张图片就出现空白，所以这里我们需要对偏移量做一个判断。
if(newLeft&-3000){
list.style.left = -600 + 'px';
if(newLeft&-600){
list.style.left = -3000 + 'px';
加了这个判断就是说，在实时的left值在小于-3000的时候，通过操作dom元素直接把left值给到-600，回到初始化的状态。
但是轮播有自动轮播和手动轮播。上面基本实现的是手动点击进行轮播（手动轮播）。
二、自动轮播
要实现自动，必须有定时器进行计时。
对于定时器，有必要说明一下setInterval()跟setTimeout的区别了。
简单来说，setInterval()执行多次，setTimeout()只执行一次。
所以自动轮播需要我们每隔一段时间执行一次，选择setInterval()函数。
/*自动循环播放*/
function play(){
timer = setInterval(function(){
prev.onclick();
完美实现了自动轮播
但是，当我们想仔细看某一张图片时候，要把图片停住，我们清楚定时器就可以
三、手动可以干预轮播
我想仔细看某一张照片时候，要图片停住，需要用到&这个方法。
这里，我们需要对其DOM操作，需要获取整个轮播图区域，鼠标进入到容器区域就清空计时器。
/*鼠标放上（离开）对应轮播暂停（播放）*/
var container = document.getElementById('container');
function stop() {
clearInterval(timer);
container.onmouseover =
container.onmouseout =
效果，如下图所示：
一个鼠标放上轮播暂停的实现就完美实现了。
现在回顾一下，的确很简单，不是很难，并不是必须要用插件实现，原生的js也可以实现，你可以优化一下封装成自己的轮播插件。
（1）容器的css布局。
（2）每一次轮播通过偏移量left实现，手动轮播的按钮绑定每一次偏移量增加还是减少一张照片宽度的偏移量。
（3）自动轮播，通过setInterval()方法实现定时器，执行下一张的点击函数
（4）鼠标控制轮播的暂停和继续。通过onmouseover为暂停，onmouseout为继续。
完整代码：
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&&/title&
&style type="text/css"&
margin: 0;
padding: 0;
text-decoration:
padding: 20
#container {
width: 600
height: 400
border: 3px solid #333;
z-index: 1;
width: 4200
height: 400
#list img {
width: 600
height: 400
#buttons {
bottom: 20
z-index: 2;
height: 10
width: 100
#buttons span {
margin-right: 5
height: 10
border: 1px solid #
border-radius: 50%;
background: #333;
#buttons .on {
background:
z-index: 2;
height: 40
font-size: 36
font-weight:
line-height: 35
text-align:
background-color: RGBA(0, 0, 0, .3);
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
#container:hover .arrow {
&div id="container"&
&div id="list" style="left: -600"&
&img src="img/5.png" alt="1" /&
&img src="img/1.png" alt="1" /&
&img src="img/2.png" alt="2" /&
&img src="img/3.png" alt="3" /&
&img src="img/4.png" alt="4" /&
&img src="img/5.png" alt="5" /&
&img src="img/1.png" alt="5" /&
&div id="buttons"&
&span index="1" class="on"&&/span&
&span index="2"&&/span&
&span index="3"&&/span&
&span index="4"&&/span&
&span index="5"&&/span&
&a href="javascript:;" id="prev" class="arrow"&&&/a&
&a href="javascript:;" id="next" class="arrow"&&&/a&
window.onload = function() {
var list = document.getElementById('list');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
function animate(offset) {
/*获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
且style.left获取的是字符串，需要用parseInt()取整转化为数字。*/
var newLeft = parseInt(list.style.left) +
list.style.left = newLeft + 'px';
if(newLeft & -3000) {
list.style.left = -600 + 'px';
if(newLeft & -600) {
list.style.left = -3000 + 'px';
/*上一步*/
prev.onclick = function() {
animate(600);
/*下一步*/
next.onclick = function() {
animate(-600);
/*自动循环播放*/
function play() {
timer = setInterval(function() {
prev.onclick();
/*鼠标放上（离开）对应轮播暂停（播放）*/
var container = document.getElementById('container');
function stop() {
clearInterval(timer);
container.onmouseover =
container.onmouseout =
四、小点也随着图片进行轮播
首先要能拿到有多少个小点的数组，然后每一次的下一步的时候判断一下当前的小圆点的标志位。
（1）当标志位大于数组的长度时候，需要把标志位赋值为初始值
/*上一步*/
prev.onclick = function() {
index = index -1;
if(index & 1) {
index = 5;
buttonShow();
animate(600);
/*下一步*/
next.onclick = function() {
index = index + 1;
if(index & 5) {
index = 1;
buttonShow();
animate(-600);
（2）每执行一次下一步，标志位temp+1，同时将圆点的上一个样式清除，下一个显示选中样式。
function buttonShow() {
/*console.log(buttons.length);*/
/*清除之前的样式*/
for(var i = 0; i & buttons. i++) {
if(buttons[i].className === 'on') {
buttons[i].className = '';
/*数组从0开始，temp从-1开始*/
buttons[index - 1].className = 'on';
最后效果如下图所示：
五、小点可以点击到对应的图片上
突然发现图片下边还有一堆小点，需要给增加点击事件，点击哪一个点，就到哪一张图片上。
/*小圆点的点击事件*/
for(var i =0;i&buttons.i++){
buttons[i].onclick = function (){
console.log(i);
/*偏移量的获取：获取鼠标的小圆点的位置，用this把index绑定到对象buttons[i]上*/
/*由于index是自定义属性，需要用到getAttribute()这个dom的2级方法，去获取自定义的index属性*/
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600*(index-clickIndex);
animate(offset);
index = clickI
buttonShow();
要大功告成了，但是发现控制台会发现打印出来的永远的是i=5。
& & & & & & & & & & & & & & & & & & & &&对javascript来说，由for语句创建的变量i即使在for循环执行结束后，也依旧会存在于循环外部的执行环境中。&
就是说，js没有块级作用域这东西，（可能我C写多了，混淆了）。在第一次循环（从 i=0 到 4 这一过程）结束后，最后的 i 获取到的为&buttons.length&的值被
保存在for循环之外，最后鼠标点击任何一个小圆点时，自然访问的一直是 i=5 了。
使用立即函数
/*小圆点的点击事件*/
for(var i = 0; i & buttons. i++) {
/*使用立即函数*/
(function(i) {
buttons[i].onclick = function() {
console.log(i);
/*偏移量的获取：获取鼠标的小圆点的位置，用this把index绑定到对象buttons[i]上*/
/*由于index是自定义属性，需要用到getAttribute()这个dom的2级方法，去获取自定义的index属性*/
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (index - clickIndex);
animate(offset);
index = clickI
buttonShow();
这里涉及到js的闭包问题。
完美原生js实现轮播，原理以及实践。总结一下：
原理：（1）使用的是css只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。
欢迎访问：
1、云商城isv系统
&2、云商城消费者门户
阅读(...) 评论()