JavaScript 轮播图（含过渡动画）

维科家纺 發表於 2019-8-6 21:08:00

<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 *{
 list-style: none;
 margin: 0;
 padding: 0;
 }
 #outer{
 width: 320px;
 height: 300px;
 margin: 50px auto;
 background-color: lightpink;
 padding: 12px 0px ;/*上右下左*/
 overflow: hidden;/*隐藏溢出内容*/
 position: relative;
 }
 #imgList{
 width: ;/*用js来自动设置#imgList宽度*/
 position: absolute; /*子元素相对父元素的绝对定位*/
 left:;/*每移320px 到下一张*/

 }
 #imgList li{
 float: left;
 padding: 0px 10px;
 }
 #navDiv{
 position: absolute;
 bottom: 15px;
 left: ;/*通过js来自动设置导航居中*/
 }
 #navDiv a{
 width: 15px;
 height: 15px;
 background-color: red;
 margin: 0 5px;
 float: left;
 opacity: 0.5;/*设置透明*/

 }
 #navDiv a:hover{ /*设置鼠标移入效果*/
 background-color: black;

 }
 </style>
</head>
<body>
 <div id="outer">
 <ul id="imgList">
 <li><img src="img/1.jpg"/></li>
 <li><img src="img/2.jpg"/></li>
 <li><img src="img/3.jpg"/></li>
 <li><img src="img/4.jpg"/></li>
 <li><img src="img/1.jpg"/></li>
 </ul>
 
 <div id="navDiv">
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 </div>
 </div>
</body>
<script type="text/javascript" >
 /*尝试构造一个可以执行简单动画的函数
 * -参数：
 * obj:要执行动画的对象
 * attr:要执行动画的样式，如left top width height
 * target:执行动画的目标位置
 * speed:移动的速度（正数右移，负数左移）
 * callback:回调函数，这个函数会在动画执行完毕以后执行
 */
 function move(obj,attr,target,speed,callback){
 //关闭上一个定时器，防止加速
 clearInterval(obj.timer);
 //获取元素目前的位置
 var current=parseInt(getStyle(obj,attr));
 //判断速度的正负
 //如果从0到800移动，则speed为正,800到0移动，为负
 if(current>target){
 //此时speed为负
 speed=-speed;
 }

 //-开启一个定时器，来执行动画效果
 obj.timer=setInterval(function(){
 //获取目标原来的left值
 var oldValue=parseInt(getStyle(obj,attr));
 //在旧值的基础上增加
 var newValue=oldValue+speed;

 if((speed<0&&newValue<target)||(speed>0&&newValue>target)){
 newValue=target;
 }

 //将新值设置给目标
 obj.style=newValue+"px";

 if(newValue==target){
 //到达目标值，关闭定时器
 clearInterval(obj.timer);
 //动画执行完毕，调用回调函数
 callback&&callback();
 }
 },30);
 }

 /*定义一个元素，来获取指定元素的当前的样式
 * -参数：
 * obj:要获取样式的元素
 * name:要获取的样式名
 */
 function getStyle(obj,name){
 return getComputedStyle(obj,null);
 }
</script>

<script type="text/javascript">
 //1.自动设置#imgList宽度
 var imgList=document.getElementById("imgList");
 var imgArr=document.getElementsByTagName("li");
 //使宽度随图片自动变化
 imgList.style.width=320*imgArr.length+"px";

 //2.自动设置导航居中
 var navDiv=document.getElementById("navDiv");
 var outer=document.getElementById("outer");
 //设置#navDiv随图片自动变化
 navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";

 //3.默认当前图片下的导航按钮
 var allA=document.getElementsByTagName("a");
 var index=0;
 allA.style.backgroundColor="black";

 //4.点击第x个超链接显示第x张图片
 for(i=0;i<allA.length;i++){
 //为获取点击的是第几个超连击，来添加一个num属性
 allA.num=i;
 //为a添加单击函数
 allA.onclick=function(){
 //设置点击动画优先，点击先结束自动动画
 clearInterval(timer);
// alert(this);
 //获取点击的a的索引
// alert(this.num);
 index=this.num;
 //切换图片
// imgList.style.left=-320*index+"px";
 //换成动画效果
 move(imgList,"left",-320*index,20,function(){
 //设置点击动画优先，再又开始自动动画
 start();
 });
 setA();

 }
 }


 //5.创建一个方法来设置选中的a
 function setA(){
 //判断
 if(index>=imgArr.length-1){
 index=0;
 imgList.style.left=0;
 }
 //设置不点击的变回红色
 for(i=0;i<allA.length;i++){
 allA.style.backgroundColor="";
 }
 //选中的设置为黑色
 allA.style.backgroundColor="black";
 }

 //6.自动切换图片
 start();
 var timer;
 function start(){
 timer= setInterval(function(){
 index++;
 //判断
 index=index % imgArr.length;//同上面的if判断 0%4=4 1%4=1 ...4%4=0
 //轮播
 move(imgList,"left",-320*index,20,function(){
 //修改对应导航按钮
 setA();
 });

 },3000)
 } 　　　　　　//动画轮播图终于完成
</script>
</html></pre>
</div>
  
来源：https://www.cnblogs.com/wangdongwei/p/11311861.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript 轮播图（含过渡动画）