如何制作一个选项卡里面第一个li是焦点轮播图

时间：2022-05-09 10:03:14
如题，我制作了一个选项卡，里面首个需要展示轮播图，除了第一个选项卡能播放外，其他选项卡都无法播放，请问是什么原因
如何制作一个选项卡里面第一个li是焦点轮播图
上面是第一个选项卡
下面是第二个选项卡
如何制作一个选项卡里面第一个li是焦点轮播图
HTML代码 
<body>

<div class="zzx">

  <div class="title cf">

    <h2 class="fl">找装修</h2>

    <ul class="title-list fr cf ">

      <li class="on">装修公司</li>

      <li>装修团队</li>

      <li>施工工长</li>

      <li>装修监理</li>

      <li>预算造价</li>

      <p></p>

    </ul>

  </div>

  <div class="product-wrap">

    <!--案例1-->

    <div class="product show">

    	    <div class="ml1" id='ml1'>

	<div class="screen">

        <ul>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

        </ul>

    </div>

    <ol class="ol1">

    </ol>

    </div>

      <ul class="cf2">

        <li> <a href="#" class="imgwrap"> <img src="images/1.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/1.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

             </ul>

      <ul class="cf1">

        <li > <a href="#" class="imgwrap"> <img src="images/1.jpg"> </a>

          <p class="mt10"> <a href="#">网站logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> 

        	<a href="#" class="imgwrap"> <img src="images/1.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/1.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/1.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

      </ul>

    </div>

    <!--案例2-->

    <div class="product">

    	    	    <div class="ml1" id='ml1'>

	<div class="screen">

        <ul>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

        </ul>

    </div>

    <ol class="ol1">

    </ol>

    </div>

      <ul class="cf2">

        <li> <a href="#" class="imgwrap"> <img src="images/2.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/2.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

      </ul>

      <ul class="cf1">

        <li class="ml0"> <a href="#" class="imgwrap"> <img src="images/2.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/2.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/2.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/2.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

      </ul>

    </div>

    <!--案例3-->

    <div class="product">

    	    	    <div class="ml1" id='ml1'>

	<div class="screen">

        <ul>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

        </ul>

    </div>

    <ol class="ol1">

    </ol>

    </div>

      <ul class="cf2">

        <li class="ml1"> <a href="#" class="imgwrap"> <img src="images/3.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/3.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

      </ul>

      <ul class="cf1">

        <li class="ml0"> <a href="#" class="imgwrap"> <img src="images/3.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/3.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/3.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/3.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

      </ul>

    </div>

    <!--案例4-->

    <div class="product">

    	    	    <div class="ml1" id='ml1'>

	<div class="screen">

        <ul>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

        </ul>

    </div>

    <ol class="ol1">

    </ol>

    </div>

      <ul class="cf2">

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/4.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/4.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

      </ul>

      <ul class="cf1">

        <li class="ml0"> <a href="#" class="imgwrap"> <img src="images/4.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/4.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/4.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/4.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

      </ul>

    </div>

    <!--案例5-->

    <div class="product">

    	    	    <div class="ml1" id='ml1'>

	<div class="screen">

        <ul>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

            <li><a><img src="images/01.jpg" width="590" height="285" /></a></li>

        </ul>

    </div>

    <ol class="ol1">

    </ol>

    </div>

      <ul class="cf2">

        <li> <a href="#" class="imgwrap"> <img src="images/5.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/5.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

      </ul>

            <ul class="cf1">

        <li class="ml0"> <a href="#" class="imgwrap"> <img src="images/5.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/5.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/5.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

        <li> <a href="#" class="imgwrap"> <img src="images/5.jpg"> </a>

          <p class="mt10"> <a href="#"> 深圳达文影视传媒有限公司logo... </a></p>

          <p class="pb10">行业类别：艺术摄影,文化体育</p>

        </li>

      </ul>

    </div>

  </div>

</div>

</body>


3 个解决方案

#1

CSS代码 
/* 展示开始 */


