程序人生

jquery实现图片轮播实践案例

时间:2020/12/13 6:26:25  作者:枫叶  来源:solgle.com  查看:373  评论:0
内容摘要:以前很多网站都采用flash,目前flash兼容性比较差,所以基本都用jquery来实现。首先肯定是要导入样式,具体尺寸大小可根据需要调整,本次所用的css代码如下: .bannerImgA01 { position: relative; overflow: aut...
以前很多网站都采用flash,目前flash兼容性比较差,所以基本都用jquery来实现。
首先肯定是要导入样式,具体尺寸大小可根据需要调整,本次所用的css代码如下:
<style>
 .bannerImgA01 { position: relative; overflow: auto; text-align: center;}
 .bannerImgA01 li { list-style: none; }
 .bannerImgA01 ul li { float: left; }
 #b05 { width: 290px;}
 #b05 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
 #b05 .dots li 
 {
  display: inline-block; 
  width: 10px; 
  height: 10px; 
  margin: 0 4px; 
  text-indent: -999em; 
  border: 2px solid #fff; 
  border-radius: 6px; 
  cursor: pointer; 
  opacity: .4; 
  -webkit-transition: background .5s, opacity .5s; 
  -moz-transition: background .5s, opacity .5s; 
  transition: background .5s, opacity .5s;
 }
 #b05 .dots li.active 
 { 
  background: #fff;
opacity: 1;
 }
#b05 .arrow { position: absolute; top: 100px;}
#b05 #al { left: 15px;}
#b05 #ar { right: 15px;}
</style>
 
 
这里有两个比较重要的js需要导入
<script language='javascript' type='text/javascript' src='jquery-1.11.1.min.js'></script>
<script language='javascript' type='text/javascript' src='unslider.min.js'></script>
<script language='javascript' type='text/javascript' >
//图片轮播的关键js
$(document).ready(function(e) {
    var unslider05 = $('#b05').unslider({
dots: true
}),
data05 = unslider05.data('unslider');
 
$('.unslider-arrow05').click(function() {
        var fn = this.className.split(' ')[1];
        //data05('unslider')[fn]();  /* 注释:这段代码有误,使用下面的 */
        data05[fn]();
    });
     
    /* //以下三个方法可以不用或者先屏蔽,本次实例不采用按钮功能
     $("#stop").click(function() {
         data05.stop();
     });
 
     $("#start").click(function() {
         data05.start();    
     });
 
     $("#move").click(function() {
         data05.move(1, function() {});
     }); */
});
</script>
 
 
 
<!-- 图片展示区的关键div -->
<div class="bannerImgA01" id="b05">
<ul>
   <li><a href="http://www.solgle.com/news/393.html" ><img src="1.jpg" alt="" width="290" height="240" ></a>
       <a href="http://www.solgle.com/news/393.html" >打卡一个网红地——甘海子,把枫叶带回家</a>
   </li>
   <li><a href="http://www.solgle.com/news/346.html" ><img src="2.jpg" alt="" width="290" height="240" ></a>
      <a href="http://www.solgle.com/news/346.html" >这个秋天,漫步在五彩斑斓的松坪沟</a>
  </li>
    <li><a href="http://www.solgle.com/news/392.html" ><img src="3.jpg" alt="" width="290" height="240" ></a>
    <a href="http://www.solgle.com/news/392.html" >毕棚沟,在这个秋天干一次扫黄</a>
  </li>
   <li><a href="http://www.solgle.com/news/391.html" ><img src="4.jpg" alt="" width="290" height="240" ></a>
     <a href="http://www.solgle.com/news/391.html" >这里是稻城亚丁——小众化旅游的记忆</a>
  </li>
   <li><a href="http://www.solgle.com/news/383.html" ><img src="5.jpg" alt="" width="290" height="240" ></a>
      <a href="http://www.solgle.com/news/383.html" >90%的人不懂得投资的意义</a>
   </li>
</ul>
 
<!--  左右翻动按钮代码  -->
<a href="javascript:void(0);" class="unslider-arrow05 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="15" height="30"></a>
<a href="javascript:void(0);" class="unslider-arrow05 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="15" height="32"></a>
</div>
 
以上就是案例实现的关键代码
案例展示页面: 请到本网站首页查看

相关js复制后自己保存到相应目录 
jquery-1.11.1.min.js
unslider.min.js
 
 
 
标签:jquery图片轮播实践 

solgle.com 版权所有,欢迎分享!!!

相关文章
    相关评论
     img1 img2 img3 img4 img5 img6 img7 img8 img9 img10
    评论者:      验证码:  点击获取验证码
       Copyright © 2013-2028 solgle.com,All rights reserved.[solgle.com] 公安机关备案号:51010802000219
    Email:solgle@solgle.com; weixin:cd1008610000 ICP:蜀ICP备14011070号-1