直接上代码,可能不是最好的,欢迎吐槽。

 /**
 * Created by Steven on 2015/07/10/0010.
 * @email zhuttymore@126.com
 */
 
 (function ($) {
 
  $.fn.slider = function (opt) {
   opt = $.extend({
    speed:'fast',
    auto: false,
    interval: 1000
   }, opt);
 
   var _this = this;
   var index = 0;
   _this.find('.window li').width(_this.width());
 
   var animate = function(index){
    var win = _this.find('.window');
    var offset = win.parent().width();
    win.animate({'marginLeft': -offset * index}, opt.speed);
    _this.find('.tab li').removeClass('select');
    _this.find('.tab li').eq(index).addClass('select');
   };
 
   _this.find('.tab li').mouseover(function () {
    index = parseInt($(this).index());
    animate(index);
 
   });
 
   _this.find('.btn li:first-child').click(function(){
    --index;
    if(index < 0){
     index = _this.find('.window li').length - 1;
    }
    animate(index);
   });
 
   _this.find('.btn li:last-child').click(function(){
    ++index;
    if(index >= _this.find('.window li').length){
     index = 0;
    }
    animate(index);
   });
 
   if(opt.auto){
    var time = setInterval(function(){
     ++index;
     if(index >= _this.find('.window li').length){
      index = 0;
     }
     animate(index);
    },opt.interval);
   }
 
   return $.each(this,function(index,ele){});
  };
 })(jQuery);

Html

 <div class="slider">
   <ul class="btn">
    <li><i class=" icon-caret-left"></i></li>
    <li><i class=" icon-caret-right"></i></li>
   </ul>
   <ul class="window">
    <li><img src="/UploadFiles/2021-04-02/2841_591046_561095.jpg">

CSS

 .slider {
  height: 440px;
  overflow: hidden;
  position: relative;
 }
 .slider .btn li{
  position: absolute;
  width: 30px;
  height: 50px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-size: 40px;
  top:45%;
 }
 .slider .btn li:first-child {
 
  left:0;
 
 }
 
 .slider .btn li:last-child {
 
  right:0;
 
 }
 
 .slider img {
  width: 100%;
  height: 100%;
 }
 
 .slider .window {
  width: 40000px;
  height: 400px;
  overflow: hidden;
 }
 
 .slider .window li {
  float: left;
  overflow: hidden;
  width: 1200px;
 }
 
 .slider .tab {
  position: absolute;
  z-index: 5;
  width: 880px;
  margin: -40px auto;
  left: 13%;
 }
 
 .slider .tab li {
  float: left;
  width: 200px;
  height: 80px;
  margin-left: 18px;
  cursor: pointer;
 }

Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。

Run 起来:
$('.slider').slider({auto: true, interval: 2000});

改进js结构:

/**
 * Created by Steven on 2015/07/10/0010.
 * @email zhuttymore@126.com
 */

(function ($) {

 $.fn.extend({
  slider:function (opt) {
   opt = $.extend({
    
   }, opt);
   //Do something here
   
   return $.each(this,function(index,ele){});
  }
 });

})(jQuery);

以上就是本文的全部内容,希望对大家学习jqueryt程序设计有所帮助。

标签:
jquery轮播焦点图,jquery轮播,jquery焦点图

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“基于jquery实现轮播焦点图插件”

暂无“基于jquery实现轮播焦点图插件”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。