新手JS&HTML&CSS实现轮播图

轮播图实现

图片路径修改一下 就可以运行
javascript代码

<script type=\"text/javascript\">window.onload = function(){// 利用js自动设置ul的宽度，以适应不同数量的图片var imgArr = document.getElementsByTagName(\"img\");var img =document.querySelector(\".pic .img\")img.style.width = 540 * imgArr.length +\"px\";// 利用js自动设置图片导航居中，以适应不同数量的导航点var navLiArr = document.querySelectorAll(\".nav ul li\");var nav = document.querySelector(\".nav\");nav.style.marginLeft = (- 10 * navLiArr.length) + \"px\";//获取两个按钮var prev = document.querySelector(\".pic .prev\");var next = document.querySelector(\".pic .next\");//为两个按钮绑定单击响应函数prev.onclick = function(){var left = img.offsetLeft + 540;// 判断left是否超出范围if(left > 0){left = (imgArr.length - 1) * (-540);}img.style.left = left + \"px\";// 获取当前的图片索引index = left / (-540);// 将当前图片索引设置为black色setA();};next.onclick = function(){var left = img.offsetLeft - 540;// 判断left是否超出范围if(left <= imgArr.length * (-540)){left = 0;}img.style.left = left + \"px\";// 获取当前的图片索引index = left / (-540);// 将当前图片索引设置为black色setA();};// 获取图片的当前索引var index = 0;// 获取所有的avar allA = document.querySelectorAll(\".nav a\");// 将索引index为0的a背景改为黑色allA[index].style.backgroundColor = \"black\";// 点击超链接，切换到指定的图片for( var i = 0; i < allA.length; i++){// 在绑定之前，为每个超链接添加num属性作为唯一标识allA[i].num = i;allA[i].onclick = function(){// 将不同a的标识赋给index这个变量，表示当前图片的索引index = this.num;//调用专门用来设置a的函数setA();//点击切换图片img.style.left = index * (-540) + \"px\";};}// 定义一个定时器，用来自动切换图片setInterval(function(){var left = img.offsetLeft - 540;// 可以随着图片的增加来判断循环点if(left <= imgArr.length * (-540)){left = 0;}img.style.left = left + \"px\";// 获取当前的图片索引index = left / (-540);// 将当前图片索引设置为black色setA();},3000);//  创建一个函数，专门用来设置afunction setA(){for(var i = 0; i < allA.length; i++){// 这里如果设置为pink则样式中的hover不会起效，因为内联样式优先级大于样式表// 所以将其设置为空串，则会继续显示样式表中的样式，或者给样式表加上!importantallA[i].style.backgroundColor = \"\";}// 将选中的a设置为黑色allA[index].style.backgroundColor = \"black\";}};</script>

CSS代码

<style>* {margin: 0;padding: 0;}body {background-color: black;}li {list-style: none;}.pic {position: relative;width: 540px;height: 334px;margin: 100px auto;overflow: hidden;}.pic .img {position: absolute;left: 0;/* 通过js设置宽度 */}.pic .img li {float: left;}.pic .img li img {width: 540px;height: 334px;}.pic .nav {position: absolute;bottom: 10px;left: 50%;}.pic .nav ul li {float: left;width: 10px;height: 10px;margin-right: 10px;}.pic .nav ul li a {display: block;width: 10px;height: 10px;background-color: pink;border-radius: 5px;}.pic .nav ul li a:hover {background-color: black;cursor: pointer;}.pic .prev,.pic .next {position: absolute;top: 50%;margin-top: -20px;z-index: 1;width: 25px;height: 40px;font-size: 20px;color: pink;line-height: 40px;background: rgba(0, 0, 0, .5);}.pic .prev {left: 0;text-indent: 0.1em;border-radius: 0 20px 20px 0;}.pic .next {right: 0;text-indent: 0.4em;border-radius: 20px 0 0 20px;}.pic .prev:hover,.pic .next:hover {cursor: pointer;}</style>

html代码

<div class=\"pic\"><div class=\"prev\">&lt;</div><ul class=\"img\"><li><img src=\"photo/1.jpg\" alt=\"1\"></li><li><img src=\"photo/2.jpg\" alt=\"2\"></li><li><img src=\"photo/3.jpg\" alt=\"3\"></li><li><img src=\"photo/4.jpg\" alt=\"4\"></li><li><img src=\"photo/5.jpg\" alt=\"5\"></li></ul><div class=\"next\">&gt;</div><div class=\"nav\"><ul><li><a href=\"#\"></a></li><li><a href=\"#\"></a></li><li><a href=\"#\"></a></li><li><a href=\"#\"></a></li><li><a href=\"#\"></a></li></ul></div></div>

效果：