jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）

用jQuery如何手写一个简单的轮播图？下面本篇文章通过代码示例来给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

用 jQuery 手写轮播图

先上个效果截图：

主要包含以下功能点：

* 1、页面加载完，自动循环翻页

* 2、翻页按钮，翻页

* 3、定点翻页

* 4、翻页时同步圆点状态

* 5、鼠标进入，停止自动翻页

* 6、快速点击翻页的bug(加 isPaging 标志)

主要包含以下功能点：

* 1、页面加载完，自动循环翻页

* 2、翻页按钮，翻页

* 3、定点翻页

* 4、翻页时同步圆点状态

* 5、鼠标进入，停止自动翻页

* 6、快速点击翻页的bug(加 isPaging 标志)

好了，直接上代码：

轮播图 - jQuery 版本

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

/**

* 轮播图布局样式

*/

/**

* 0、轮播图容器

*/

#container{

position: relative;

width: 600px;

height: 400px;

margin: 50px auto;

overflow: hidden;

}

/**

* 1、图片(模拟)

*/

ul#imgs{

position: absolute;

width: calc(600px * 7);

left: -600px;

}

ul#imgs li{

float: left;

width: 600px;

height: 400px;

background-color: #42B983;

color: white;

text-align: center;

line-height: 400px;

font-size: 100px;

}

#imgs li:nth-child(odd){

/* 模拟图片 */

/*background-color: #9ACD32;*/

}

/**

* 2、前后翻页按钮

*/

#prev,#next{

position: absolute;

top: calc(50% - 15px);;

width: 40px;

height: 30px;

background-color: yellow;

border: none;

font-weight: bold;

font-size: 16px;

cursor: pointer;

opacity: .6;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

#prev,#next:focus{

outline: none;

}

#prev{

left: 10px;

}

#next{

right: 10px;

}

/**

* 3、小圆点定点翻页

*/

ul#index{

position: absolute;

top: 360px;

left: calc(50% - 55px);

height: 12px;

}

ul#index li{

float: left;

height: 12px;

width: 12px;

margin: 0 5px;

border-radius:50%;

background-color: #800080;

opacity: .4;

cursor: pointer;

}

ul#index li.active{

opacity: 1;

}

• 5
• 1
• 2
• 3
• 4
• 5
• 1

<

>

/**

* 事件绑定

* 1、页面加载完，自动循环翻页

* 2、翻页按钮，翻页

* 3、定点翻页

* 4、翻页时同步圆点状态

* 5、鼠标进入，停止自动翻页

* 6、快速点击翻页的bug(加 isPaging 标志)

*/

/**

* 0、自动轮播

*/

/**

* 一些可以设置的参数

*/

var PAGE_WIDTH = 600,

PAGE_SLIDE_TIME = 600, //单页滑动时间

PAGE_INTERVAL = 1200 + PAGE_SLIDE_TIME, //换页间隔时间

curIndex = 1, //合法取值 1 ~ 5(0 表示左边假的，6表示右边假的)

isPaging = false //是否正在翻页(用来处理连续点击翻页产生的bug)

var intervalId;

$(function(){

intervalId = setInterval(next,PAGE_INTERVAL)

})

/**

* 1、页面按钮

*/

$("#next").click(function(){

next()

})

$("#prev").click(function(){

next(false)

})

$("#index li").click(function(){

next($(this).index() + 1)

})

/**

* 2、鼠标出入

*/

$("#container").hover(function(){

clearInterval(intervalId)

},function(){

intervalId = setInterval(next,PAGE_INTERVAL)

})

/**

* 翻页核心功能

* next(boolean|number])

*

* boolean: 表示前后翻页

* number: 表示定点翻页

*/

function next(flag=true){

if(isPaging){

return

}

isPaging = true;

var tempIndex = curIndex;

//1 确定要翻过去的页码,计算 left 值

typeof flag === "boolean" && (curIndex += flag ? 1 : -1)

typeof flag === "number" && (curIndex = flag)

left = - curIndex * PAGE_WIDTH

//2 执行翻页动画

$("#imgs").animate({"left":left},PAGE_SLIDE_TIME,function(){

if(curIndex == 0 || curIndex == 6){

//页码校正

curIndex == 0 && (curIndex = 5);

curIndex == 6 && (curIndex = 1)

left = - curIndex * PAGE_WIDTH

$("#imgs").css("left",left)

}

//清除正在翻页标志

isPaging = false

})

//3 同步点的状态

if(curIndex == 0 || curIndex == 6){

curIndex == 0 && updateIdxState(0,4);

curIndex == 6 && updateIdxState(4,0);

}else{

updateIdxState(tempIndex -1,curIndex -1)

}

function updateIdxState(oldIdx,newIdx){

$("#index li").eq(oldIdx).removeClass("active")

$("#index li").eq(newIdx).addClass("active")

}

}

更多web前端知识，请查阅 HTML中文网 ！！