html+css+js 实现图片轮播效果
图片轮播效果：
会自动 向左 || 向右 切换图片能手动点击按钮切换图片多用于商品展览等等——首先我们创建一个盒子进行展览，然后一个< ul>，< li>来存每张图片。
话不多说，放 代码：
HTML
<div id="banner"><ul id="ul"><li><a href="###"><img src="./images/dianyuan.jpg" /></a></li><li><a href="###"><img src="./images/shouhuan.jpg" /></a></li><li><a href="###"><img src="./images/mi4.jpg" /></a></li></ul><span id="left" onclick="left()">< </span><span id="right" onclick="right()">></span><ol id="ol"><!--由js动态生成<li>--></ol></div>
CSS
这里css的设置不算重要，大家根据我的注释看一下
#banner {height: 75%;width: 100%;overflow: hidden;position: relative;}#banner #ul {width: 6600px;/*ul的宽度我们选择业让那个js动态生成,这样可以减少后期修改带来的麻烦*/height: 100%;position: absolute;left: -0350px;/*因为我的图片比较大,所以为了能让内容居中,于是移了一些出去*/top: 0;}#banner li {float: left;/*浮动,使所有图片排成一行*/width: 2200px;/*设置每个li的宽度(根据自己的图片width进行选择)*/height: 100%;}#banner img {width: 100%;position: relative;}#banner #left , #banner #right{/*两边的left、right按钮（< >）*/width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background-color: cadetblue;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #000;opacity: 0.5;border: 1px solid #fff;}#banner #right{right: 5px;left: auto;}#banner #left:hover , #banner #right:hover{opacity: 1;border-color: #000;color: #fff;}#banner #ol{/*底部的图片精准选择按钮*/position: absolute;bottom: 10px;left: 50%;}#banner #ol li{border-radius: 45px;/*令其呈圆形*/width: 15px;height: 15px;background-color: #CCCCCC;cursor: pointer;/*鼠标呈 手 样式*/line-height: 20px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 15px;color: #000;opacity: 0.5;/*设置透明度*/border: 2px solid #333;float: left;margin: 0 10px;}#banner #ol li:hover{opacity: 0.8;}#banner #ol .now{/*当前展示图片所对应的数字按钮(这个.now我们由js动态设置)*/opacity: 1;/*不透明*/background-color: #333;}
js部分重头来啦~~~~~~~~~~~~~~~~~~~~
首先我们先进行对象成员的赋值
obj.offsetLeft：获取对象的left属性值（只读）obj.offsetWidth：获取对象的width属性值（只读）
var ul = document.getElementById("ul");var ol = document.getElementById("ol");var li = ul.getElementsByTagName("li");var li_width = li[0].offsetWidth;//获得li的宽度var left_start = ul.offsetLeft;//获取当前第一张图片的leftul.style.width=(li_width*li.length)+"px";
然后是对< ol> < li>的初始化创建
var one=setInterval(“right()”,3000)
setInterval() ：方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。返回一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。我们让它每过3秒就调用一次right()向右滑动
我们在click的点击中先清除掉setInterval，再创建setInterval，这样可以让用户在选择是有足够的时间观看
var one=setInterval("right()",3000);//setInterval() ：方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。for(var i=0 ; i<li.length ; i++){//动态生成底部按钮数字按钮var ol_li=document.createElement("li");//创建<li>标签ol.appendChild(ol_li);//加入将ol_li加入到<ol>标签中ol_li.id=i+1;//设置id，主要是方便后面的数字计算ol_li.onclick=function(){clearInterval(one);pic=this.id;ul.style.left = (left_start - (pic-1) * li_width) + "px";//点击那个li就会跳转到那张图片change();//见下文one=setInterval(right,3000);//前面取消了周期时间one，现在又把它开启，后面也会有这种操作，主要是为了使用方便}}
这里我们设置了一下逻辑功能，以及change()方法
pic：这里用来关联当前所展示的图片obj.className：设置标签的class名称，设置完毕后会被css所更改相应样式
var pic=1;var last=document.getElementById(pic);//定义last变量指向一个li标签last.className="now"; //在css中我已经将class为now的样式设置为特殊设置，是为了突出function change(){//“改变”方法：动态设置当前显示的图片所对应按钮的格式last.className=" ";//清除上一个的格式document.getElementById(pic).className="now";//为当前li添加className（需要css配合使用.now{设置格式}）last=document.getElementById(pic);//更新last}
接下来就是最重要的部分了left()与right()
这里我自认为注释已经写得很全了，哈哈哈哈，若有那里不清楚的欢迎评论这里主要就是一些逻辑的部分，利用几个属性来回改变< ull>的left left值越少，就越到后面的图片
ul.style.transition="left 0.5s, right 0.5s";//为图片轮播效果加一个transition过渡动画，当然是为了更好看啦function left() {//向左按钮clearInterval(one);//先暂停/*if (ul.offsetLeft > left_start - li_width) {//考虑到当前图片已经是第一张，点击left按钮就跳向最后一张 */ // 这种方法出了Bugif(pic == 1){ul.style.left = (left_start - (li.length - 1) * li_width) + "px";pic=li.length;//li.length就相当于是最后一张图片的id了（见前面这只id部分）} else {ul.style.left = (ul.offsetLeft + li_width) + "px";pic--;//向前翻一张，当然就减一了// alert(ul.offsetLeft);}change();//每次改变是都调用change()函数one=setInterval(right,3000);//重新开始周期调用}function right() {//向右按钮clearInterval(one);/* if (ul.offsetLeft < left_start - (li.length - 2) * li_width) {//考虑到已经是最后一张的情况，跳向第一张 */if(pic == li.length){ul.style.left = (left_start) + "px";pic=1;} else {ul.style.left = (ul.offsetLeft - li_width) + "px";pic++;// alert(ul.offsetLeft);}change();//调用改变函数one=setInterval(right,3000);}
好了，码字不易，欢迎点赞评论
