一.js实现
demo:http://jellyandjammy.sinaapp.com/imageChange/js.html
实现思路:
在一个div内放置五张图片,两张头尾图的附属图(这样可以无缝轮播),把div的宽度设为一张图片的大小。把其他的图片隐藏
在另一个div里放置五个span标签做成小按钮,再放置两个链接作为左右箭头。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image_change</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="container"> <!-- 放置图片 -->
<div id="list" style="left: -600px;">
<img src="images/5.jpg"> <!-- 第五张图的附属图 -->
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/1.jpg"> <!-- 第一张图的附属图 -->
</div>
<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>
</div> <!-- 放置左右两个箭头 -->
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
<!-- javascript:;让点击效果执行JavaScript空语句,防止A标签跳转。把a作为一个按钮使用,可以点击 但是不跳转页面而是做其他处理 -->
</div>
</body>
</html>
HTMl 代码
父容器设置为相对定位position:relative,放置图片,小按钮,箭头的子容器均设为绝对定位position:absolute,这样可以有z-index设置图层的顺序,图片z-index设为1作底层图片,小按钮和箭头的z-index设为2放置在底层图片上。
*{
margin: 0;
padding: 0;
text-decoration: none; /*把链接a的下划线去掉*/
}
body{
padding: 20px;
}
/*父容器*/
#container{
width: 600px;
height: 400px;
overflow: hidden; /* 只显示一张图片,其余的隐藏*/
border: 3px solid #333;
position: relative; /*父容器设置为相对定位*/
}
/*子容器放置图片*/
#list{
width: 4200px;
height: 400px;
position: absolute; /*子容器设置绝对定位*/
z-index: 1 /*作为底层图片*/
}
#list img{
float: left;
}
/*放置按钮的div*/
#buttons{
position: absolute;
bottom: 10px;
left: 250px;
width: 100px;
height: 10px;
z-index: 2;
}
/*按钮*/
#buttons span{
cursor: pointer; /* 箭头设为手指*/
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%; /*把span设为圆形*/
background-color: #333;
margin-right: 5px;
}
#buttons .on {
background-color: orange;
}
/*左右箭头*/
.arrow{
cursor: pointer;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: rgba(0,0,0,.3); /*设置背景色和透明度,最后一个参数为透明度*/
font-size: 36px;
font-weight: bold;
text-align: center;
line-height: 40px;
color: #fff;
display: none; /*隐藏*/
}
#container:hover .arrow{
display: block; /*鼠标划过父容器时显示箭头*/
}
.arrow:hover {
background-color: rgba(0,0,0,.7); /*设置背景色和透明度,最后一个参数为透明度,*/
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
css 代码
js先实现左右箭头点击切换图片功能,实现小按钮点击切换图片功能,用定时器实现自动轮播功能。调用函数实现鼠标在图片上就清除定时器,鼠标移出则开始定时器。
window.onload= function() { //window.onload是文档加载后再调用js代码
var container=document.getElementById("container");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").getElementsByTagName("span");//获取小按钮
var prev=document.getElementById("prev"); //前一个箭头
var next=document.getElementById("next"); //后一个箭头
var index=1; //第几个小按钮
var animated=false; //动画是否在运行
var timer;
//左右箭头切换图片
function animate(offset){
if (offset == 0) {
return;
}
animated=true;
var newLeft=parseInt(list.style.left)+offset; //新的图片位置等于现有图片位置加上偏移量
//图片切换的动态效果的变量定义
var time=300; //位移总时间
var intervar=10; //位移间隔
var speed=offset/(time/intervar); //位移偏移量
function go(){
if ((speed<0 && parseInt(list.style.left)>newLeft) || (speed>0 && parseInt(list.style.left)<newLeft)) {
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,intervar);
}
else{
animated=false;
list.style.left=newLeft+'px';
// 如果是第五张图片的附属图一的话就切换回第五张图片
if(newLeft > -600){
list.style.left= -3000 +'px';
}
// 如果是第一张图片的附属图五的话就切换回第一张图片
if(newLeft< -3000){
list.style.left= -600 +'px';
}
}
}
go();
}
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
//点击按钮时点亮按钮
function showButton(){
for(var i=0;i<buttons.length;i++){
if (buttons[i].className=='on'){
buttons[i].className = '';
}
}
buttons[index-1].className='on'; //数组是从0开始的
}
//右箭头点击事件
next.onclick= function () {
if (!animated) {
animate(-600);
}
if(index==5){
index=1;
}
else{
index+=1;
}
showButton();
}
//左箭头点击事件
prev.onclick= function () {
if (!animated) {
animate(600);
}
if(index==1){
index=5;
}
else{
index-=1;
}
showButton();
}
//遍历按钮,设置点击哪个按钮就切换到那张图片
for (var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
if (this.className=='on') { //优化代码,当点击的是当前的图片时就不用往下跑,节省资源
return;
}
var myIndex=parseInt(this.getAttribute('index'));
var offset=-600*(myIndex-index);
animate(offset);
index=myIndex;
showButton();
//debugger; //可设置断点
}
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
JS 代码
二.JQuery实现
$(function () {
var container = $('#container');
var list = $('#list');
var buttons = $('#buttons span');
var prev = $('#prev');
var next = $('#next');
var index = 1;
var len = 5;
var interval = 3000;
var timer;
function animate (offset) {
var left = parseInt(list.css('left')) + offset;
if (offset>0) {
offset = '+=' + offset;
}
else {
offset = '-=' + Math.abs(offset);
}
list.animate({'left': offset}, 300, function () {
if(left > -200){
list.css('left', -600 * len);
}
if(left < (-600 * len)) {
list.css('left', -600);
}
});
}
function showButton() {
buttons.eq(index-1).addClass('on').siblings().removeClass('on');
}
function play() {
timer = setTimeout(function () {
next.trigger('click');
play();
}, interval);
}
function stop() {
clearTimeout(timer);
}
next.bind('click', function () {
if (list.is(':animated')) {
return;
}
if (index == 5) {
index = 1;
}
else {
index += 1;
}
animate(-600);
showButton();
});
prev.bind('click', function () {
if (list.is(':animated')) {
return;
}
if (index == 1) {
index = 5;
}
else {
index -= 1;
}
animate(600);
showButton();
});
buttons.each(function () {
$(this).bind('click', function () {
if (list.is(':animated') || $(this).attr('class')=='on') {
return;
}
var myIndex = parseInt($(this).attr('index'));
var offset = -600 * (myIndex - index);
animate(offset);
index = myIndex;
showButton();
})
});
container.hover(stop, play);
play();
});
JQuery 代码
三.JS焦点图库 myFocus
demo:http://jellyandjammy.sinaapp.com/imageChange/myfocus.html
参考网站:http://www.chhua.com/myfocus/
实现思路:
下载并引入myFocus库文件;创建标准myFocus结构,如<div id="boxID">,<div class="pic">等
;调用设置myFocus参数。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image_change</title>
<link rel="stylesheet" type="text/css" href="js/mf-pattern/mF_fancy.css">
<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>
<script type="text/javascript" src="js/mf-pattern/mF_fancy.js"></script>
<script type="text/javascript">
myFocus.set({
id:'boxID',//焦点图盒子ID
pattern:'mF_fancy',//风格应用的名称
time:3,//切换时间间隔(秒)
trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
width:600,//设置图片区域宽度(像素)
height:400,//设置图片区域高度(像素)
txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏
});
</script>
</head>
<body>
<div id="boxID">
<div class="loading">请稍候,图片正在加载中...</div>
<div class="pic">
<ul>
<li><a href="#"><img src="images/1.jpg"></a></li>
<li><a href="#"><img src="images/2.jpg"></a></li>
<li><a href="#"><img src="images/3.jpg"></a></li>
<li><a href="#"><img src="images/4.jpg"></a></li>
<li><a href="#"><img src="images/5.jpg"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
View Code
注:当demo链接打不开时请复制网址到浏览器中打开