js网页焦点图实例

来源：互联网发布：手机模拟打碟机软件编辑：程序博客网时间：2024/05/01 01:47

这里写图片描述

在网上找的实例，然后自己重做了一个。
html：

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>MySlider</title>    <link rel="stylesheet" href="css/my.css"></head><body>    <div class="slider">        <div class="slider-img">            <ul class="slider-img-ul">                <li><img src="images/slider-5.jpg"></li>                <li><img src="images/slider-1.jpg"></li>                <li><img src="images/slider-2.jpg"></li>                <li><img src="images/slider-3.jpg"></li>                <li><img src="images/slider-4.jpg"></li>                <li><img src="images/slider-5.jpg"></li>                <li><img src="images/slider-1.jpg"></li>            </ul>        </div>    </div>    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>    <script type="text/javascript" src="./js/slider.js"></script></body></html>

css

*{margin:0;padding:0;list-style-type:none;}body{    background-color: darkslategrey;    margin: 0 0;    padding: 0;}/*大图片样式*/.slider{    width:1200px;    height:460px;    margin:50px auto;    overflow: hidden;    position: relative;}.slider-img{    width:12000px;    position:relative;}.slider-img-ul{    list-style: none;    position: absolute;    left:0px;    top:0px;    overflow: hidden;}.slider-img-ul li{    float:left;}img{    width:1200px;    height: 460px;}/*圆点样式*/.div_dot{    position: absolute;    right: 50px;    bottom: 30px;}.dot_ul li{    height: 10px;    width:10px;    margin-left: 10px;    border-radius: 50%;    border: solid 2px #fff;    background: #ccc;    float:left;    border-radius: 50%;}.dot_ul li:hover{    background:black;    cursor: pointer;}/*为毛这里不能直接.active ??? 要这么精确？？*/.dot_ul  .active{    background: black;}/*左右按钮样式*/.left_b ,.right_b{    text-align: center;    color: #fff;    font-size: 28px;    text-decoration: none;      /*下划线、删除线等等*/    line-height: 100px;}.slider_b {    height:100px;    width:50px;    position: absolute;    top:50%;    text-align: center;    margin-top:-50px; /*之所以要用 -50 是因为父标签 有个margin-top 50  不用的好 top:50%会对不准*/}.div_left_b{    left:0px;}.div_right_b {    right: 0px;}.slider_b:hover{    background: rgba(125,125,125,0.2);    /*opacity: 0.2;  用这个属性+ background-color 会把按钮的文字也去掉*/}

;(function($){    var slider=function (el){        this.el = el;        _this = this;        var roller;        //配置文件        this.config ={            pic_width:1200,            current_pic:1,      //从0开始计算            roll_speed:800,            inter_time:5000        }        //保存dom元素        var div_img= el.children('.slider-img');        var img_ul = div_img.children('ul');        var img_ul_li = img_ul.children('li');        //获取图片数量        var pic_pages = img_ul_li.length;        //默认图片摆放        img_ul.css('left',- _this.config.pic_width * this.config.current_pic)        //添加左右按钮        el.append('<div class="slider_b div_left_b"><a class="left_b" href="javascript:" >&lt;</a></div>')        el.append('<div class="slider_b div_right_b"><a class="right_b" href="javascript:">&gt;</a></div>')        var div_left_b = el.children('.div_left_b')        var div_right_b = el.children('.div_right_b')        //添加圆点        this.el.append('<div class="div_dot"><ul class="dot_ul"></ul></div>')        div_dot = el.children('.div_dot')        dot_ul = div_dot.children('.dot_ul')        for(var i=1;i < pic_pages - 1;i++){            if(i == this.config.current_pic){                dot_ul.append('<li class ="active"></li>')            }else{                dot_ul.append('<li></li>')            }        }        var dot_ul_li = dot_ul.children('li')        //左按钮点击事件        $('.div_left_b').click(function(event){            pre_pic()        })      //  slider_btn_right.on('click', function(event) {      //event.preventDefault()    //阻止默认发生的点击事件        //右按钮点击事件        $('.div_right_b').click(function(){            next_pic()        })        //小圆点点击事件        dot_ul_li.click(function(){            var index = $(this).index()            _this.config.current_pic = index + 1            img_ul.stop(true,false).animate({left:-_this.config.pic_width * _this.config.current_pic },_this.config.speed,function(){                refresh_dot()            })        })        roll_start()        //刷新点的位置        function refresh_dot(){            dot_ul_li.removeClass()            dot_ul_li.eq(_this.config.current_pic -1 ).addClass('active')  //获取第n 个li元素        }        function next_pic(){            if(_this.config.current_pic<pic_pages){                _this.config.current_pic++;                img_ul.stop(true,false).animate({left:-_this.config.pic_width * _this.config.current_pic },_this.config.speed,function(){                    if(_this.config.current_pic == pic_pages -1 ) {                        _this.config.current_pic = 1                        img_ul.css('left',- _this.config.pic_width)                    }                    refresh_dot()                })            }        }        function pre_pic(){            if(_this.config.current_pic>0){                _this.config.current_pic--;                img_ul.stop(true,false).animate({left:-_this.config.pic_width * _this.config.current_pic },_this.config.speed,function(){                    if(_this.config.current_pic == 0 ) {                        _this.config.current_pic = pic_pages - 2                        img_ul.css('left',- _this.config.pic_width * _this.config.current_pic)                    }                    refresh_dot()                })            }        }        function rolling(){            next_pic()        }        function roll_start(){            roller = setInterval(rolling, _this.config.inter_time);        }        function roll_stop(){            clearInterval(roller);        }    }    $.fn.extend({        slider:function(){            new slider($(this))        }    })})(jQuery)var config = {  current: 0,  speed: 500,  intervalTime: 2000}$('.slider').slider()//--------------stop(stopAll,gotoEnd)//stopAll   可选。规定是否停止被选元素的所有加入队列的动画。//goToEnd     可选。规定是否允许完成当前的动画。//该参数只能在设置了 stopAll 参数时使用。//--------------animate(styles,speed,esing,callback)//styles  必需。规定产生动画效果的 CSS 样式和值。//      可能的 CSS 样式值（提供实例）//speed 可选。规定动画的速度。默认是 "normal"。//可能的值：//    毫秒 （比如 1500）//    "slow"//    "normal"//    "fast"//easing  可选。规定在不同的动画点中设置动画速度的 easing 函数。   [ 对于现在的我来说太难了//内置的 easing 函数：//    swing//    linear//扩展插件中提供更多 easing 函数。////callback  可选。animate 函数执行完之后，要执行的函数。

0 0