* {

	margin: 0;

	padding: 0;

	list-style: none;

}


body {

	font-size: 12px;

}


img {

	border: none;

}



/*public*/


.fl {

	display: inline;

	float: left;

}


.fr {

	display: inline;

	float: right;

}


.cf:after {

	content: "";

	clear: both;

	display: block;

	height: 0;

	overflow: hidden;

}


.cf {

	zoom: 1;


}

.product .cf2{

	float: right;

	margin-left: 595px;

}

.cf1:after {

	content: "";

	clear: both;

	display: block;

	height: 0;

	overflow: hidden

}


.cf1 {

	zoom: 1;

	margin-top: 300px;

}


.pb10 {

	padding-bottom: 1px;

	text-align: center;

	font-size: 1.3em;

	margin-top: 10px;

}


.mt10 {

	margin-top: 40px;

	text-align: center;

	font-size: 1.4em;

	font-weight: bold;

}



/*main*/


.zzx {

	width: 1200px;

	height: 650px;

	margin: 100px auto;

	background: #fff;

	padding: 15px;

	box-shadow: 0 0 10px #ccc;

}


.zzx .title {

	height: 20px;

	padding-bottom: 10px;

}


.zzx .title h2 {

	font-size: 20px;

	font-family: "microsoft yahei";

}


.zzx .title-list {

	position: relative;

	top: 6px;

}


.zzx .title-list li {

	width: 146px;

	line-height: 20px;

	text-align: center;

	float: left;

	display: inline;

	font-size: 18px;

	cursor: default;

}


.zzx .title-list li.on {

	color: #ff6600;

	font-weight: bold;

}


.zzx .title-list p {

	position: absolute;

	top: 24px;

	left: 0px;

	width: 90px;

	height: 7px;

	border-top: 3px solid #ff6600;

	overflow: hidden;

	text-align: center;

	margin-left: 27px;

}


.zzx .title-list b {

	display: inline-block;

	width: 0;

	height: 0;

	margin-top: -3px;

	border-style: solid dashed dashed dashed;

	border-width: 9px;

	border-color: #ff6600 #fff #fff #fff;

	overflow: hidden;

	zoom: 1;

	font-size: 0;

}


.product {

	height: 600px;

	position: relative;

	overflow: hidden;

	display: none;

	margin-top: 20px;

	width: 1200px;

	float: left;

}


.product ul {

	position: absolute;

	left: 0px;

}


.product-wrap {

	width: 1200px;

	height: 600px;

}


.product-wrap .show {

	display: block;

	width: 1200px;

	height: 600px;

}


.product-wrap .product li {

	float: left;

	display: inline;

	margin-left: 13px;

	background: #f3f3f3;

	border: 2px solid #fafafa;

	transition: 0.4s;

	-webkit-transition: 0.4s;

	-moz-transition: 0.4s;

	-o-transition: 0.4s;

	-ms-transition: 0.4s;

	width: 281px;

	height: 285px;

	margin-top: 10px;

}


.product-wrap .product li.ml0 {

	margin-left: 10px;

}



/*展示幻灯片*/


* {

	padding: 0;

	margin: 0;

	list-style: none;

	border: 0;

}


.ml1 {

	width: 590px;

	height: 285px;

	position: relative;

	float: left;

	margin-top: 10px;


}


.ml1 .screen {

	width: 590px;

	height: 285px;

	overflow: hidden;

	position: relative;

}


.ml1 .screen li {

	width: 590px;

	height: 285px;

	overflow: hidden;

	float: left;

	margin-left: 0;

}

.product-wrap .product .ml1 li a img{

	width: 590px;

	height: 285px;

}

.ml1 .screen ul {

	position: absolute;

	left: 0;

	top: 0px;

	width: 3000px;

}


.ml1 .ol1 {

	position: absolute;

	right: 460px;

	bottom: 10px;

	line-height: 20px;

	text-align: center;

}


