要实现如下图的效果
点击可以选择图片；不点击的时候自动轮播；并且点击完后再次自动轮播。
思路：如同在房子里透过窗子看路过的火车一样，窗子是不动的，但火车是陆续经过窗子的，所以透过窗子可以看到依次看完所有的火车。
1. 让将图片排成一列“火车”：ul中li(li中放着轮播图片)漂浮起来后，就排列成一溜了
2. 要有一个“窗口”，把“火车”放到“窗口”里：设置div的固定长度，使它宽度等于ul中一个li的宽度
3. 让“火车”动起来：利用margin-left样式可以选择要在“窗口”显示的图片。
代码如下：
图片轮播效果.container{
width:100%;
margin:0 auto;
}
/* 轮播容器 */
.img_wrap{
width:440px;
height:440px;
margin:0 auto;
position:relative;
}
.img_wrap ul li{
float:left;
}
/* 轮播索引 */
.img_wrap .img_index{
position:absolute;
right:20px;
bottom:20px;
}
.img_wrap .img_index ul li{
width:16px;
height:16px;
background:gray;
border-radius:8px;
cursor:pointer;
margin-right:4px;
}
.img_wrap .img_index ul li.on{
background:#fd4b4b;
}
/* 轮播图片容器 */
.img_wrap .img_lunbo{
width:440px;
height:440px;
overflow:hidden;
}
window.onload = function(){
var currentIndex = 1; //当前索引
var time = 2000; //时间间隔
var length = 5; //几个索引
var timer = null; //定时器
indexBindClick();
//自动轮播
autoPlay();
//给索引绑定事件
function indexBindClick(){
var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li");
for(var i=0; i
lis[i].onclick = function(){
//换图片显示
currentIndex = getIndex(this);
clearInterval(timer);
showImg();
autoPlay();
};
}
}
function autoPlay(){
timer = setInterval(function(){
showImg();
currentIndex++;
},time);
}
//显示图片
function showImg(){
if(currentIndex >= 5){
currentIndex = 0;
}
//改变小图标样式
var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li");
for(var j=0; j
lis[j].className = "";
}
lis[currentIndex].className = "on";
//显示当前图片
var ul = document.getElementsByClassName("img_lunbo")[0].getElementsByTagName("ul")[0];
var li_width = ul.getElementsByTagName("li")[0].scrollWidth;
var marginLeft = -currentIndex * li_width;
ul.style.marginLeft = marginLeft + "px";
}
/* 获取对象在父节点中索引 */
function getIndex(obj){
var children = obj.parentNode.children;
for(var i=0; i
if(children[i] == obj){
return i;
}
}
}
};
reset.css初始化代码和图片要自己准备。
jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
Android使用ViewPager实现左右循环滑动及轮播效果
边界的时候会看到一个不能翻页的动画,可能影响用户体验.此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其 ...
JQuery实现图片轮播效果源码
======================整体结构========================
扫一扫
8690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
