案例总结：基本的焦点轮播效果
HTML：
解析：javascript
一.样式要点
（1）父元素须要加上overflow:hidden;这样超出图片才能不显现
（2）父元素须要加上position:relative;图片列表加上position:absolute;让图片列表的定位基于父元素
（3）图片列表的z-index:1;箭头和按钮的z-index:2;这样箭头和按钮就会覆盖在图片列表上面
（4）箭头初始是不显示的，鼠标移进去，箭头才显示
/* 默认隐藏箭头 */ .arrow {display: none;} /* 鼠标移入轮播组件时，显示箭头 */ #container:hover .arrow { display: block;}
（5）鼠标移到箭头上透明度发生变化
.arrow { cursor: pointer; background-color: RGBA(0,0,0,.3); color: #fff;} .arrow:hover { background-color: RGBA(0,0,0,.7);}css
二．js分析
原理：
父元素设置overflow：hidden；让他超出部分隐藏，再经过设置图片列表的left值来显示对应位置的图片
无限滚动的技巧：滚动到最后1张图时，向后滚动，立马把图片列表拉回第一张图的位置，在第一张图往前滚，立马把图片列表拉回最后一张图的位置html
1．封装函数
这样的话，
document.getElementById('container');
就能够写成$('container');java
2.动态生成按钮圆点
3.左右箭头切换
思路：
1）向左，向右切换，每次的差值是一个图片的宽度，传参数为正负一个图片的宽度
功能类似，能够封装成一个函数
2.）问题是咱们怎么才能判断咱们当前的图片是第几张呢，咱们能够设定指针为当前图片current=1,左击当current=1时current=slideNum;不然current-1; 右击当current=slideNum时current=1;
jquery
3.无限滚动效果
原理：每次点击都要作个判断，把它拉到正确位置。
切换图片函数
思路：1.图片切换，好比从第一张切换到第二张，要把left值变为-初始left值一张图片的宽度，
思路：2.图片切换方向分为向左和向右，方向不一样符号相反,向右的话为负，向左的话为正;这样能够传入一个参数值
思路：3.向左，向右切换，每次的差值是一个图片的宽度，传参数为正负一个图片的宽度
思路：4.设定图片的列表的初始left值为0，而当图片在最后一张图片时向右切换，图片应该切换到第一张图片上，当图片在第一张图片时向左切换，图片应该切换到最后一张图片上，这是固定的，与传入的参数无关，咱们能够写在图片切换函数里，图片切换看的是位置的变化，判断位置临界点0和-listimgwidth(slideNum-1)，newleft>0,处于第一张图上，newleft<-listimgwidth(slideNum-1),处于最后一张图上
app
4.按钮高亮函数
（1） 须要提早设置按钮第一个圆点初始高亮，当前图片序号对应的小圆点高亮
（2） 对应的按钮圆点高亮以前，咱们须要把其余的按钮按钮圆点关掉
思路：经过一个for循环去查找lunbo_button下的按钮，将他的每个元素class为空
ide
5.按钮切换图片
思路：咱们以前箭头切换图片是一张一张的切换的，每一张图片都比前一张图片的偏移量加了一张图片的宽度，
咱们首先肯定的是知道当前高亮的图片的指针，点击按钮切换图片时咱们能够获取按钮的索引值，而后要计算偏移量（指针差*一张图片）
关键点：（1）获取按钮的索引值，切换图片以后不要忘了更新图片的当前指针
函数
6.自动循环播放
每一个3s切换一次：
能够设置个定时器，让它每隔3s运行下右箭头点击事件。
鼠标移到图片上，图片再也不自动轮播。鼠标从图片上移除，图片继续自动轮播。
写两个函数，运行定时器和清除定时器。
当鼠标移到图片上，清除定时器。
定时器函数。鼠标从图片上移除，运行定时器函数。
拓展：
问：
这两个截图的代码有什么区别？
第一张图的代码，onmouseover跟onmouseout函数均可以执行（onmouseout函数是图片自动轮播，onmouseover是鼠标放上去以后中止轮播。）；
第二张图的代码，图片能够自动轮播，可是鼠标放上去以后，图片没有中止轮播。
autoplay（）跟autoplay有什么区别？
答：
1）若是直接autoplay (); 像下图
表示的是当即执行，无论你前面的条件有没有被触发。
2）可是若是写成function () { autoplay ();}，
就表示，你前面的条件执行了， 就开始执行函数， 函数就是里面的autoplay ();
3） 只用autoplay，
相似指针，指向的是autoplay ();这个函数， 就是知足条件下会运行函数。动画
关键点：
把函数名写全了， 就变成了当即执行
条件式的， 前面都要加function(){你要加的函数}， 或者只写一个函数名， 后面不要括号（前提是， 你的函数里面没有参数）ui
讲到这里这个基本的轮播图就写得差很少了，若是想效果好一点，能够在轮播图的基础上加些效果。好比：淡入淡出效果，滑动动画效果，百叶窗效果，破碎玻璃等等.提示下：把这些效果作成函数，须要时直接调用函数会不会方便点…….
三.附录
附1(js代码）：
<script type="text/javascript">
//效果：左右图片切换，按钮高亮，点击按钮切换
window.onload = function () {
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
var container =$('container');
var list = $('list');
var listimg = $('list').getElementsByTagName('img');
var listimgwidth = listimg[0].offsetWidth;
var slideNum = listimg.length;
var prev = $('prev');
var next = $('next');
var current = 1; //当前图片指针（从1开始）
list.style.left=0;
//js动态添加按钮圆点
var dot=document.createElement("ul")
dot.setAttribute("id","lunbo_button");
dot.setAttribute("class","lunbo_button");
for(i=0;i<slideNum;i++){
var dotli=document.createElement("li");
//dotspan.innerText=i+1;//带数字的按钮
dot.appendChild(dotli);
}
container.appendChild(dot);
//图片高亮函数
var buttons= $('lunbo_button').getElementsByTagName('li');
buttons[0].className = 'on';
//小圆点高亮函数,须要注意的是咱们须要先取消全部按钮的高亮，再让当前图片序号对应的小圆点高亮
function showButton() {
for (var i = 0; i < slideNum ; i++) {
buttons[i].className = '';
}
buttons[current-1].className = 'on';
}
//思路：向左，向右切换，每次的差值是一个图片的宽度，传参数为正负一个图片的宽度
prev.onclick=function(){
if(current==1){//重要重要！！！！！判断语句里的等于要写成==
current=slideNum;
}
else{
current-=1;
}
showButton();
switchpic(+parseInt(listimgwidth));
}
//向右切换
next.onclick=function(){
if(current==slideNum){
current=1;
}
else{
current+=1;
}
showButton();
switchpic(-parseInt(listimgwidth));
}
//切换图片函数
function switchpic(offset){
var newleft=parseInt(list.style.left)+offset;
list.style.left=newleft+"px";
if(newleft>0){
list.style.left=-listimgwidth*(slideNum-1)+"px";
}
else if(newleft<-listimgwidth*(slideNum-1)){
list.style.left=0;
}
}
//按钮切换代码
for(i=0;i<slideNum;i++){
buttons[i].index = i;
buttons[i].onclick=function(){
if(this.className == 'on'){//按下的按钮高亮，代码不继续运行
return;
}
var j = this.index;
switchpic(-(j+1-current)*listimgwidth);
current=j+1;
showButton();//图片切换以后调用小圆点高亮函数
}
};
//自动循环播放代码
timer=0;
function autoplay(){
clearInterval(timer);//开定时器前先清除定时器
timer=setInterval(function(){
next.onclick();
},3000)
}
function stopplay(){
clearInterval(timer);
}
autoplay();
container.onmouseover=stopplay;
container.onmouseout=autoplay;
}
</script>
附2(同一思路的jquery代码）：
<script type="text/javascript">
$(document).ready(function(){
var container =$(".container");
var list = $(".list");
var listimg = $(".list").find("img");
var listimgwidth = listimg.eq(0).width();//获取轮播图片的宽度
var slideNum = listimg.length;
var prev = $(".prev");
var next = $(".next");
var current = 1;
list.css("left",0);
//jquery动态添加按钮圆点
var ulstart = '<ul class="lunbo_button">',
ulcontent = '',
ulend = '</ul>';
for(i=0;i<slideNum;i++){
ulcontent += '<li>' + '</li>';
//ulcontent += '<li>' + (i+1) + '</li>';//带数字的按钮
}
container.append(ulstart+ulcontent+ulend);
//图片高亮函数
var buttons= $(".lunbo_button").find("li");
buttons.eq(0).attr("class", "on");
function showButton() {
buttons.eq(current-1).addClass("on")
.siblings().removeClass("on");
}
//向左
prev.on("click", function() {
if(current==1){
current=slideNum;
}
else{
current-=1;
}
showButton();
switchpic(+parseInt(listimgwidth));
});
//思路：向右切换
next.on("click", function() {
if(current==slideNum){
current=1;
}
else{
current+=1;
}
showButton();
switchpic(-parseInt(listimgwidth));
});
//切换图片函数
function switchpic(offset){
var newleft=parseInt(list.css("left"))+offset;
list.css("left",newleft);
if(newleft>0){
list.css("left",-listimgwidth*(slideNum-1));
}
else if(newleft<-listimgwidth*(slideNum-1)){
list.css("left",0);
}
}
//按钮切换代码
buttons.each(function () {
$(this).on("click", function() {
var j = $(this).index();
switchpic(-(j+1-current)*listimgwidth);
current=j+1;
showButton();//图片切换以后调用小圆点高亮函数
});
});
//自动循环播放代码
timer=0;
function autoplay(){
clearInterval(timer);//开定时器前先清除定时器
timer=setInterval(function(){
next.trigger('click');//！！！！！注意此处写法
},3000)
}
function stopplay(){
clearInterval(timer);
}
autoplay();
container.hover(stopplay, autoplay);
});
</script>
备注知识点：
1）获取或设置元素的宽度
Js
某个元素的宽度：obj.offsetWidth;
某个元素的高度：obj.offsetHeight;
可是要注意的是offsetWidth;取得值是width + padding+border
Jquery
获取或设置元素的宽度：$(obj).width();
获取或设置元素的高度：$(obj).height();
获取或设置元素的宽度：$(obj).innerWidth();(width + padding)
获取或设置元素的高度：$(obj).innerHeight(); (height + padding)
获取或设置元素的宽度：$(obj).outerWidth();(width + padding + border)
获取或设置元素的高度：$(obj).outerHeight(); (height + padding + border)
获取或设置元素的宽度：$(obj).outerWidth(true); (width + padding + border + margin)
获取或设置元素的高度：$(obj).outerHeight(true); (height + padding + border + margin)
注意：可获取和设置元素的宽度和高度。获取时，返回number类型；设置时，给方法传入数值类型的参数便可。具体用法：
$(element).width(); //获取元素宽度 $(element).width(200); //设置元素宽度
innerWidth()、innerHight()方法：只能获取，不能设置。
可获取第一个匹配元素的内部宽度和高度，例如获取元素内部宽度时，包括width+padding,不包括border。
outerWidth()、outerHight()方法：只能获取，不能设置。
可获取第一个匹配元素的外部宽度和高度，有两种状况: （用获取元素外部宽度来举例）
一、当方法内部不指定参数或者参数为false时，包括width+padding+margin;
二、当方法内部参数为true时，包括width+padding+border+margin；
css()方法：既可获取，也可设置。
可 以获取和设置元素的宽高（固然也可获取和设置其余css属性，这里只是为了与其余几种设置获取元素宽高的方法作对比），当获取元素的宽高时，返回一个单位 为px的string字符串；当设置元素宽高时，给css()方法传入对象，对象里面包含width\height属性；具体用法：
$(element).css('width'); //获取元素宽度
$(element).css({width:'200px',height:'300px'});//设置元素的宽度和高度，也能够不要引号和单位
2）某个元素的上边界到body最顶部的距离
js
某个元素的上边界到body最顶部的距离： obj.offsetTop;(在元素的包含元素不含滚动条的状况下)
某个元素的左边界到body最左边的距离： obj.offsetLeft;(在元素的包含元素不含滚动条的状况下)
jquery
3）scrollLeft，scrollTop，scrollWidth ，scrollHeight
scrollLeft //元素最左端到窗口最左端的距离 scrollTop //元素最顶端到窗口最顶端的距离 scrollWidth //元素的滚动宽度 scrollHeight //元素的滚动高度
本文为原创，如需转载请注明转载地址，谢谢合做！
本文地址：http://www.cnblogs.com/wanghuih/p/6365085.html
- 1. 焦点轮播图效果实现
- 2. 实践 - 焦点轮播图效果
- 3. 关于焦点轮播图的总结
- 4. jQuery案例demo -- 轮播图效果
- 5. 【学习总结】js-轮播效果
- 6. 焦点轮播图
- 7. 基于jQuery的轮播焦点图图
- 8. 轮播效果
- 9. JS、JQ实现焦点图轮播效果
- 10. 案例总结：基本的选项卡效果
- 更多相关文章...
- • SVG 模糊效果 - SVG 教程
- • Lua 基本语法 - Lua 教程
- • Kotlin学习（二）基本类型
- • Kotlin学习（一）基本语法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 焦点轮播图效果实现
- 2. 实践 - 焦点轮播图效果
- 3. 关于焦点轮播图的总结
- 4. jQuery案例demo -- 轮播图效果
- 5. 【学习总结】js-轮播效果
- 6. 焦点轮播图
- 7. 基于jQuery的轮播焦点图图
- 8. 轮播效果
- 9. JS、JQ实现焦点图轮播效果
- 10. 案例总结：基本的选项卡效果