原生js实现图片叠加滚动切换代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

152 604 202



特效描述:原生js实现 图片叠加 滚动切换。原生js实现图片叠加滚动切换代码

代码结构

1. 引入CSS

<link href="css.css" rel="stylesheet" type="text/css" />

2. HTML代码

<div id="box">
	<div id="container">
    	<div class="item">
        	<div class="pic">
            	<a href="http://51qianduan.com/"><img src="images/1.jpg" /></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">必图拳馆</a></dt>
                    <dd class="info">不要把自己困住 你需要释放!</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">过瘾</span><span class="blue">带劲</span><span class="green">有活力</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                        <li><b>thaifight:</b>是一个非常好的一个拳...</li>
                        <li><b>快乐小友:</b>散打课的实战机会挺多...</li>
                        <li><b>爱情赛车:</b>白天人很少,喜欢安静...</li>            
                        </ul>
                    </div>
                </div>
            </div>            
        </div>
        <div class="item">
            <div class="pic">
                <a href="http://51qianduan.com/"><img  src="images/2.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">北京「七田阳光」全脑教育培训中心</a></dt>
                    <dd class="info">点亮孩子智慧人生</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">亲切</span><span class="blue">耐心</span><span class="green">干净</span></dd>
                </dl>            
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>Jcenter:</b>如此诚恳的教育机构 ...</li>
                            <li><b>citaslin:</b>孩子的进步很大</li>
                            <li><b>甲鱼爱媛媛:</b>七田阳光很注重品质,...</li>
                        </ul>
                    </div>
                </div>
            </div>        
        </div>
    	<div class="item">
        	<div class="pic">
            	<a href="http://51qianduan.com/"><img src="images/3.jpg" /></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">慕纱莹雪婚纱礼服馆</a></dt>
                    <dd class="info">物超所值的性价比,尽在慕纱莹雪!</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">精致</span><span class="blue">做工好</span><span class="green">专业</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>小企鹅快跑:</b>这个周末去取了我定的...</li>
                            <li><b>月逢明时:</b>这家婚纱店的婚纱做工...</li>
                            <li><b>日历本丢了:</b>上周末去取了婚纱,婚...</li>                            
                        </ul>
                    </div>
                </div>
            </div>            
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/4.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">北京金三优装饰有限责任公司</a></dt>
                    <dd class="info">一站式服务让你省时、省力、省钱、省心</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">口碑好</span><span class="blue">规模很大</span><span class="green">讲信誉</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>紫婧之梦:</b>这家店不错哦!</li>
                            <li><b>gotometop:</b>装修工都还挺朴实的,...</li>
                            <li><b>libangcheng1:</b>这家公司还可以,去年...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/5.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">鸿喜族休闲俱乐部—潘家园店</a></dt>
                    <dd class="info">专注人类健康,打造财富传奇!</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">真好</span><span class="blue">专业</span><span class="green">手法好</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>永封de铁盒:</b>环境挺不错,灯光控制...</li>
                            <li><b>老冯爱国:</b>不错的地方,是个很有...</li>
                            <li><b>白云寺方丈:</b>我不会打台球,但朋友...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/6.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">北京心拓城拓展培训</a></dt>
                    <dd class="info">客户第一 执行有力 激情勤奋 简单团结</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">专业</span><span class="blue">安全</span><span class="green">积极</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>janice19891:</b>很负责任~</li>
                            <li><b>旺达是条鱼:</b>朋友参加过他们的拓展...</li>
                            <li><b>bjftxiaoniu:</b>吼吼,在这里看到他们...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/7.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">韩医生专业祛痘连锁机构北京直营店</a></dt>
                    <dd class="info">我们只祛痘 所以更专业</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">效果好</span><span class="blue">细心</span><span class="green">专业</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>天涯hehaijiao:</b>这家店很好,顾客很多...</li>
                            <li><b>爱神马geili:</b>我治疗了两天感觉的好...</li>
                            <li><b>天上的语言:</b>这几天已经看到明显效...</li>
                        </ul>
                  </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/8.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">罗曼卡婚纱摄影</a></dt>
                    <dd class="info">口碑好 性价比高 无额外消费</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">口碑好</span><span class="blue">很喜欢</span><span class="green">完美</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>明确指出i:</b>拍的很不错,老妈都夸...</li>
                            <li><b>爱就一直走吧:</b>他们家服务态度好,衣...</li>
                            <li><b>爱过你me:</b>最后照片拍出来后朋友...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>	
    <div id="control"></div>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到