1.图片无缝滚动(原生JS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{box-sizing:border-box;}
body{margin: 0 auto;}
ul{margin:0;padding:0;}
li{list-style: none;
width: 250px;height: 300px;
float: left;}
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{*zoom:1}
.hide{width: 250px;height: 300px;
overflow: hidden;
margin: 50px auto;}
.hide ul{position: relative;}
</style>
</head>
<body>
<div class="hide">
<ul class="clearfix">
<li><img src="img/1.png" width="250" height="300"></li>
<li><img src="img/2.png" width="250" height="300"></li>
<li><img src="img/3.png" width="250" height="300"></li>
<li><img src="img/4.png" width="250" height="300"></li>
</ul>
</div>
<script src="jquery.min.js"></script>
<script>
$('li').clone().appendTo('.clearfix');//克隆
//$('ul').html($('ul').html()+$('ul').html());
$('ul').css('width',$('li').outerWidth()*$('li').length+'px');
//alert( $('ul').width());
var onOff=true;
var timer = null;
var nowLeft=0;
$('.hide').hover(function(){
onOff=false;
},function(){
onOff=true;
})
timer=setInterval(function(){
if(onOff){
nowLeft+=-5;
if(nowLeft<=-$('ul').outerWidth()/2){
nowLeft=0;
}
$('ul').css('left',nowLeft+'px');
}
},100);
</script>
</body>
</html>
2.图片转化
//图片转化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片转化</title>
<style type="text/css">
body{margin: 0;padding: 0;}
input{background: #FFFFFF;}
</style>
</head>
<body>
<img src="img/1.png" id="img1" width="390" height="490"><br/>
<input type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<input type="button" value="4"/>
<script>
var aBtn=document.getElementsByTagName('input');
var oImg=document.getElementById('img1');
var timer=null;
var iNum=0;
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].οnclick=function(){
oImg.src='img/'+(this.index+1)+'.png';
iNum=this.index;
fun0();
}
}
function change(){
if(iNum==aBtn.length-1){
iNum=0;
}else{
iNum++;
}
oImg.src='img/'+(iNum+1)+'.png';
fun0();
}
timer=setInterval(change,1000);
oImg.οnmοuseοver=function(){
clearInterval(timer);
};
oImg.οnmοuseοut=function(){
timer=setInterval(change,1000);
};
function fun0(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].style.background='white';
aBtn[iNum].style.background='red';
}
}
</script>
</body>
</html>
3.轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片滚动</title>
<style type="text/css">
*{box-sizing:border-box;}
body{margin: 0 auto;}
ul{margin:0;padding:0;}
li{list-style: none;
width: 250px;height: 300px;
float: left;}
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{*zoom:1}
.hide{width: 750px;height:300px;
overflow: hidden;
margin: 50px auto;
position: relative;}
.hide ul{position: relative;}
.left,.right{width: 30px;height: 50px;
background: #FFFFFF;opacity: 0.3;
font-size: 40px;
cursor: pointer;
text-align: center;line-height: 50px;
}
.right,.left:hover{opacity: 0.8;}
/*绝对定位 脱离文档流*/
.left{ position: absolute;left: 0;top:125px;}
.right{ position: absolute;right: 0;top:125px;}
</style>
</head>
<body>
<div class="hide">
<ul class="clearfix">
<li><img src="img/1.png" width="250" height="300"></li>
<li><img src="img/2.png" width="250" height="300"></li>
<li><img src="img/3.png" width="250" height="300"></li>
<li><img src="img/4.png" width="250" height="300"></li>
</ul>
<div class="left"> <</div>
<div class="right"> ></div>
</div>
<script src="jquery.min.js"></script>
<script>
$('li').clone().appendTo('.clearfix');//克隆
//$('ul').html($('ul').html()+$('ul').html());
$('ul').css('width',$('li').outerWidth()*$('li').length+'px');
//alert( $('ul').width());
//动画
var nowNum=0;
var onOff=true;
var timer=null;
timer=setInterval(clickRight,2000);
$('.hide').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(clickRight,2000);
})
$('.left').on('click',function(){
if(onOff){clickLeft();}
});
$('.right').on('click',function(){
if(onOff){clickRight();}
});
//左
function clickLeft() {
onOff = !onOff;
if(nowNum ==0){
nowNum = $('ul li').length / 2;//如果在第一张图片 拉到第四张图片开始跑
$('ul').css('left', -$('ul').outerWidth() / 2 + 'px');
}
nowNum--;
//animate动画
$('ul').animate({'left': -nowNum * $('ul li').outerWidth() + 'px'}, 400, function () {
onOff = !onOff;
});
}
//右
function clickRight(){
onOff=!onOff;
if(nowNum==$('ul li').length/2){
nowNum=0;
$('ul').css('left',0+'px')
}
nowNum++;
$('ul').animate({'left':-nowNum *$('ul li').outerWidth()+'px'},400,function(){
onOff=!onOff;
})
}
</script>
</body>
</html>
4.折叠效果
<ul>
<li>
<a href="#">这是第一个</a>
<ol>
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ol>
</li>
<li>
<a href="#">这是第二个</a>
<ol>
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ol>
</li>
<li>
<a href="#">这是第三个</a>
<ol>
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ol>
</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$('a').click(function(){
$(this).next().show();//$(this).next().css('display','block');
$(this).parents('li').siblings() .find('ol').hide();
})
</script>