更改js滑块中的图片和内容

时间:2014-09-12 13:25:14

标签: javascript jquery html css

我的网站上有这个滑块,我想学习如何更改图片和自己编辑内容?我看过一些视频,但每个人都以不同的方式工作,所以我想工作对于这个具体的例子。这个是我自己模板的一部分,

<div class="slider-container">
 <div class="container">
 <div class="row">
 <div class="span12">
 <div class="slider_block">

 <script type="text/javascript" src="{{skin url=''}}js/camera.js"></script>
 <script type="text/javascript">
    /* index slider */
    jQuery(function(){
       jQuery('#camera_wrap').camera({
          alignmen: 'topCenter',
          height: '57.179%',
          minHeight: '134px',
          loader : false,
          pagination: false,
          fx: 'simpleFade',
          navigationHover:false,
          thumbnails: false,
          playPause: false 
       });
    }); 
 </script>

 <div class="fluid_container">
 <div class="camera_wrap camera_orange_skin" id="camera_wrap">
 <div data-src="{{skin url=''}}images/slider_pic1.jpg" data-link="carpet-bags.html">
 <div class="camera_caption fadeFromLeft">
 <div class="right_slider_side slide1">
 <div class="sl_row1">Summer</div>
 <div class="sl_row2">sale</div>
 <div class="sl_row3">Get up to</div>
 <div class="sl_row4">35<span><i>%</i>off</span><strong>*</strong></div>
 <div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
 </div> 
 </div>
 </div>
 <div data-src="{{skin url=''}}images/slider_pic2.jpg" data-link="handbags.html">
 <div class="camera_caption fadeFromLeft"> 
 <div class="right_slider_side slide2">
 <div class="sl_row1">Free</div>
 <div class="sl_row2">Shipping</div>
 <div class="sl_row3">on orders over</div>
 <div class="sl_row4"><i>$</i>65<strong>*</strong></div>
 <div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
 </div> 
 </div>
 </div>
 <div data-src="{{skin url=''}}images/slider_pic3.jpg" data-link="laptop-bags.html">
 <div class="camera_caption fadeFromLeft"> 
 <div class="right_slider_side slide3">
 <div class="sl_row1">Clearance</div>
 <div class="sl_row2">sale</div>
 <div class="sl_row3">Get up to</div>
 <div class="sl_row4">75<span><i>%</i>off</span><strong>*</strong></div>
 <div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
 </div> 
 </div>
 </div> 
 </div>
 </div>

 <div class="banners_col">
 <div class="tbanner banner1">
 <a href="{{store direct_url="brands/piel-leather.html"}}">
 <div class="b_holder">
 <h2>Top Brands</h2>
 <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
 <span class="ban_shop_now">Shop now!</span>
 </div>
 <img src="{{skin url=''}}images/banner1.jpg" alt="" />
 </a>
 </div>
 <div class="tbanner banner2">
 <a href="{{store direct_url="brands/vitalio-vera.html"}}">
 <div class="b_holder">
 <h2>New Arrivals</h2>
 <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
 <span class="ban_shop_now">Shop now!</span>
 </div>
 <img src="{{skin url=''}}images/banner2.jpg" alt="" />
 </a>
 </div>
 </div>

 </div>
 </div>
 </div>
 </div>
 </div>

0 个答案:

没有答案