css中js轮播效果（纯jscss3的轮播图简单实用）
css中js轮播效果（纯jscss3的轮播图简单实用）<li><img src="https://img.aigexing.comimg2/3.png" alt="5"/></li> <li><img src="https://img.aigexing.comimg2/2.png" alt="4"/></li> <ul> <li><img src="https://img.aigexing.comimg2/1.png" alt="3"/></li> <li><img src="https://img.aigexing.comimg2/0.png" alt="2"/></li>
之前为大家带来过轮播图的写法 因为里面用到了运动框架 所以用起来还是很多不懂的 今天优化了一下写法 并且增加了左右切换
先看下html结构
<div id="container">
<div id="list" style="left:0; ">
<ul>
<li><img src="https://img.aigexing.comimg2/1.png" alt="3"/></li>
<li><img src="https://img.aigexing.comimg2/0.png" alt="2"/></li>
<li><img src="https://img.aigexing.comimg2/2.png" alt="4"/></li>
<li><img src="https://img.aigexing.comimg2/3.png" alt="5"/></li>
<li><img src="https://img.aigexing.comimg2/4.png" alt="5"/></li>
</ul>
</div><!-- 存放图片的div -->
<div id="buttons">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div><!-- 小圆点控制 -->
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a><!-- 左右切换 -->
3
下面开始编写js脚本
老规矩 先把想要的东西拿到手
var container = document.getElementById('container');//获取大盒子
var list = document.getElementById('list');//获取第二层盒子
var ul=list.getElementsByTagName('ul')[0];//获取ul
var images=ul.getElementsByTagName('img');//获取img
var buttons = document.getElementById('buttons').getElementsByTagName('span');//获取好控制的span
var prev = document.getElementById('prev');//上一张
var next = document.getElementById('next');//下一张
var img=600;
ul.style.width=images.length*img 'px';//设置ul的宽度
先来左右切换的效果
next.onclick=function(){
list.style.left= parseInt(list.style.left)-600 'px';
}
prev.onclick=function(){
list.style.left= parseInt(list.style.left) 600 'px';
}
//代码重复 而且会有留白 可以封装成一个函数
改进下
function animate(pare){
list.style.left= parseInt(list.style.left) pare 'px';
}
next.onclick=function(){
if(list.style.left== -2400 'px'){
list.style.left=0 'px';
}
animate(-600);
}
prev.onclick=function(){
if(list.style.left== 0 'px'){
list.style.left= -2400 'px';
}
animate(600);
}
下面开始做小圆点变色和控制图片
依旧是写在一个函数里
也可以切换了
move();
function move(){
for(var i=0;i<buttons.length;i ){
buttons[i].index=i;
buttons[i].onclick= function () {
for(var i=0;i<buttons.length;i ){
buttons[i].className=""
}
buttons[this.index].className="on";
list.style.left=-600*this.index "px";//控制切换
}
}
}
自动播放
play();
function play(){
var timer=setInterval(function(){
next.onclick();
} 2000)
}
剩下就是左右切换 下面小圆点跟随了
需要给个变量
var index =1;
function setOut(){
for(var i=0;i<buttons.length;i ){
buttons[i].className=''";
break;
}
}
buttons[index-1].className="on"
}
分别在作于里面调用下这个函数
下面是全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0; text-decoration: none;}
body { padding: 20px;}
#container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
#list { height: 400px; position: absolute; z-index: 1;transition: all 1s;}
#list ul li{width: 600px;list-style: none;float: left;}
#list img { min-width: 100%;}
#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#buttons .on { background: orangered;}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0 0 0 .3); color: #fff;}
.arrow:hover { background-color: RGBA(0 0 0 .7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:0; ">
<ul>
<li><img src="https://img.aigexing.comimg2/1.png" alt="3"/></li>
<li><img src="https://img.aigexing.comimg2/0.png" alt="2"/></li>
<li><img src="https://img.aigexing.comimg2/2.png" alt="4"/></li>
<li><img src="https://img.aigexing.comimg2/3.png" alt="5"/></li>
<li><img src="https://img.aigexing.comimg2/4.png" alt="5"/></li>
</ul>
</div><!-- 存放图片的div -->
<div id="buttons">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
</div>
<script>
window.onload=function(){
var container = document.getElementById('container');
var list = document.getElementById('list');
var ul = list.getElementsByTagName('ul')[0];
var images = ul.getElementsByTagName('img');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var img = 600;
var index = 1
ul.style.width = images.length * img 'px';
function setOut() {
for (var i = 0; i < buttons.length; i ) {
if (buttons[i].className == 'on') {
buttons[i].className = ''
break;
}
}
buttons[index - 1].className = 'on'
}
function animate(pare){
list.style.left= parseInt(list.style.left) pare 'px';
}
next.onclick=function(){
if(list.style.left== -2400 'px'){
list.style.left=0 'px';
}
if(index==buttons.length){
index=1;
}else{
index ;
}
animate(-600);
setOut();
}
prev.onclick=function(){
if(list.style.left== 0 'px'){
list.style.left= -2400 'px';
}
if(index==1){
index=buttons.length;
}else{
index--;
}
animate(600);
setOut();
}
move();
function move(){
for(var i=0;i<buttons.length;i ){
buttons[i].index=i;
buttons[i].onclick= function () {
for(var i=0;i<buttons.length;i ){
buttons[i].className=""
}
buttons[this.index].className="on";
list.style.left=-600*this.index "px";
}
}
}
paly();
function paly(){
var timer=setInterval(function () {
next.onclick();
} 2000)
}
}
</script>
</body>
</html>
