特效描述:利用jQuery实现 图片叠加 滚动切换 代码,利用jQuery实现图片叠加滚动切换代码
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/public.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" />
2. 引入JS
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="js/zturn.js"></script>
3. HTML代码
<div style="height: 700px;width: 800px;margin:0 auto;"> <!--轮播--> <div class="lb_gl"> <div class="container"> <div class="pictureSlider poster-main"> <ul id="zturn" class="poster-list"> <li class="poster-item zturn-item"> <p class="xxgy">我是滚动1</p> <p class="say">明月几时有</p> <div class="for_btn"> <img src="img/a1.png" width="100%"> </div> </li> <li class="poster-item zturn-item"> <p class="xxgy">我是滚动2</p> <p class="say">明月几时有</p> <div class="for_btn"> <img src="img/a2.png" width="100%"> </div> </li> <li class="poster-item zturn-item"> <p class="xxgy">我是滚动3</p> <p class="say">明月几时有</p> <div class="for_btn"> <img src="img/a3.png" width="100%"> </div> </li> <li class="poster-item zturn-item"> <p class="xxgy">我是滚动4</p> <p class="say">明月几时有</p> <div class="for_btn"> <img src="img/a4.png" width="100%"> </div> </li> <li class="poster-item zturn-item"> <p class="xxgy">我是滚动5</p> <p class="say">明月几时有</p> <div class="for_btn"> <img src="img/a5.png" width="100%"> </div> </li> <li class="poster-item zturn-item"> <p class="xxgy">我是滚动6</p> <p class="say">明月几时有</p> <div class="for_btn"> <img src="img/a1.png" width="100%"> </div> </li> <li class="poster-item zturn-item"> <p class="xxgy">我是滚动7</p> <p class="say">明月几时有</p> <div class="for_btn"> <img src="img/a2.png" width="100%"> </div> </li> <li class="poster-item zturn-item"> <p class="xxgy">我是滚动8</p> <p class="say">明月几时有</p> <div class="for_btn"> <img src="img/a3.png" width="100%"> </div> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> var aa = new zturn({ id: "zturn", opacity: 0.9, width: 200, Awidth: 300, scale: 0.9, auto: true,//是否轮播 默认5000 turning: 2000//轮播时长 }) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>