您的位置：首页 > Web前端 > JavaScript

js网页焦点图实例

2017-05-07 15:09 253 查看


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

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 会把按钮的文字也去掉*/
}


js

;(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:" ><</a></div>')
el.append('<div class="slider_b div_right_b"><a class="right_b" href="javascript:">></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 函数执行完之后，要执行的函数。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html javascript 实例
相关文章推荐
新的分享
章节导航