.ml1 .ol1 li {

	float: left;

	width: 15px;

	height: 15px;

	background: #fff;

	margin-left: 5px;

	cursor: pointer;

	font-size: 10px;

	font-family: Verdana;

	line-height: 15px;

	border-radius: 15px;

	opacity: 0.6;

}


.ml1 .ol1 li.current {

	background: yellow;

}



/*展示幻灯片结束*/


.product-wrap .product li a.imgwrap {

	display: block;

	width: 281px;

	height: 171px;

	background: #fff;

	text-align: center;

}


.product-wrap .product li a img {

	width: 281px;

	height: 200px;

}


.product-wrap .product li p {

	padding-left: 15px;

	color: #666666;

	line-height: 22px;

}


.product-wrap .product li p a {

	color: #666666;

	text-decoration: none;

}


.product-wrap .product li p a:hover {

	color: #ff6600;

	text-decoration: none;

}



/* 展示页面结束*/

#2

JS代码 



$(function(){		

	//设计案例切换

	$('.title-list li').click(function(){

		var liindex = $('.title-list li').index(this);

		$(this).addClass('on').siblings().removeClass('on');

		$('.product-wrap div.product').eq(liindex).fadeIn(150).siblings('div.product').hide();

		var liWidth = $('.title-list li').width();

		$('.zzx .title-list p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);

	});


	//设计案例hover效果

	$('.product-wrap .product li').hover(function(){

		$(this).css("border-color","#ff6600");

		$(this).find('p > a').css('color','#ff6600');

	},function(){

		$(this).css("border-color","#fafafa");

		$(this).find('p > a').css('color','#666666');

	});

	});




/**

 * Created by Xnew on 2016/8/25.

 */

//animate 动画

//    step 步长

// 目标位置

function animate(obj, target){

    clearInterval(obj.timer);

    var step = obj.offsetLeft < target ? +15 : -15;

    obj.timer = setInterval(function(){

        obj.style.left = obj.offsetLeft + step + "px";

        //console.log(Math.abs(target - obj.offsetLeft));

        if(Math.abs(target - obj.offsetLeft) <= 10){

            obj.style.left = target + "px";

            clearInterval(obj.timer);

        }

    }, 10)

}

    window.onload= function() {

        var box  = document.getElementById("ml1");  //   获得大盒子

        var ul = box.children[0].children[0];  // 获取ul

        var ulLis = ul.children;  //  ul 里面的所有  li

        // 复习：  cloneNode()     克隆节点       追加a.appendChild(b)  把b 放到a 的最后面

        //1.  ulLis[0].cloneNode(true)  克隆  节点

        ul.appendChild(ulLis[0].cloneNode(true));   // ul 是 a   ulLis[0].cloneNode(true) 是b


        //2. 插入 ol 里面的li

        var ol = box.children[1];  // 获得ol

        // 因为 我们要创建很多个 ol 里面的li 所以需要用到for 循环哦

        for(var i=0;i<ulLis.length-1;i++) {   // ul 里面的li  长度 要减去 1  因为我们克隆一个

            // 创建节点 li

            var li = document.createElement("li");

            li.innerHTML = i + 1;   //  存在加1 的关系

            // a.appendChild(b);

            ol.appendChild(li);

        }

        var olLis = ol.children;  // 找到 ol 里面的li

        olLis[0].className = 'current';

        // 3. 动画部分  遍历小li ol

        for(var i=0;i<olLis.length;i++) {

            olLis[i].index = i;  // 赋予索引号

            olLis[i].onmouseover = function() {

                // 清除所有人

                for(var j=0;j<olLis.length;j++) {

                    olLis[j].className = "";

                }

                this.className = 'current';

                animate(ul,-this.index*ulLis[0].offsetWidth);

                key = square = this.index; // 鼠标经过 key square 要等于 当前的索引号

            }

        }

       // 4. 定时器部分  难点

        var timer = null;  // 定时器

        var key = 0; // 用来控制图片的播放的

        var square = 0;  // 用来控制小方块的

        timer = setInterval(autoplay,3000);   // 每隔3s 调用一次 autoplay

        function autoplay() {

            key++;   // key == 1  先 ++

            console.log(key); //  不能超过5

            if(key > ulLis.length - 1)

            {

               // alert('停下');

                ul.style.left = 0;

                key = 1;  // 因为第6张就是第一张，我们已经播放完毕了， 下一次播放第2张

                // 第2张的索引号是1

            }

            animate(ul,-key*ulLis[0].offsetWidth);

            // 小方块的做法

            square++;  // 小方块自加1

            square = square>olLis.length-1 ? 0 : square;

            /// 清除所有人

            for(var i=0;i<olLis.length;i++) {

                olLis[i].className = "";

            }

            olLis[square].className = "current";   // 留下当前自己的


        }



        // 鼠标经过和停止定时器

        box.onmouseover = function() {

            clearInterval(timer);

        }


        box.onmouseout = function() {

            timer = setInterval(autoplay,3000);  // 一定这么开

        }




        //  基本封装

        function animate(obj,target) {

            clearInterval(obj.timer);  // 要开启定时器，先清除以前定时器

            // 有2个参数 第一个 对象谁做动画  第二 距离 到哪里

            // 如果 offsetLeft 大于了  target 目标位置就应该反方向

            var speed = obj.offsetLeft < target ? 15 : -15;

            obj.timer = setInterval(function() {

                var result = target - obj.offsetLeft;  //  他们的值 等于 0 说明完全相等

                // 动画的原理

                obj.style.left = obj.offsetLeft + speed  + "px";

                if(Math.abs(result) <= 15) {

                    obj.style.left = target + "px";   //抖动问题

                    clearInterval(obj.timer);

                }

            },10);

        }


    }

#3

<div class="product">
                    <div class="ml1" id='ml1'>
    <div class="screen">

这里的id有问题，你每个案例用的都是一个ID名，只对第一个有作用

#1

CSS代码 
/* 展示开始 */


* {

	margin: 0;

	padding: 0;

	list-style: none;

}


body {

	font-size: 12px;

}


img {

	border: none;

}



/*public*/


.fl {

	display: inline;

	float: left;

}


.fr {

	display: inline;

	float: right;

}


.cf:after {

	content: "";

	clear: both;

	display: block;

	height: 0;

	overflow: hidden;

}


.cf {

	zoom: 1;


}

.product .cf2{

	float: right;

	margin-left: 595px;

}

.cf1:after {

	content: "";

	clear: both;

	display: block;

	height: 0;

	overflow: hidden

}


.cf1 {

	zoom: 1;

	margin-top: 300px;

}


.pb10 {

	padding-bottom: 1px;

	text-align: center;

	font-size: 1.3em;

	margin-top: 10px;

}


.mt10 {

	margin-top: 40px;

	text-align: center;

	font-size: 1.4em;

	font-weight: bold;

}



/*main*/


.zzx {

	width: 1200px;

	height: 650px;

	margin: 100px auto;

	background: #fff;

	padding: 15px;

	box-shadow: 0 0 10px #ccc;

}


.zzx .title {

	height: 20px;

	padding-bottom: 10px;

}


.zzx .title h2 {

	font-size: 20px;

	font-family: "microsoft yahei";

}


.zzx .title-list {

	position: relative;

	top: 6px;

}


.zzx .title-list li {

	width: 146px;

	line-height: 20px;

	text-align: center;

	float: left;

	display: inline;

	font-size: 18px;

	cursor: default;

}


.zzx .title-list li.on {

	color: #ff6600;

	font-weight: bold;

}


.zzx .title-list p {

	position: absolute;

	top: 24px;

	left: 0px;

	width: 90px;

	height: 7px;

	border-top: 3px solid #ff6600;

	overflow: hidden;

	text-align: center;

	margin-left: 27px;

}


.zzx .title-list b {

	display: inline-block;

	width: 0;

	height: 0;

	margin-top: -3px;

	border-style: solid dashed dashed dashed;

	border-width: 9px;

	border-color: #ff6600 #fff #fff #fff;

	overflow: hidden;

	zoom: 1;

	font-size: 0;

}


.product {

	height: 600px;

	position: relative;

	overflow: hidden;

	display: none;

	margin-top: 20px;

	width: 1200px;

	float: left;

}


.product ul {

	position: absolute;

	left: 0px;

}


.product-wrap {

	width: 1200px;

	height: 600px;

}


.product-wrap .show {

	display: block;

	width: 1200px;

	height: 600px;

}


.product-wrap .product li {

	float: left;

	display: inline;

	margin-left: 13px;

	background: #f3f3f3;

	border: 2px solid #fafafa;

	transition: 0.4s;

	-webkit-transition: 0.4s;

	-moz-transition: 0.4s;

	-o-transition: 0.4s;

	-ms-transition: 0.4s;

	width: 281px;

	height: 285px;

	margin-top: 10px;

}


.product-wrap .product li.ml0 {

	margin-left: 10px;

}



/*展示幻灯片*/


* {

	padding: 0;

	margin: 0;

	list-style: none;

	border: 0;

}


.ml1 {

	width: 590px;

	height: 285px;

	position: relative;

	float: left;

	margin-top: 10px;


}


.ml1 .screen {

	width: 590px;

	height: 285px;

	overflow: hidden;

	position: relative;

}


.ml1 .screen li {

	width: 590px;

	height: 285px;

	overflow: hidden;

	float: left;

	margin-left: 0;

}

.product-wrap .product .ml1 li a img{

	width: 590px;

	height: 285px;

}

.ml1 .screen ul {

	position: absolute;

	left: 0;

	top: 0px;

	width: 3000px;

}


.ml1 .ol1 {

	position: absolute;

	right: 460px;

	bottom: 10px;

	line-height: 20px;

	text-align: center;

}


.ml1 .ol1 li {

	float: left;

	width: 15px;

	height: 15px;

	background: #fff;

	margin-left: 5px;

	cursor: pointer;

	font-size: 10px;

	font-family: Verdana;

	line-height: 15px;

	border-radius: 15px;

	opacity: 0.6;

}


.ml1 .ol1 li.current {

	background: yellow;

}



/*展示幻灯片结束*/


.product-wrap .product li a.imgwrap {

	display: block;

	width: 281px;

	height: 171px;

	background: #fff;

	text-align: center;

}


.product-wrap .product li a img {

	width: 281px;

	height: 200px;

}


.product-wrap .product li p {

	padding-left: 15px;

	color: #666666;

	line-height: 22px;

}


.product-wrap .product li p a {

	color: #666666;

	text-decoration: none;

}


.product-wrap .product li p a:hover {

	color: #ff6600;

	text-decoration: none;

}



/* 展示页面结束*/

#2

JS代码 



$(function(){		

	//设计案例切换

	$('.title-list li').click(function(){

		var liindex = $('.title-list li').index(this);

		$(this).addClass('on').siblings().removeClass('on');

		$('.product-wrap div.product').eq(liindex).fadeIn(150).siblings('div.product').hide();

		var liWidth = $('.title-list li').width();

		$('.zzx .title-list p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);

	});


	//设计案例hover效果

	$('.product-wrap .product li').hover(function(){

		$(this).css("border-color","#ff6600");

		$(this).find('p > a').css('color','#ff6600');

	},function(){

		$(this).css("border-color","#fafafa");

		$(this).find('p > a').css('color','#666666');

	});

	});




/**

 * Created by Xnew on 2016/8/25.

 */

//animate 动画

//    step 步长

// 目标位置

function animate(obj, target){

    clearInterval(obj.timer);

    var step = obj.offsetLeft < target ? +15 : -15;

    obj.timer = setInterval(function(){

        obj.style.left = obj.offsetLeft + step + "px";

        //console.log(Math.abs(target - obj.offsetLeft));

        if(Math.abs(target - obj.offsetLeft) <= 10){

            obj.style.left = target + "px";

            clearInterval(obj.timer);

        }

    }, 10)

}

    window.onload= function() {

        var box  = document.getElementById("ml1");  //   获得大盒子

        var ul = box.children[0].children[0];  // 获取ul

        var ulLis = ul.children;  //  ul 里面的所有  li

        // 复习：  cloneNode()     克隆节点       追加a.appendChild(b)  把b 放到a 的最后面

        //1.  ulLis[0].cloneNode(true)  克隆  节点

        ul.appendChild(ulLis[0].cloneNode(true));   // ul 是 a   ulLis[0].cloneNode(true) 是b


        //2. 插入 ol 里面的li

        var ol = box.children[1];  // 获得ol

        // 因为 我们要创建很多个 ol 里面的li 所以需要用到for 循环哦

        for(var i=0;i<ulLis.length-1;i++) {   // ul 里面的li  长度 要减去 1  因为我们克隆一个

            // 创建节点 li

            var li = document.createElement("li");

            li.innerHTML = i + 1;   //  存在加1 的关系

            // a.appendChild(b);

            ol.appendChild(li);

        }

        var olLis = ol.children;  // 找到 ol 里面的li

        olLis[0].className = 'current';

        // 3. 动画部分  遍历小li ol

        for(var i=0;i<olLis.length;i++) {

            olLis[i].index = i;  // 赋予索引号

            olLis[i].onmouseover = function() {

                // 清除所有人

                for(var j=0;j<olLis.length;j++) {

                    olLis[j].className = "";

                }

                this.className = 'current';

                animate(ul,-this.index*ulLis[0].offsetWidth);

                key = square = this.index; // 鼠标经过 key square 要等于 当前的索引号

            }

        }

       // 4. 定时器部分  难点

        var timer = null;  // 定时器

        var key = 0; // 用来控制图片的播放的

        var square = 0;  // 用来控制小方块的

        timer = setInterval(autoplay,3000);   // 每隔3s 调用一次 autoplay

        function autoplay() {

            key++;   // key == 1  先 ++

            console.log(key); //  不能超过5

            if(key > ulLis.length - 1)

            {

               // alert('停下');

                ul.style.left = 0;

                key = 1;  // 因为第6张就是第一张，我们已经播放完毕了， 下一次播放第2张

                // 第2张的索引号是1

            }

            animate(ul,-key*ulLis[0].offsetWidth);

            // 小方块的做法

            square++;  // 小方块自加1

            square = square>olLis.length-1 ? 0 : square;

            /// 清除所有人

            for(var i=0;i<olLis.length;i++) {

                olLis[i].className = "";

            }

            olLis[square].className = "current";   // 留下当前自己的


        }



        // 鼠标经过和停止定时器

        box.onmouseover = function() {

            clearInterval(timer);

        }


        box.onmouseout = function() {

            timer = setInterval(autoplay,3000);  // 一定这么开

        }




        //  基本封装

        function animate(obj,target) {

            clearInterval(obj.timer);  // 要开启定时器，先清除以前定时器

            // 有2个参数 第一个 对象谁做动画  第二 距离 到哪里

            // 如果 offsetLeft 大于了  target 目标位置就应该反方向

            var speed = obj.offsetLeft < target ? 15 : -15;

            obj.timer = setInterval(function() {

                var result = target - obj.offsetLeft;  //  他们的值 等于 0 说明完全相等

                // 动画的原理

                obj.style.left = obj.offsetLeft + speed  + "px";

                if(Math.abs(result) <= 15) {

                    obj.style.left = target + "px";   //抖动问题

                    clearInterval(obj.timer);

                }

            },10);

        }


    }

#3

<div class="product">
                    <div class="ml1" id='ml1'>
    <div class="screen">

这里的id有问题，你每个案例用的都是一个ID名，只对第一个有作用
标签：

相关文章